プラグイン識別番号を確認、プラグインごとのタイトル画像変更 : FC2ブログ

プラグイン識別番号を確認、プラグインごとのタイトル画像変更

2010-03-09 火 06:45
FC2ブログ

[1] テンプレートのHTMLを編集

　プラグインタイトルの画像や背景色を各プラグインごとに変更する際は <%plugin_first_title> を挟む <h3> <div> <dt> などの要素に id="プラグイン識別番号" を割り当てます。

　プラグイン1 … id="plg<%plugin_first_no>"
　プラグイン2 … id="plg<%plugin_second_no>"
　プラグイン 3… id="plg<%plugin_third_no>"

変更例

 <h3 class="plg-title" id="plg<%plugin_first_no>"><%plugin_first_title></h3>  <h3 class="plg-title" id="plg<%plugin_second_no>"><%plugin_second_title></h3>  <h3 class="plg-title" id="plg<%plugin_third_no>"><%plugin_third_title></h3>

[2] プラグインごとの識別番号の確認

　idをつけた後に、テンプレートのプレビューをクリックして、プレビューしたページのソースを確認すれば id="plg554050" のように番号を確認することができます。

　確認方法がよくわからない場合は以下のブックマークレットを利用します。下記リンクを（右）クリックして、リンクをお気に入り（ブックマーク）に追加します。Chromeはメニューからブックマークバーを表示させ、リンクをドラッグします。

ブックマーク : FC2PlgNo

　次にPC用のプラグイン管理ページを開いて、お気に入りに追加した上記リンクをクリックするとプラグイン識別番号がスタイルシートの形式で出力されます。

/* -------- Plugin1 -------- */
#plg識別番号 { /*最新記事*/

}
#plg識別番号 { /*最新コメント*/

}
/* -------- Plugin2 -------- */
#plg識別番号 { /*プロフィール*/

}
#plg識別番号 { /*リンク*/

}

　識別番号には数値が入ります。変更したいプラグイン部分（#plg識別番号 {～}）のみをコピーして、スタイルシートに貼り付けます。

[3] テンプレートのスタイルシートに追加

　それぞれのプラグインごとに background などを使って背景画像を指定します。

#plg識別番号 { /*最新記事*/
 background: url(ファイルアドレス1) left top no-repeat !important;
}
#plg識別番号 { /*最新コメント*/
 background: url(ファイルアドレス2) left top no-repeat !important;
}

　上記のようにすれば、最新記事のプラグインタイトルにはアドレス1の背景画像が表示され、最新コメントのプラグインタイトルにはアドレス2の背景画像が表示されます。

　背景画像を繰り返す場合は no-repeat を repeat に変更。

　画像を使わずに背景色のみを変更する場合は次のようにします。

background: #000000 !important;

　文字色も変更する場合は次のようなコードを { } 内に追加します（色は#部分で変更）。

color: #ff0000 !important;

関連記事

2 Hatena tweet Top

comment
まる 2013-03-04 13:13 No.1861 #-URL
こんにちは。FC2ブログをやっている者です。カスタマイズでわからない事があるとこちらのサイトにいつもお世話になっております。

今回、こちらの記事を参考にプラグインごとに背景画像を用意し表示させる事を試みているのですが、質問があります。
一応上記の説明のとおりにひととおりやっててみたところ、指定した背景画像はうまく表示されるのですが、元々設定していたプラグインタイトルの文字が表示されてしまい、うまくいきません。（2重表示みたいになっています。）

どのようにしたら、文字のほうを表示しないようにできるのでしょうか？
お手数ですが、教えていただければありがたく存じます。
まる 2013-03-05 17:28 No.1863 #-URL
すみません、上記の質問に対する回答ですが、（...blog-entry-531.html）の記事に明記されていた事に気づきました。
おかげさまで自己解決しました。

ありがとうございます。