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

OmbreRoseテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
OmbreRose
おんぶる ろーず
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • プロフィール + SNSリンクリスト
  • 最新記事サムネイルリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Playfair Display
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.11 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 2023.9.22
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.1
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • 検索をモーダルに変更
  • RSSリンク削除
  • webフォントの表示方法を変更
  • グローバルナビゲーションからカテゴリリストを削除
  • パン屑リストからSVGアイコンを削除
  • ユーザビリティの最適化
  • コメント削除アラート追加
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 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
  • 個別記事ページ送りの複製を可能にしました

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

本ページの内容は2023年9月1日メンテナンス以降のバージョンが対象です。

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

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

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

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事フッターの管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

-
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')/
変更を確認できました。お疲れ様でした :)

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