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

Behaviorテンプレート

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

名称
Behavior
びへいゔぃあ
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 疑似メイソンリー
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.16 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 ver.15 2023.12.22
  • グローバルナビゲーションを固定できるようJSを分離

自身で修正される場合は

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/behavior.js" async></script>

上記赤字部位のURLを下記の通り変更

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/behavior_ver15.js" async></script>

続いて </body> の直前に以下のscript要素を追加。

<script src="https://blog-imgs-166.fc2.com/v/a/n/vanillaice000/peekaboo_navigation.js" async></script>
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.9.5
  • スクロール時のナビゲーションに関連するCSSの記述ミスを訂正
更新履歴 2023.8.16
  • Font Awesomeの利用を停止
  • jQueryの利用を停止
  • Twitter名称・ロゴ変更に対応
  • グリッドアイテムを全体リンクに変更(UI対策)
  • カスタムプロパティ導入
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

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

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.4.1
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

最終更新 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.26
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め </footer> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>-<%comment_month>-<%comment_day> <%comment_youbi> <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a class="post-a" href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="post-a" href="#comment_form" onclick="add_str(this);" title="To&nbsp;<%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}
②について

#community" で検索するとhtml内に2箇所あります。2箇所とも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a reply</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

#inner-contents {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.20
  • Font Awesome(JS)を廃しインラインSVGに変更
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

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

日本人という民族は本当に繊細で素晴らしいですよね。
エレベータの保守点検は決められた日時に決められた通りにちゃんとやれ(in あめりか)
何があったかはお察しください (;`ー´)o

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE 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設定「有効にする」

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

ご利用の前に

Important notice.

本テンプレートはメイソンリーレイアウトなので 時系列が重要になるブログでの利用には向きません ので事前にしっかりと検討を行ってください。

メイソンリーはレンガ状の配列を重視しますので、都合の良い形に並び替えを行います。そのため、並びの両サイドが時系列の前後と一致するとは限りません。

また、ハイパフォーマンスを維持するために、オリジナル画像の縦横比を踏襲しない方式でメイソンリーを実現しています。オリジナル画像の縦横比をそのまま活用したい場合は以下のテンプレートが適しています。

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

-
2018/04/17 (Tue) 22:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/18 (Wed) 00:26

To Behavior DLリンクの件 内緒さん

またやってもーた (´=д=`)
修正しましたー。いつもお知らせ頂き感謝です ('0')/

-
2018/09/29 (Sat) 15:19

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/30 (Sun) 01:35

To Behaviorレイアウトの件 内緒さん(終了のご報告)

こんばんは (o'ω')ノ

そうですね。仕様です。
縦横比については本文にある通りです。そしてそもそもメイソンリーレイアウトというのは時系列を尊重しないレイアウトなんです。
ご理解頂けると助かります。ありがとうございます :)

秋風コスモス
2018/10/05 (Fri) 16:43

トップページのカテゴリに追加出来ません。。

Akira様、ステキなテンプレート使わせて頂きましてありがとうございます。

ブログもちょっと見はステキな感じになってます。
でも、トップページのカテゴリHTMLはガタガタで「出た所勝負」な状態です。
カテゴリ番号と場所が合うように設定されているはずなのに、なぜが反映しません。
なので番号を進めて充てたりして適当に収めている状態です。
それでも最後のカテゴリ「その他」をどうしても出す事が出来ませんでした。
どこに問題があるのか、お時間のある時で結構ですので、見て頂ければ幸いです。
よろしくお願い致します。

vanillaice (Akira)
Akira
2018/10/06 (Sat) 00:44

To 秋風コスモスさん

ありがとうございます (o'ω')ノ

こちらの記事をお読みください。
https://vanillaice000.blog.fc2.com/blog-entry-785.html

maroemon
2019/02/02 (Sat) 18:06

個別記事のテキストについて

はじめまして。
写真を表示するのにとても適しているので気に入り、Behaviorを使わせていただいております。
個別記事において、画像(img)は最大幅で表示しながら、テキストだけ1行の文字数か横幅を制限することは可能でしょうか?
スタイルシートをいろいろといじってみたのですが、画像の幅だけを小さくすることはできても、テキストの幅だけ制限することができませんでした。
可能でしたらご教示ください。
よろしくお願いいたします。

vanillaice (Akira)
Akira
2019/02/02 (Sat) 19:59

To maroemonさん

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

同じ領域内で画像は横100%、テキストはそれよりも小さく、ということですよね。
基本的にそれをテンプレートでなんとかするというのはできません。何故ならいつどこにどのサイズの画像が掲載されるかをテンプレート構造で判断することはできないからです。
ですからこれを実現するにはmaroemonさんが書くテキストの方で一工夫しなければいけません。

幸いp要素を利用して記事を書かれていてクラス名も付いていますので、そちらにプロパティを追加されてはいかがでしょうか。p要素のクラス名は
MsoNormal
で合ってますでしょうか。そしてこのクラス名は特に何も指定されていないように見受けられます。
ただこれ、意図的なら良いんですが、もしかしてwordあるいはその類似アプリケーションやビルダーで文章を書かれてませんでしょか。文章のhtml構造についてあまりよろしくない状態になっている点はお伝えしておきます。
<span lang="EN-US"> と <o:p></o:p> が到るところに書かれていますが全てhtml構文エラーです。
そしてクラス名の文頭には小文字のみ許可されていますが見て取れるように頭が大文字になっています。

この件についてはお任せします。私からは「html専用エディターを利用した方が良いですよ」とアドバイスさせてくださいね。
本当はクラス名を利用してCSSを指定するのがベストなんですが、問題がありますので今回は以下のような内容の方が良いかもしれません。

p要素ももしかしたら意図的ではないかもしれませんが、とりあえず以下の通り。

例)
@media screen and (min-width: 560px) {
#inner-contents p {
width: 80%;
margin: auto;
}
}

赤字の数値はご自身で調整し、スタイルシートの末尾に記載。
上記内容は画面幅560px以上になった時のみ有効です。スマホでもテキストが狭くなっても構わないのであれば

#inner-contents p {
width:80%;
margin: auto;
}

でもOKです(おすすめはしませんが)
同じ要領で「見出し」も

#inner-contents h2,
#inner-contents h3,
#inner-contents h4,
#inner-contents h5,
#inner-contents h6 {
width: 80%;
margin: auto;
}

こうしてp要素と同じ指定を行ってください。

仮にエディターを変更し、p要素が自動入力されなくなった場合には上記内容は無効化されます。記事に記載するテキストは

<p>テキスト内容</p>

この形を守るようにしてください。
これが一番簡単な対処法ではないかと思います。
一度お試しください。
不正な文字列と不正なクラス名についてはいずれどこかのタイミングで綺麗に修正された方が良いと思います。

------
また、テキストの幅を制限したいというのはテキストの一文あたりの分量が気になるからではないかと思いますので、別のアプローチもお考えください。

1. 一文改行を辞めて段落を意識して書く
参考記事: 記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法
https://vanillaice000.blog.fc2.com/blog-entry-810.html

2. 文字を大きくする。

文字を大きくするだけでも見た目は違ってきます。また、上に記したp要素への指定について、widthへの%指定ではなく参考記事にあるようなmax-widthへのpx指定でも良いと思います。挙動が違いますのでどちらを選ぶかはご自身で決めてくださいね。

maroemon
2019/02/02 (Sat) 20:43

御礼

ありがとうございます。
ご返答いただいた文章はコピーさせいただきました。
こんな短時間に詳しく説明をいただけて感激しております。
僕はライターを生業としていることもあり、たしかにwordで原稿を作成したものがいくつかあります。
参考にして修正してみます。
しばらくwebからは遠ざかっていたものですから、助かりました。

-
2019/02/02 (Sat) 22:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/02/03 (Sun) 00:53

To maroemonさん&内緒さん

ごめんなさい。 width が with と誤字でした。コピペされたので間違いをそのまま引き継いでしまいます。
修正しましたので改めてコピーをお願いします。

お知らせ頂いた内緒コメントさん、ありがとうございます!

maroemon
2019/02/03 (Sun) 19:28

修正したものを記載してみたのですが、
やはり画像も小さくなってしまいます。
p:not(img){
max-width: 80%;
}
でいけるかなと思ったのですがダメでした。
この構文は間違っているかもしれませんが、
やりたかったのはこういうことなのです。(汗

なにかほかの手段を考えてみます。
ありがとうございました。

vanillaice (Akira)
Akira
2019/02/03 (Sun) 20:24

To maroemonさん

こんばんは (o'ω')ノ

まず、昨日の誤字の件はごめんなさいね。
で、この方法を取るならば以下の2点が必須要項です。

① imgをp要素内に含めない
例)
×
<p>あいうえお<br><img src="xxxx.jpg"></p>

<p>あいうえお</p><img src="xxxx.jpg">

② テキストはp要素でマークアップする
×
<div style="text-align: center;">あいうえお</div>

<p style="text-align: center;">あいうえお</p>

----
2月3日以降の投稿はテキストがp要素ではなくdiv要素に変更されています。横幅の制限はp要素に指定したのですからdiv要素でマークアップしてしまえば効力はありません。

ここでmaroemonさんの方針をはっきりと定めて頂く必要があります。
htmlというのは見た目の操作に用いるのではなく意味や定義のために使用します。
注意点として「imgをp要素に含めない」としましたが、実際はimg要素というのはp要素内に書く、あるいはfigure要素として独立させるというのが適切です。

明確にしたい点はmoraemonさんが「htmlマークアップのセマンティクス(意味論)」を重視しているかどうかです。
恐らくimgのalt属性の使い方から判断するとあまり意識されていないように思います。なのでここではやはり p要素内にimg要素を含めない という方法をおすすめします。

他にもtransformプロパティを利用してテキストよりも画像を大きくする、という方法があり、今回おすすめしているのとは逆方向からのアプローチですが、緻密に計算しないとオーバーフロー(画面幅超過 = NOT モバイルフレンドリー)してしまうのと、一口にimgといっても全てを横100%で表示したいわけではないでしょうし(縦長の画像などもありますよね)、現存のimg要素にクラス名が付いていないので対象要素の特定や振り分けができない、などやはり現実的ではないと思います。

----
あと一枚あたりの画像の容量が大きすぎてページ自体が重たくなっていますので画像容量の削減もご検討くださいね。またはBehaviorはlazyloading(画像の遅延読み込み)用JSが元から含まれていますのでそちらを活用されても良いと思います。こちらについてはお任せしますが容量削減はいまや当たり前ですからせめてそれだけでも行った方が良いと思いますよ。

参考記事: 画像の容量気にしてますか?
https://vanillaice000.blog.fc2.com/blog-entry-228.html

参考記事: lazyloading関連記事(検討編と初級編をおすすめします)
https://vanillaice000.blog.fc2.com/?tag=Lazyloading

今最新記事のページスピードスコアが30%しかないのですが、lazyloadingを使うことで90%取れるはずです。ページの読み込みが遅いと離脱率が上がります(容量削減は必須)

maroemon
2019/02/04 (Mon) 00:16

いろいろとありがとうございます。
以前は画像サイズを500kに抑えていたのですが、制限を外して画質のバランスを見ていました。
これは戻しがほうがよさそうですね。
ほかの件は、僕のスキルでは無理そうですね。
カスタマイズに割ける時間も限りあるので、僕なりに写真を楽しむ手段を考えてみることにします。
大変、お世話になりました。

vanillaice (Akira)
Akira
2019/02/04 (Mon) 21:34

To maroemonさん(終了のご報告)

こんばんは (o'ω')ノ

画像は大きすぎても見づらいので原寸で長辺800〜1200px、表示領域はやはり800〜1000px程度が見やすいと思いますよ。文字も大きくされて全体のバランスも良くなり、これならテキストの領域制限は不要だと思います。
お疲れ様でした :)

* 文字の大きさは
body {
を検索し、近接にある

font: 1.4rem/ 省略

太字部位の数字を1.5や1.6に変更することで記事を書く都度エディターツールの利用も不要、過去記事も一括で大きくなります。参考までに。

maroemon
2019/02/05 (Tue) 18:45

ご丁寧にどうも!!

-
2019/09/05 (Thu) 12:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/05 (Thu) 21:31

To Behavior背景色の件 内緒さん

こんばんは。

> カテゴリ毎に背景の色を変えたい〜

これは「カテゴリ一覧ページ(blog-category-x.html)」のことでしょうか。「個別記事ページ(blog-entry-x.html)」のことでしょうか。
それとも両方でしょうか。

対象ページ種が不明だと作業できませんのでお返事をお願いします。
それから、サイドメニュー部(ページ下部プラグイン)は元々背景色を分けてありますが、こちらをどうされるのか(メイン背景と合わせる or デフォルト色で固定)も併せてお伝え下さいね。

かんり
2019/09/06 (Fri) 18:51

To Akiraさん

お返事頂きありがとうございますm(_ _)m
情報不足で申し訳ございません
個別記事ページの事になります。
どうかよろしくお願い致します。

-
2019/09/06 (Fri) 18:53

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/06 (Fri) 21:36

To Behavior背景色の件 内緒さん②

こんばんは。

サイドメニューの背景色はどうされるのかお返事が無いので「そのまま」と仮定して進めますね。

-----
<div id="wrapper">
で検索するとhtml内に1箇所ありますのでこれを

<div id="wrapper"<!--permanent_area--><!--topentry--> class="catebg<%topentry_category_no>"<!--/topentry--><!--/permanent_area-->>

に変更。
次に各カテゴリの番号を調べてください。
例) https://vanillaice000.blog.fc2.com/blog-category-5.html
赤字の部位がカテゴリ番号です。

.catebgカテゴリ番号

これがセレクタになります。例えばカテゴリ番号が「5」ならば

.catebg5

です。

.catebgカテゴリ番号 {
background: カラーコード;
}

全てのカテゴリ番号で上記のようなルールセットを作成し、スタイルシート末尾に追加。
カテゴリが10あれば10のルールセットになります。
よろしくお願いします。

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