Home > FC2ブログ > basic_white > basic_whiteテンプレート タイトル左のアイコン画像の色を変更

basic_whiteテンプレート タイトル左のアイコン画像の色を変更

 basic_whiteテンプレートの記事タイトルやプラグインタイトルの左に表示されるマーク(アイコン画像)を変更する方法です。

 サンプルとしていくつかの色を用意しました。

記事タイトル

プラグイン

その他見出し

投稿コメント

 変更したい部分の色を選択するとテキストエリアに貼り付け用のコードが生成されるので、それをスタイルシートに追加すれば色が変わります。デフォルトのままでいい場合は左端の灰色を選択してください。

 「その他見出し」は記事下プラグイン3のタイトルや「記事一覧」「コメント」「トラックバック」の見出しです。

 「投稿コメント」は投稿されたコメントやトラックバックのタイトルです。

※このブログで紹介している他のカスタマイズでタイトル画像を指定するスタイルを追加した場合はそちらも同様に変更してみてください。

※2013年10月31日以降にこのテンプレートを利用し始め、記事下プラグイン3のタイトルのデザインが崩れている場合は記事下プラグイン3のタイトルなどのデザイン調整の最初にあるスタイルシートの変更を行ってください。

 アイコン画像などが正常に反映されない時は「;」の直前に「 !important」をつけてください。

background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/content_title_blue.png) !important;

背景色の変更

 追加したコードにある「}」の直前に「background-color: #eeeeee;」などを加えると背景色が変わります。他の部分についても同様です。

#main #main_contents h2.entry_header, /* 記事タイトル */
#main #main_contents h2.sub_header {
  background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/content_title_blue.png);
  background-color: #eeeeee;
}

画像のダウンロード

 必須ではありませんが、こちらで用意したアイコン画像が何らかの原因で表示されなくなる可能性もなくはないので、画像をダウンロードして自分のブログにアップロードすることを推奨します。

 次の画像を右クリックして保存します。

 アップロード後は追加したスタイルシートコードの画像アドレスを自分がアップロードした画像アドレスに変更してください。

記事本文内の見出しアイコンを変更

※記事本文内でh要素を使用していない場合は必要ありません。

 場所はCtrl+Fキーで『.entry_body h』を検索。画像アドレス部分を変更します。色は生成したコードの画像アドレスを参照してください。見つからない場合は以下のコードを丸ごとスタイルシートに追加、変更してください。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
  margin: 0 0 10px;
  padding: 5px 0 5px 20px;
}

 h3とh4で別のデザインにする時は以下のように複製・追加して個別に指定してください。

.p_area .entry_body h2, .p_area .entry_body h5 {
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
  margin: 0 0 10px;
  padding: 5px 0 5px 20px;
}
.p_area .entry_body h3 {
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
  margin: 0 0 10px;
  padding: 5px 0 5px 20px;
}
.p_area .entry_body h4 {
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
  margin: 0 0 10px;
  padding: 5px 0 5px 20px;
}

生成コードを使わずにスタイルシートを直接変更する

 既存のスタイルシートを変更して色を変える場合は以下の画像アドレス部分を変更してください。

#main_contents h2.entry_header,
#main_contents h2.sub_header {
  margin: 0 0 15px;
  padding: 5px 0 5px 35px;
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 20px 5px; /* 記事タイトル前のアイコン */
}

#main_contents h3.sub_header,#main_contents h3.plg_header {
  margin: -15px 0 20px;
  padding: 10px 20px 10px 35px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 15px 10px; /* メインカラムのプラグインタイトル前のアイコン */
  border-bottom: 1px dotted #B5B5B6;
}

#main_contents h4.sub_title {
  padding: 3px 0 3px 15px;
  margin-bottom: 20px;
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat left 2px; /* コメント・TB見出し前のアイコン */
}

#sidemenu h3 {
  margin: -10px -10px 0;
  padding: 10px 10px 10px 25px;
  background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 10px 10px; /* サイドメニュー(プラグイン)のタイトルの背景色、アイコン */
  border-top: 1px dotted #B5B5B6;
  border-bottom: 1px dotted #B5B5B6;
}

タイトル文字色の変更

 記事タイトルの文字色を変更する時は以下のコードをスタイルシートに追加してください。「000000」の部分で色を指定します。

#main .entry_header, #main #main_contents h2 a {color: #000000;} /* 記事タイトル */

 その他の見出しは追加したコードにある「}」の直前に「color: #000000;」などを加えると文字色が変わります。既存のスタイルシートを変更した場合はそちらの「}」の直前に追加してください。

#container #sidemenu h3 { /* サイドメニュープラグインタイトル */
  background-image: url(http://blog-imgs-65.fc2.com/f/c/2/fc2blogtemplates/content_title_blue2.png);
  color: #000000;
}

 正常に反映されない時は「;」の直前に「 !important」をつけてください。

color: #000000 !important;

関連記事
スポンサー リンク
コメント
#270 : No title
may様、こんばんわ。

記事タイトルではなく、ブログタイトル横のアイコンの色を変更することはできますか?

ブログタイトルの左側にも縦2本のアイコンがあると思いますが、こちらの色を変更したいと考えてます。

お手隙のときにでも、カスタマイズ方法を教えてください。

では。

だい
#272 : Re270: ブログタイトル左アイコン
コンバンハ。
色違いの画像を用意してスタイルシートにあるブログタイトル前のアイコンのアドレスと差し替えると変更できます。
内容的にはこのカスタマイズと同じことなので必要ないかと思いましたが、URLリンク先に記事を投稿いたしましたのでご参考くださいませ。
#340 : ありがとうございました
複数の記事を参考にさせてもらいました。
初心者でも分かりやすい記事で、大変助かりました。
おかげさまで、ブログの体裁がとても良くなりました(*^▽^*)
ありがとうございました。
#354 : 関連記事横のアイコンの外し方
2年前の記事に質問するのもどうかと思ったのですが、自分で試行錯誤してもまったく分からなかったので質問します。
basic whiteに元々FC2に備わっている関連記事リストを表示させると、関連記事タイトルの左側に出現するアイコンの外し方が分かりません。
もし分かるのでしたら、教えてくださると助かります。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered