fc2blogプラグインのタイトルをCSSでカスタムする設定方法

プラグインカテゴリ1~3を一括で設定したり、プラグインカテゴリ別にタイトルをCSSでカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. プラグインタイトルをカスタムします。画像内で赤色の波線で示している部分です。

  2. HTML編集はありません。CSS編集のみです。

  3. CSS編集のキャプチャー画像はvalid-seo-3c ver.1.2.0を用いていますが、他の上記テンプレートでも編集する部分は同様です。

121129plugin-title-2.png

テンプレートのCSSを編集

プラグインタイトルすべてを一括でカスタム

  1. 次のコードを探します。下図で反転している部分です。そこにプロパティや値を追加したり、削除します。

    .plugins dt
    121129plugin-title-1.png
  2. たとえば、背景色を黄色に変更する場合は次のコードを追加します。下図で反転している部分が追加されたコードです。

    background:yellow;
    121129plugin-title-3.png
  3. プレビュー画像です。

    121129plugin-title-4.png

プラグインカテゴリごとにカスタム

  1. プラグインカテゴリ2のプラグインタイトルの背景色を黄緑にする場合で例示します。上記 .plugins dtに次のコードを追加します。下図で反転している部分が追加後です。

    .plugin-second dt{background:yellowgreen;}
    121129plugin-title-5.png
  2. プレビュー画像です。

    121129plugin-title-6.png
  3. プラグインカテゴリ1~3をそれぞれ個別に設定する場合のセレクタは次のとおりです。

    プラグインカテゴリ1.plugin-first dt
    プラグインカテゴリ2.plugin-second dt
    プラグインカテゴリ3.plugin-third dt

今後のテンプレート改訂時には

  1. テンプレートを改訂すると上記内容に相違が生じているかもしれません。その際はご容赦願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)