OmbreRose - FC2ブログテンプレート

OmbreRose - FC2ブログテンプレート

テンプレート 配布中テンプレート
2019/12/02
29
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWD
OmbreRoseテンプレート

OmbreRoseテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

名称 OmbreRose
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大約880px
サイド --- 最小300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム
(デバイス幅依存) 		1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
最終更新 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("entry_pager-prev-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("entry_pager-next-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("entry_pager-prev-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("entry_pager-next-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.4.13
  • 個別記事ページナビのhtml誤記を修正
最終更新 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

おんぶる ろーず
11/24に申請済ですがまだ承認されていません(11/30に念の為再申請を行いました)
リジェクトされる可能性もありますが、ちょっと実生活の方が多忙で公開の可否をチェックするのが難しいので記事だけ先にUPしておきます。

* 承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE DEMO
画像クリックでデモ画面へ
目次へ戻る↑

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

目次へ戻る↑

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • トップページタイルレイアウトの変更
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
目次へ戻る↑

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

目次へ戻る↑

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ？」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない？」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

vanillaice000.blog.fc2.com
目次へ戻る↑

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container で検索するとスタイルシート内に 2箇所 あります。2つ目の方 のルールセット内 justify-content: space-between; の直下に flex-direction: row-reverse; を 追加。

続きましてそのすぐ下にある #primary のルールセット内 margin-right: var(--side-gap); の緑部位 right を left に 変更。

目次へ戻る↑

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

目次へ戻る↑

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

目次へ戻る↑

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。プロフィールの表示位置変更は可能です。

目次へ戻る↑

補足事項

Handouts

  • ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

目次へ戻る↑

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23のバージョンより個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲です。複製した内容を希望の位置へペーストしてください。

目次へ戻る↑

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

Related post

Comments  29

-
2019/12/29 (Sun) 05:39

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/01/03 (Fri) 19:20

To OmbreRoseをご利用の内緒さん

こんばんは。お返事遅くなりました (*_ _)

あまりにショックで何をどうお伝えしたら良いのかわかりません。
具体的に何ができるというわけではないのが歯がゆいですが、陰ながら応援させてくださいね。
こんなことしか言えずごめんなさい。

-
2020/01/07 (Tue) 04:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/01/10 (Fri) 23:11

To OmbreRoseをご利用中の内緒さん

こんばんは。またもお返事遅くなりました (*_ _)

きっと参考に出来る方も多いと思います。内緒さんの明るい文体も救いになるのではないかしら。
こちらこそこれからもよろしくお願いします :)

-
2020/01/11 (Sat) 13:50

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

きろろ
2020/01/11 (Sat) 18:42

コメントに関して

こんばんは、きろろでございます。
コメントを解放したところ、少しずつですがコメントが寄せられるようになりました。
で、そのコメントにお返事をするとですね、なぜか私のコメントが上にくるのです。
丸い→マークで返信しているのですが、コメント者の上に最新のコメントとして表示されます。
お暇なときでかまいませんので、見ていただけますか？

vanillaice (Akira)
Akira
2020/01/15 (Wed) 02:44

To きろろさん

お返事大変遅くなりました (*_ _)

受信コメントの表示順序はテンプレートではなく個人設定なのでそちらを確認してくださいね。
よろしくお願いします。

https://admin.blog.fc2.com/control.php?mode=setting&process=2#res
「コメント一覧表示」が該当です。

きろろ
2020/01/15 (Wed) 08:48

ありがとうございます

なんと初歩的なミスをやっちまい申し訳ございません。
で、もうひとつ。
Akirasanの記事を読みあさっているのですが、
コメント欄に自分のプロフィール画像をアイコンとして表示させるのを教えてください。
確かAkirasanのブログ内にありましたよね？
そもURLを教えていただければと思いますよろしくお願いします。

vanillaice (Akira)
Akira
2020/01/16 (Thu) 04:13

To きろろさん

コメント欄のプロフィールアイコンは私が見る限りでは表示されているように思いますが、表示されないページがあるということかしら。その場合には以下の点にご注意ください。

・ ログオフ状態で返信した場合には表示されない
・2017年1月30日以前の記事には表示されない(FC2の仕様)
・「自分のプロフィール」が「コメント主それぞれの」という意味であれば、第三者のプロフィールアイコンを自動表示する権限と仕組みは今のところありません。

上記に当てはまらなければ自動で表示されるようになっていますので確認をお願いします。

きろろ
2020/01/16 (Thu) 14:37

To Akiraさん

お返事ありがとうございます。
今現在、病院でiPadからブログを書いております。
コメントに関してAkiraさんがおっしゃるような事象に当てはまらないきがします。
最後の
>「自分のプロフィール」が「コメント主それぞれの」という意味であれば、第三者のプロフィールアイコンを自動表示する権限と仕組みは今のところありません。
これはコメントしてくれた人のアイコンを含めて表示するのは無理、でよろしいんですよね？
Akiraさんがみるかぎり、きろろの猫アイコンは表示されているのですね。
退院後、PCで確認してみますね。
ありがとうございますm(__)m

きろろ
2020/01/16 (Thu) 14:42

To Akiraさん

失礼いたしました(>_<)
今、ブログを見たら表示されておりました。
粗忽物で申し訳ないです。
毎度のことだよね……、と思ってやってください(；ω；)

vanillaice (Akira)
Akira
2020/01/16 (Thu) 23:12

To きろろさん

きろろさん、こんばんは ('0')/

解決済、ということで大丈夫でしょうか。お疲れ様でした :)

沙姫
2020/02/15 (Sat) 18:21

「New」の表示期間について

いつも、お世話になっております。今回も、こちらの素敵なテンプレートを、お借りいたしました＾＾
つきましては、新しい記事を投稿した時に、「New」が表示される期間は、通常は何日間でしょうか？
それと当方、できれば「3日間、New を表示したい」と、思っております。
どこを、変更すればよいか、お教えいただけると、助かります。
大変お忙しい中を、恐れ入りますが、どうぞよろしく、お願いいたします。

vanillaice (Akira)
Akira
2020/02/15 (Sat) 21:08

To 沙姫さん

こんばんは。ありがとうございます :)

デフォルトの日数は2日です。0時で切り替わりますので 24時間×3日=72時間 の表示とは限りません。詳細は以下の記事をご参照ください。

参考記事: FC2ブログNEWマークのdocument.write書き換えコード(第4章2項「表示期間の指定」)
https://vanillaice000.blog.fc2.com/blog-entry-973.html

-----
var s=2
で検索し、赤字部位を3日なら3に、4日なら4に変更してください。
よろしくお願いします。

沙姫
2020/02/15 (Sat) 21:47

「New」の表示期間について（お礼）

こんばんは。大変お忙しい中を、いつも大至急、お返事いただきまして、大変有難いです。
どうもありがとございます。
お蔭さまで、私が思っていた場所の、変更だったので、早速、変更いたしました。
後で、ゆっくりと、ご指定いただいた記事を、見させていただきたいと思います。
本当に、どうもありがとうございました。
取り急ぎ、お礼まで＾＾

vanillaice (Akira)
Akira
2020/02/15 (Sat) 21:49

To 沙姫さん(完了のご報告)

ご報告ありがとうございます。お疲れ様でした :)

-
2020/04/14 (Tue) 19:41

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/04/14 (Tue) 20:56

To OmbreRoseをご利用の内緒さん

こんばんは。

> ヘッダーの画像は上ぴったりで、横は下部分と同じ（1300px？）で、見えている画像部分は500px前後くらい〜

ごめんなさい。この意味がわからないです。
「上ぴったり」の「上」とはなんでしょう。画像の上辺ですか？ブログ全体の上辺(トップ位置)でしょうか。
「横は下部分と同じ」下部分というのは？ヘッダーの下に並んでいる各記事のことですか？それとも画像を下辺と同じ高さにする、つまり正方形にするという意味ですか？
「見えている画像部分は500pxぐらい」？？

えっと、
「ヘッダー上下の余白を無くし、横幅はメインと同じ1300pxにし、見える部位が500px？？」

ごめんなさいやっぱわからない （￣∀￣；）

-----
> NoImage画像だけ動かさない〜

元々No imageは画像ではないですし、動かない設定になってます。

・No imageに画像を指定したい
・動かさないようにしたい

というご希望なのであれば、スタイルシート末尾に以下の内容を追加してください。
(カスタマイズした内容はデフォルト内容に戻してくださいね)

.grid-noimage {
background: url(アドレス) center center /cover no-repeat;
}

ヘッダーの件はなんともお返事ができないので、もう少し整理してわかるように説明して頂けると助かります。

-
2020/04/15 (Wed) 19:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/04/16 (Thu) 02:21

To OmbreRoseをご利用の内緒さん②

こんばんは。
見た目はもうこのままで良いんですね。一応確認なんですが内緒さんがおっしゃる「横」というのは「横幅」のことだったんですね。
「上」「下」という表現だったので「横」は左右の辺、つまり高さのことかと思ってしまいました。

結局今回のご質問というのは「ヘッダー全体リンクを外してブログタイトル部位のみリンクにしたい」ということで合ってますでしょうか。

で、html, CSS共に内容が少し違っているのでトップページ最初の1ページ目で表示されるはずの「ブログ説明文」が見えなくなっています(widthが消失しているため)
これをどうしたいのか不明ですが、正しく表示させるものと仮定して進めます。
それにはまずhtml内容, スタイルシート共にお手数ですが、テンプレートを再DLするか複製を活用するなどしてデフォルトに戻してください。
(その後昨日行ったカスマイズ(CSS内容の追加)を忘れずに行ってください)

* 以下の説明に出てくる「ルールセット」とは

.xxx {
内容;
}

この形のまとまりのことを指します。

-----
【スタイルシート】

①
#header-banner
で検索し、ルールセット内
max-width: 800px;
の一行を削除。

②
#blog_title
で検索し、ルールセット内
visibility: hidden;
の一行を削除。

③
続いて同ルールセット内
background に関する内容(デフォルト内容は長いので省略)を以下の通り変更

background: url(ヘッダー画像URL) center center /cover no-repeat;

③
続いて同ルールセット内
padding: calc(194 / 923 * 100%) 0 calc(207 / 923 * 100%);
を以下の通り変更。

padding: 14% 0;

④
.wf-active #blog_title
で検索し、このルールセットを削除。

【html】

<a id=blog_title-anchor href="<%url>">
と、その終了タグ
</a>
の位置を変更し、以下の形になるようにしてください。

<a id=blog_title-anchor href="<%url>"><%blog_name></a>

-----
これでご希望に沿えると思いますが、ブログタイトルのテキストはほぼ見えない状態ですから何か工夫は必要だと思います。
例えば #blog_title のルールセットに
text-shadow: 3px 0 4px rgba(50,50,50,.5);
とテキストに陰影を追加するなど。


以上です。よろしくお願いします。

-
2020/04/16 (Thu) 18:42

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/04/16 (Thu) 22:26

To OmbreRoseをご利用の内緒さん③

こんばんは。

スクリーンショットと同じになっていればOKです。
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser2020_4_16----1200.png

よろしくお願いします。

-
2020/04/17 (Fri) 19:48

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2020/04/19 (Sun) 13:44

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/04/19 (Sun) 23:24

To To OmbreRoseをご利用の内緒さん(終了のご報告)

こんばんは。お返事大変遅くなりました (*_ _)

また何かありましたらお尋ねください。お気遣いもありがとうございます。
お疲れ様でした :)

-
2022/01/19 (Wed) 06:56

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/01/19 (Wed) 13:39

To OmbreRoseブログの投稿日時について 内緒さん

こんにちは ('0')/
励みになるお言葉ありがとうございます :)

> iPadかiPhoneでブログを書いているので〜

iOSで文字列検索するには、(safariの場合)
下のステータスバー「共有(本のアイコンの左)」をタップ、スクロールすると「ページを検索」というのがありますので、そちらを利用してください。htmlの目分量よりも円滑に作業できると思います。入力が大変でしょうからなるべく短い検索文字でお伝えしますね。

time id

で検索すると(time と id の間には半角スペースが必要です)、1箇所ヒットします。この
<time
から下の方にある近接の
</time>
までを削除してください。よろしくお願いします :)

-
2022/01/19 (Wed) 16:08

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/01/20 (Thu) 13:28

To OmbreRose 完了のご報告 内緒さん

こんにちは ('0')/
変更を確認できました。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
    FC2共有テンプレート一覧 ご質問の前に
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)
「配布中テンプレート」 カテゴリの一覧を見る