---

プラグインの多くは次のような構造になっています。要素や赤字部分はテンプレートによって異なります。クラス名などは主に公式テンプレートで使われているものです（アンダーバーはハイフンに変更）。ここではプラグイン1（plugin_first）を例にあげます。

<!--plugin_first-->
<h3 class="plg-title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<div class="plg-body" style="text-align:<%plugin_first_align>">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

3つのうちどれか一つの方法を選択します。

無難
　→FC2変数『プラグイン識別番号』を使った方法

（複数のフリーエリア共有プラグインなど）同じオリジナルタイトルのプラグインを使っていない
　→FC2変数『プラグイン識別タグ』を使った方法

プラグイン説明文を使っていない、使わないようにする
　→FC2変数『プラグイン説明文識別』を使った方法

---

（仮推奨）3つとも面倒だからCSS3で
　→CSS3を使った方法

---

▼オリジナルタイトル・識別タグ一覧

▼プラグインタイトル文字が書かれた画像、タイトルテキストの非表示

FC2変数『プラグイン識別番号』を使った方法

特に制限なく変更できます。

■タイトルの画像や背景色を各プラグインごとに変更する際は <%plugin_first_title> を挟む <h3> <div> <dt> などのIDにプラグイン固有の識別番号を出力させます。

プラグイン1の場合は id="pt<%plugin_first_no>" をつけます。プラグイン2は id="pt<%plugin_second_no>" 、プラグイン3は id="pt<%plugin_third_no>" をつけます。

■内容（コンテンツ）のデザインを各プラグインごとに変更する際は <%plugin_first_content> を挟む <div> <dd> などのIDにプラグイン固有の識別番号を出力させます。

プラグイン1の場合は id="pc<%plugin_first_no> をつけます。プラグイン2は id="pc<%plugin_second_no>" 、プラグイン3は id="pc<%plugin_third_no>" をつけます。

変更例

<!--plugin_first-->
<h3 class="plg-title" id="pt<%plugin_first_no>" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<div class="plg-body" id="pc<%plugin_first_no>" style="text-align:<%plugin_first_align>">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

内容のデザインを変更する必要のないときは id="pc<%plugin_first_no>" は不要です。

IDをつけ終わったら、テンプレートのプレビューをクリックして、プレビューしたページのソースを確認します。

■ソースの確認方法

プレビューしたページ内で右クリック、「（ページの）ソースを表示」。あるいは、ブラウザのメニューバー「表示」をクリック、「（ページの）ソース」で確認できます。

各プラグインが表示されている箇所を探し、 pt または pc の後に出力されている数値をコピーします（デザインを変更したいプラグインの数値をすべて控えます）。

（例）最新記事→554050、最新コメント→554051、月別アーカイブ→554052など

ソース表示
<h3 class="plg-title" id="pt554050" style="text-align:left">最新の記事</h3>
<div class="plg-body" id="pc554050" style="text-align:left">
  <p style="text-align:left">説明文</p>
  <ul>
   <li>エントリ3</li>
   <li>エントリ2</li>
   <li>エントリ1</li>
  </ul>
</div>

次にスタイルシートの編集で各プラグインごとのスタイルを追加します。スタイルの優先順位がテンプレートによって変わるので、ここでは値の後に (半角スペース)!important をつけています。優先順位を把握しているときはつける必要はありません。

タイトルのセレクタは #pt識別番号。内容は #pc識別番号 になります（内容のデザインを変更する必要のないときは不要）。

スタイルの指定例

#pt554050 {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
#pc554050 {   /* 最新記事 内容のスタイル */
 border: 1px #000000 solid !important;
}
#pt554051 {   /* 最新コメント タイトルのスタイル */
 color: #000000 !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st02.gif) !important;
}
#pt554052 {   /* 月別アーカイブ タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st03.gif) !important;
}

上記のスタイルを追加すると、最新記事のタイトル画像は st01.gif 、文字色は 白 。最新コメントのタイトル画像は st02.gif 、文字色は 黒 。月別アーカイブのタイトル画像は st03.gif 、文字色は 白 。最新記事の内容を囲む枠線は 1px 黒 になります。

他のスタイルを指定する際にも必要であれば !important をつけます。

#pt554050 {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
 text-align: center !important; /* 追加 */
}

複数のプラグインを同じデザインにするときはスタイルシートのセレクタを以下のように変更します（カンマ+#pt識別番号 の追加）。

スタイルの指定例

#pt554050,
#pt554051 {   /* 最新記事とコメントタイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}

上記の指定をすると最新記事とコメントタイトルが同じデザインになります。

以上で主な説明は終了です。

---

プラグイン2での指定例

<!--plugin_second-->
<h3 class="plg-title" id="pt<%plugin_second_no>"><%plugin_second_title></h3>
<div class="plg-body" id="pc<%plugin_second_no>">
  <!--plugin_second_description-->
  <p><%plugin_second_description></p>
  <!--/plugin_second_description-->
  <%plugin_second_content>
  <!--plugin_second_description2-->
  <p><%plugin_second_description2></p>
  <!--/plugin_second_description2-->
</div>
<!--/plugin_second-->

プラグイン3での指定例

<!--plugin_third-->
<h3 class="plg-title" id="pt<%plugin_third_no>"><%plugin_third_title></h3>
<div class="plg-body" id="pc<%plugin_third_no>">
  <!--plugin_third_description-->
  <p><%plugin_third_description></p>
  <!--/plugin_third_description-->
  <%plugin_third_content>
  <!--plugin_third_description2-->
  <p><%plugin_third_description2></p>
  <!--/plugin_third_description2-->
</div>
<!--/plugin_third-->

プラグインがdl要素でマークアップされているテンプレートの指定例

タイトルと内容を包む要素（dl、divなど）がある場合、識別番号を一つにすることができます。包んでいる要素にIDを追加します。もちろん、タイトルを class="plg-title" id="pt<%plugin_first_tag>" 内容を class="plg-body" id="pc<%plugin_first_tag>" などとしても構いません。

<!--plugin_first-->
<dl class="sidemenu" id="pt<%plugin_first_no>">
  <dt class="plg-title"><%plugin_first_title></dt>
  <dd class="plg-body">
  <!--plugin_first_description-->
  <%plugin_first_description>
  <!--/plugin_first_description-->
   %plugin_first_content>
  <!--plugin_first_description2-->
  <%plugin_first_description2>
  <!--/plugin_first_description2-->
  </dd>
</dl>
<!--/plugin_first-->

スタイルシートは以下のようにします。

#pt554050 .plg-title {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
#pt554050 .plg-body {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

ただし、dt dd にクラス名がない場合は、識別番号をタイトルと内容のクラスにそれぞれ追加。あるいは dt dd に新たなクラス名を加えます。

次のように指定してしまうと、dl要素内にあるすべてのdt、ddのスタイルに反映されてしまいます。例えば、dd要素の中にdl要素（dt、dd）がある場合などはデザインが崩れる恐れがあります。包んでいる要素がdivのときも同様です。

#pt554050 dt {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
}
#pt554050 dd {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

• ▼識別番号　▼識別タグ　▼説明文識別　▼タイトルテキスト非表示　▼識別タグ一覧　▲

FC2変数『プラグイン識別タグ』を使った方法

同じプラグインが複数あるとそれぞれを識別できません。例えば、オリジナルタイトルが「最新記事」のプラグインを複数使っている場合やフリーエリア・共有プラグインを複数使っているときは、この方法は使えません。デザイン変更するプラグインを限定できる環境であれば問題ありません。

手順1

■タイトルの画像や背景色を各プラグインごとに変更する際は <%plugin_first_title> を挟む <h3> <div> <dt> などのクラス名にプラグイン固有の識別タグを出力させます。

プラグイン1の場合はクラス名に pt<%plugin_first_tag> をつけます。プラグイン2は pt<%plugin_second_tag> 、プラグイン3は pt<%plugin_third_tag> をつけます。

既に何らかのクラス名がつけられているときは (半角スペース)pt<%plugin_first_tag> などを加えます。

■内容（コンテンツ）のデザインを各プラグインごとに変更する際は <%plugin_first_content> を挟む <div> <dd> などのクラス名にプラグイン固有の識別タグを出力させます。

プラグイン1の場合はクラス名に pc<%plugin_first_tag> をつけます。プラグイン2は pc<%plugin_second_tag> 、プラグイン3は pc<%plugin_third_tag> をつけます。

既に何らかのクラス名がつけられているときは (半角スペース)pc<%plugin_first_tag> などを加えます。

変更例

<!--plugin_first-->
<h3 class="plg-title pt<%plugin_first_tag>" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<div class="plg-body pc<%plugin_first_tag>" style="text-align:<%plugin_first_align>">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

クラス名がないときは class="pt<%plugin_first_tag>" とします。内容のデザインを変更する必要のないときは pc<%plugin_first_tag> は不要です。

手順2

次に各プラグインのオリジナルタイトルを確認します。

管理画面の[プラグインの設定]から各プラグインのオリジナルタイトルを確認します。設定の[詳細]をクリックします。[タイトル]の次の項目に[オリジナルタイトル]があります。

各オリジナルタイトルによって <%plugin_hoge_tag> で出力される識別タグが異なります。「---」は何も出力されません。

プラグイン名 オリジナルタイトル	プラグイン識別タグ <%plugin_hoge_tag>
フリーエリア	freearea
共有プラグイン	user
最新記事	entry
最新コメント	comment
最新トラックバック	trackback
カレンダー	calendar
月別アーカイブ	archive
カテゴリ	category
カテゴリ（カスタマイズ向け）	advcategory
リンク	link
ユーザータグ	tag
プロフィール	profile
検索フォーム	form
RSSリンクの表示	rss
全記事表示リンク	all
Powered By FC2ブログ	powered
ＱＲコード	qrcode
アクセスランキング	---
ブロマガ購読者数	---
ブロマガ購読者向けメールフォーム	---
ブロとも申請フォーム	---
ブロとも一覧	---
天気予報	weather
Amazon商品一覧【新着順】	newamazon
Amazon商品一覧【カテゴリ別】	catamazon
Amazon人気商品	selleramazon
FC2ニュース	fc2news
FC2ブックマーク	bookmark
FC2ブログランキング	blogranking
FC2チャット	fc2chat
FC2カウンター	fc2counter
FC2ブログジャンキー	bjfc2
FC2投票	vote
FC2拍手記事別ランキング	---
FC2情報商材+動画	---

オリジナルタイトルはテンプレートのプレビューでも確認できます。

■ソースでの確認方法

プレビューしたページ内で右クリック、「（ページの）ソースを表示」。あるいは、ブラウザのメニューバー「表示」をクリック、「（ページの）ソース」で確認できます。
※手順1でテンプレートに識別タグを加えていないと出力されません。

各プラグインが表示されている箇所を探し、 pt または pc の後に出力されているタグ名をコピーします（デザインを変更したいプラグインのタグ名をすべて控えます）。

（例）最新記事→entry、最新コメント→comment、月別アーカイブ→archiveなど

ソース表示
<h3 class="plg-title ptentry" style="text-align:left">最新記事</h3>
<div class="plg-body pcentry" style="text-align:left">
  <p style="text-align:left">説明文</p>
  <ul>
  <li>エントリ3</li>
  <li>エントリ2</li>
  <li>エントリ1</li>
  </ul>
</div>

手順3

オリジナルタイトルを確認後、スタイルシートの編集で各プラグインごとのスタイルを追加します。スタイルの優先順位がテンプレートによって変わるので、ここでは値の後に (半角スペース)!important をつけています。優先順位を把握しているときはつける必要はありません。

タイトルのクラス名は pt識別タグ名。内容のクラス名は pc識別タグ名になります（内容のデザインを変更する必要のないときは不要です）。

スタイルの指定例

.ptentry {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
.pcetnry {   /* 最新記事 内容のスタイル */
 border: 1px #0000ff solid !important;
}
.ptcomment {   /* 最新コメント タイトルのスタイル */
 color: #000000 !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st02.gif) !important;
}
.ptarchive {   /* 月別アーカイブ タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st03.gif) !important;
}

上記のスタイルを追加すると、最新の記事のタイトル画像は st01.gif 、文字色は 白 。最新のコメントのタイトル画像は st02.gif 、文字色は 黒 。月別アーカイブのタイトル画像は st03.gif 、文字色は 白 。最新の記事の内容を囲む枠線は 1px 黒 になります。

他のスタイルを指定する際にも必要であれば !important をつけます。

.ptentry {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
 text-align: center !important; /* 追加 */
}

複数のプラグインを同じデザインにするときはスタイルシートのセレクタを以下のように変更します（カンマ+pt識別タグ の追加）。

スタイルの指定例

.ptentry,
.ptcomment {   /* 最新記事とコメントタイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}

上記の指定をすると最新記事とコメントタイトルが同じデザインになります。

注意事項

同じオリジナルタイトルのプラグインが複数ある場合は同じデザインになります。これを回避するには、まだ使われていないオリジナルタイトルをもつ他の公式プラグインをダウンロードして、プラグイン内のHTMLをコピーする必要があります。あるいは、別の方法（プラグイン識別番号やプラグイン説明文識別）によって、各プラグインのデザインを変更します。

（回避例）

• オリジナルタイトルが[フリーエリア]のプラグインが3つある
• まだ使われていないプラグインに「全記事表示リンク」「Powered By FC2ブログ」がある

1. 「全記事表示リンク」「Powered By FC2ブログ」プラグインをそれぞれダウンロード
2. フリーエリアのうち２つのプラグインのHTMLをダウンロードした「全記事表示リンク」「Powered By FC2ブログ」プラグインのHTMLにそれぞれコピー（元からあったHTMLは削除）
3. スタイルシートでスタイルを指定

.ptfreearea {   /* フリーエリア（コピーしていないもの）タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
.pball {   /* 全記事表示リンク に入れられたフリーエリアのスタイル */
 color: #000000 !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st02.gif) !important;
}
.ptpowered {   /* Powered By FC2ブログ に入れられたフリーエリアのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st03.gif) !important;
}

以上で主な説明は終了です。

---

プラグイン2での指定例

<!--plugin_second-->
<h3 class="plg-title pt<%plugin_second_tag>"><%plugin_second_title></h3>
<div class="plg-body pc<%plugin_second_tag>">
  <!--plugin_second_description-->
  <p><%plugin_second_description></p>
  <!--/plugin_second_description-->
  <%plugin_second_content>
  <!--plugin_second_description2-->
  <p><%plugin_second_description2></p>
  <!--/plugin_second_description2-->
</div>
<!--/plugin_second-->

プラグイン3での指定例

<!--plugin_third-->
<h3 class="plg-title pt<%plugin_third_tag>"><%plugin_third_title></h3>
<div class="plg-body pc<%plugin_third_tag>">
  <!--plugin_third_description-->
  <p><%plugin_third_description></p>
  <!--/plugin_third_description-->
  <%plugin_third_content>
  <!--plugin_third_description2-->
  <p><%plugin_third_description2></p>
  <!--/plugin_third_description2-->
</div>
<!--/plugin_third-->

プラグインがdl要素でマークアップされているテンプレートの指定例

タイトルと内容を包む要素（dl、divなど）がある場合、識別番号は一つにすることができます。包んでいる要素のクラス名にのみ追加します。もちろん、class="plg-title pt<%plugin_first_tag>" class="plg-body pc<%plugin_first_tag>" などとしても構いません。

<!--plugin_first-->
<dl class="sidemenu pt<%plugin_first_tag>">
  <dt class="plg-title"><%plugin_first_title></dt>
  <dd class="plg-body">
  <!--plugin_first_description-->
  <%plugin_first_description>
  <!--/plugin_first_description-->
   %plugin_first_content>
  <!--plugin_first_description2-->
  <%plugin_first_description2>
  <!--/plugin_first_description2-->
  </dd>
</dl>
<!--/plugin_first-->

スタイルシートは以下のようにします。

.ptentry .plg-title {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
.ptentry .plg-body {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

ただし、dt dd にクラス名がない場合は、識別タグをタイトルと内容のクラスにそれぞれ追加。あるいは dt dd に新たなクラス名を追加します。

次のように指定してしまうと、dl要素内にあるすべてのdt、ddのスタイルに反映されてしまいます。例えば、dd要素の中にdl要素（dt、dd）がある場合などはデザインが崩れる恐れがあります。包んでいる要素がdivのときも同様です。

.ptentry dt {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
}
.ptentry dd {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

• ▼識別番号　▼識別タグ　▼説明文識別　▼タイトルテキスト非表示　▼識別タグ一覧　▲

FC2変数『プラグイン説明文識別』を使った方法

すべてのプラグインで説明文（上部下部両方）を使っていると変更が面倒かもしれませんが、必要なプラグインにだけ任意のクラス名を指定できます。IDを使わないので複数のプラグインで同じクラス名を使い回せます。

ただし、プラグインの説明文（上部または下部）をテンプレートから削除し、すべてのプラグインにある既存の説明文（上部または下部）をプラグインHTML編集エリアに移動させる必要があります。

（例）プラグイン最新コメント

←ここに説明文（上部）を直接書く
<ul>
  <!--rcomment-->
  <li &align>
   <a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
  </li>
  <!--/rcomment-->
</ul>
←ここに説明文（下部）を直接書く

標準のリンクプラグインでは下部の説明文が使われているため、ここでは説明文（上部）を使って各プラグインのデザインを変更します。

手順1

変更場所 ▼ プラグインの設定-詳細

各プラグインの説明文（上部）に書かれたテキストをプラグインのHTML編集エリアに移動させます。説明文（下部）を移動させる必要はありません。また、上部にテキストがなければ、特に変更の必要はありません。

手順2

変更場所 ▼ HTMLの編集-検索ワード「plugin_first」

■タイトルの画像や背景色を各プラグインごとに変更する際は <%plugin_first_title> を挟む <h3> <div> <dt> などにプラグイン説明(上部)を含むclass属性を出力させます。

プラグイン1はタイトルの要素に次のコードを追加します。

<!--plugin_first_description--> class="<%plugin_first_description>"<!--/plugin_first_description-->

既に何らかのクラス名（hoge）がつけられているときは、クラス内に次（赤字）のコードを加えます。

class="hoge<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"

プラグイン2の場合はすべての first を second に変更。プラグイン3は third に変更します。

■内容（コンテンツ）のデザインを各プラグインごとに変更する際は <%plugin_first_content> を挟む <div> <dd> などにプラグイン説明(上部)を含むclass属性を出力させます。「c」はタイトルと区別するためにつけます。

プラグイン1は内容の要素に次のコードを追加します。

<!--plugin_first_description--> class="c<%plugin_first_description>"<!--/plugin_first_description-->

既に何らかのクラス名がつけられているときは、クラス内に次のコードを加えます。

class="hoge<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->"

プラグイン2の場合はすべての first を second に変更。プラグイン3は third に変更します。

（実際の変更例）

■変更前のHTML

<!--plugin_first-->
<h3 class="plg-title"><%plugin_first_title></h3>
<div class="plg-body">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

変更後のHTML1か2どちらかを選択

■変更後のHTML1
説明文（上部）のコード <%plugin_first_description> 関連を削除します。<!--plugin_first_description--> が元からない場合もあります。その場合は <%plugin_first_description> とそれを直接挟んでいる要素（上記のHTMLでは<p>）も含めて削除します。そして、赤字部分を追加します。説明文（下部）を削除する必要はありません。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

■変更後のHTML2
あとで元の形式に戻したいときは <%plugin_first_description> 関連を削除せず、コメントアウトして、説明文（上部）のコードを残します。<!-- --> の追加。元に戻すときは追加した <!-- --> を削除します。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <!--plugin_first_description-->
  <!--<p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>-->
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

内容のデザインを変更する必要のないときは plg-body の後のコードは不要です。

タイトルの要素にクラス名がないときは次のようにします。

<h3<!--plugin_first_description--> class="<%plugin_first_description>"<!--/plugin_first_description-->>

手順3

変更場所 ▼ プラグインの設定-詳細

変更したいプラグインの説明文（上部）に任意のクラス名を入れます。ここでは「最新記事」に『plgEntry』を入れることとします。同様に、他の変更したいプラグインの説明文（上部）にも任意のクラス名を入れます。

複数のプラグインを同じデザインにするときは、同じクラス名をそれぞれに入れます。

手順4

クラス名をつけ終わったら、スタイルシートの編集で各プラグインごとのスタイルを追加します。スタイルの優先順位がテンプレートによって変わるので、ここでは値の後に (半角スペース)!important をつけています。優先順位を把握しているときはつける必要はありません。

タイトルのクラス名は プラグイン説明（上部）。内容のクラス名は c+プラグイン説明（上部）になります（内容のデザインを変更する必要のないときは不要）。

スタイルの指定例

.plgEntry {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
.cplgEntry {   /* 最新記事 内容のスタイル */
 border: 1px #000000 solid !important;
}
.plgComment {   /* 最新コメント タイトルのスタイル */
 color: #000000 !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st02.gif) !important;
}
.plgArchive {   /* 月別アーカイブ タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st03.gif) !important;
}

上記のスタイルを追加すると、最新記事のタイトル画像は st01.gif 、文字色は 白 。最新コメントのタイトル画像は st02.gif 、文字色は 黒 。月別アーカイブのタイトル画像は st03.gif 、文字色は 白 。最新記事の内容を囲む枠線は 1px 黒 になります。

他のスタイルを指定する際にも必要であれば !important をつけます。

.plgEntry {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
 text-align: center !important; /* 追加 */
}

複数のプラグインを同じデザインにするときはスタイルシートのセレクタを以下のように変更します（カンマ+pt識別番号 の追加）。

スタイルの指定例

.plgEntry,
.plgComment {   /* 最新記事とコメントタイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}

上記の指定をすると最新記事とコメントタイトルが同じデザインになります。

以上で主な説明は終了です。

---

プラグイン2での指定例

<!--plugin_second-->
<h3 class="plg-title<!--plugin_second_description--> <%plugin_second_description><!--/plugin_second_description--></h3>
<div class="plg-body<!--plugin_second_description--> c<%plugin_second_description><!--/plugin_second_description-->">
  <%plugin_second_content>
  <!--plugin_second_description2-->
  <p><%plugin_second_description2></p>
  <!--/plugin_second_description2-->
</div>
<!--/plugin_second-->

プラグイン3での指定例

<!--plugin_third-->
<h3 class="plg-title<!--plugin_third_description--> <%plugin_third_description><!--/plugin_third_description-->"><%plugin_third_title></h3>
<div class="plg-body<!--plugin_third_description--> c<%plugin_third_description><!--/plugin_third_description-->">
  <%plugin_third_content>
  <!--plugin_third_description2-->
  <p><%plugin_third_description2></p>
  <!--/plugin_third_description2-->
</div>
<!--/plugin_third-->

プラグインがdl要素でマークアップされているテンプレートの指定例

タイトルと内容を包む要素（dl、divなど）がある場合、説明文を一つにすることができます。包んでいる要素のクラス名にのみ追加します。もちろん、タイトルと内容を個別に指定しても構いません。

<!--plugin_first-->
<dl class="sidemenu<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title>">
  <dt class="plg-title"><%plugin_first_title></dt>
  <dd class="plg-body">
   <%plugin_first_content>
   <!--plugin_first_description2-->
   <%plugin_first_description2>
   <!--/plugin_first_description2-->
  </dd>
</dl>
<!--/plugin_first-->

スタイルシートは以下のようにします。

.plgEntry .plg-title {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
.plgEntry .plg-body {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

ただし、dt dd にクラス名がない場合は、説明文をタイトルと内容のクラスにそれぞれ追加した方がよいでしょう。あるいは dt dd に新たなクラス名を追加します。

次のように指定してしまうと、dl要素内にあるすべてのdt、ddのスタイルに反映されてしまいます。例えば、dd要素の中にdl要素（dt、dd）がある場合などはデザインが崩れる恐れがあります。包んでいる要素がdivのときも同様です。

.plgEntry dt {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
}
.plgEntry dd {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

内容のクラス名「c」について

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

スタイルシートでそれぞれの要素名をつければ、「c」を削除することができます。

dt.plgEntry {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
 background-image: url(http://blog-imgs.fc2.com/paroday/st01.gif) !important;
}
dd.plgEntry {   /* 最新記事 内容のスタイル */
 color: #000000 !important;
}

しかし、両方とも同じ要素でマークアップされているテンプレートの場合は「c」が必要です。

<!--plugin_first-->
<div class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></div>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

クラスの同時指定もできますが、IE6がそれに対応していません。

テンプレートから説明文を削除するとデザインが崩れる場合

説明文のテキストがない場合も想定しているはずなので、ほとんどないと思いますが、変更後のHTMLを次のものに変更してください。

■変更後のHTML3
<%plugin_first_description> 関連を削除せず、説明文のテキストのみをコメントアウトします。<!-- --> の追加。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><!--<%plugin_first_description>--></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

スペースなど何らかの文字が <%plugin_first_description> 前後にある場合は次のようにします。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description--> <%plugin_first_description><!--/plugin_first_description-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description--> c<%plugin_first_description><!--/plugin_first_description-->">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>">あ<!--<%plugin_first_description>--></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

<%plugin_first_description> 直前直後に<!-- --> を追加します。

プラグイン説明文（下部）をクラス名に使う

要素に追加するコードは <%plugin_hoge_description2> になります。「2」を足します。

■変更後のHTML1
説明文（下部）のコード <%plugin_first_description2> 関連を削除します。そして、赤字部分を追加します。説明文（上部）を削除する必要はありません。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description2--> <%plugin_first_description2><!--/plugin_first_description2-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description2--> c<%plugin_first_description2><!--/plugin_first_description2-->">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
</div>
<!--/plugin_first-->

■変更後のHTML2
あとで元の形式に戻したいときは <%plugin_first_description2> 関連を削除せず、コメントアウトして、説明文（下部）のコードを残します。<!-- --> の追加。

<!--plugin_first-->
<h3 class="plg-title<!--plugin_first_description2--> <%plugin_first_description2><!--/plugin_first_description2-->"><%plugin_first_title></h3>
<div class="plg-body<!--plugin_first_description2--> c<%plugin_first_description2><!--/plugin_first_description2-->">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <!--<p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>-->
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

変更場所 ▼ プラグインの設定-詳細

変更したいプラグインの説明文（下部）に任意のクラス名を入れます。

• ▼識別番号　▼識別タグ　▼説明文識別　▼タイトルテキスト非表示　▼識別タグ一覧　▲

CSS3を使った方法

容易です。対応していないブラウザでは適用されません。将来的にはこちらで事足ります。どのブラウザでも絶対に表示する必要がないのであれば、推奨します。どういうわけか最新鋭のブラウザ『IE8』は対応していません。

（例1）3つのプラグインのデザインをそれぞれ変更する

プラグインが次のように出力されたとします。

<div id="sidebar">    <!--親要素-->
 <h3 class="sideTitle">最新記事</h3>    <!--1番目の子要素-->
 <div class="sideBody">    <!--2番目の子要素-->
  <ul>
   <li>銀河鉄道の夜 (03/01)</li>
   <li>風の又三郎 (01/06)</li>
   <li>ヰタ・セクスアリス (01/05)</li>
  </ul>
 </div>
 <h3 class="sideTitle">プロフィール</h3>    <!--3番目の子要素-->
 <div class="sideBody">    <!--4番目の子要素-->
  <p>Author:paroday</p>
 </div>
 <h3 class="sideTitle">カテゴリ</h3>    <!--5番目の子要素-->
 <div class="sideBody">    <!--6番目の子要素-->
  <ul>
   <li>小説 (9)</li>
   <li>宮沢賢治 (4)</li>
   <li>森鴎外 (2)</li>
  </ul>
 </div>
</div>

スタイルはプラグイン部分を囲う親要素 <div id="sidebar"> から順番に数えて指定します。1番目は最新記事タイトル、2番目は最新記事内容、3番目はプロフィール…。

.sideTitle:nth-child(1){   /* 最新記事 タイトルのスタイル */
  color: #f00 !important;
}
.sideTitle:nth-child(3){   /* プロフィール タイトルのスタイル */
  color: #0f0 !important;
}
.sideTitle:nth-child(5){   /* カテゴリ タイトルのスタイル */
  color: #00f !important;
}
.sideBody:nth-child(2){   /* 最新記事 内容のスタイル */
  font-size: 11px !important;
}
.sideBody:nth-child(4){   /* プロフィール 内容のスタイル */
  font-size: 13px !important;
}
.sideBody:nth-child(6){   /* カテゴリ 内容のスタイル */
  font-size: 15px !important;
}

上記のスタイルを追加すると、最新記事タイトルの文字色は赤、プロフィールは緑、カテゴリは青になり、最新記事内容の文字サイズは11px、プロフィールは13px、カテゴリは15pxになります。

---

（例2）プラグインが次のように出力されたとします。

<div id="sidebar">    <!--親要素-->
 <dl>    <!--1番目の子要素-->
  <dt class="sideTitle">最新記事</dt>
  <dd class="sideBody">
   <ul>
    <li>銀河鉄道の夜 (03/01)</li>
    <li>風の又三郎 (01/06)</li>
    <li>ヰタ・セクスアリス (01/05)</li>
   </ul>
  </dd>
 </dl>
 <dl>    <!--2番目の子要素-->
  <dt class="sideTitle">プロフィール</dt>
  <dd class="sideBody">
   <p>Author:paroday</p>
  </dd>
 </dl>
 <dl>    <!--3番目の子要素-->
  <dt class="sideTitle">カテゴリ</dt>
  <dd class="sideBody">
   <ul>
    <li>小説 (9)</li>
    <li>宮沢賢治 (4)</li>
    <li>森鴎外 (2)</li>
   </ul>
  </dd>
 </dl>
</div>

スタイルはプラグイン部分を囲う親要素 <div id="sidebar"> から順番に数えて指定します。1番目は最新記事、2番目はプロフィール、3番目はカテゴリ。

#sidebar dl:nth-child(1) .sideTitle{   /* 最新記事 タイトルのスタイル */
  color: #f00 !important;
}
#sidebar dl:nth-child(2) .sideTitle{   /* プロフィール タイトルのスタイル */
  color: #0f0 !important;
}
#sidebar dl:nth-child(3) .sideTitle{   /* カテゴリ タイトルのスタイル */
  color: #00f !important;
}
#sidebar dl:nth-child(1) .sideBody{   /* 最新記事 内容のスタイル */
  font-size: 11px !important;
}
#sidebar dl:nth-child(2) .sideBody{   /* プロフィール 内容のスタイル */
  font-size: 13px !important;
}
#sidebar dl:nth-child(3) .sideBody{   /* カテゴリ 内容のスタイル */
  font-size: 15px !important;
}

---

（例3）プラグインが次のように出力されたとします。

<div id="sidebar">    <!--親要素-->
 <div class="sideContent">    <!--1番目の子要素-->
  <h3 class="sideTitle">最新記事</h3>
  <div class="sideBody">
   <ul>
    <li>銀河鉄道の夜 (03/01)</li>
    <li>風の又三郎 (01/06)</li>
    <li>ヰタ・セクスアリス (01/05)</li>
   </ul>
  </div>
 </div>
 <div class="sideContent">    <!--2番目の子要素-->
  <h3 class="sideTitle">プロフィール</h3>
  <div class="sideBody">
   <p>Author:paroday</p>
  </div>
 </div>
 <div class="sideContent">    <!--3番目の子要素-->
  <h3 class="sideTitle">カテゴリ</h3>
  <div class="sideBody">
   <ul>
    <li>小説 (9)</li>
    <li>宮沢賢治 (4)</li>
    <li>森鴎外 (2)</li>
   </ul>
  </div>
 </div>
</div>

スタイルはプラグイン部分を囲う親要素 <div id="sidebar"> から順番に数えて指定します。1番目は最新記事、2番目はプロフィール、3番目はカテゴリ。

.sideContent:nth-child(1) .sideTitle{   /* 最新記事 タイトルのスタイル */
  color: #f00 !important;
}
.sideContent:nth-child(2) .sideTitle{   /* プロフィール タイトルのスタイル */
  color: #0f0 !important;
}
.sideContent:nth-child(3) .sideTitle{   /* カテゴリ タイトルのスタイル */
  color: #00f !important;
}
.sideContent:nth-child(1) .sideBody{   /* 最新記事 内容のスタイル */
  font-size: 11px !important;
}
.sideContent:nth-child(2) .sideBody{   /* プロフィール 内容のスタイル */
  font-size: 13px !important;
}
.sideContent:nth-child(3) .sideBody{   /* カテゴリ 内容のスタイル */
  font-size: 15px !important;
}

• ▼識別番号　▼識別タグ　▼説明文識別　▼タイトルテキスト非表示　▼識別タグ一覧　▲

プラグインタイトル文字が書かれた画像、タイトルテキストの非表示

例えば、次のようなHTMLが出力されていたとします。

<h3 class="plg-title" id="pt554050">最新の記事</h3>
<div class="plg-body" id="pc554050">
  <p>説明文</p>
  <ul>
   <li>エントリ3</li>
   <li>エントリ2</li>
   <li>エントリ1</li>
  </ul>
</div>

pt554050 には『Entries』と書かれた画像を表示します。

#pt554050 {
 background-image: url(画像アドレス/entries.gif) !important;
}

そうすると「最新の記事」というテキストが邪魔になります。これを非表示します。

[A]テキストを外に出す方法

よく使われる手法です。

個別のスタイルに text-indent と overflow を追加します。「 !important」が必要ないときは「 !important」を削除します。

#pt554050 {
 background-image: url(画像アドレス/entries.gif) !important;
 overflow: hidden !important;
 text-indent: -800px !important;
}

すべてのプラグインタイトルを画像表記に変更するときは、個別に追加せず、タイトルのセレクタ（例では plg-title）に一括で指定します。

.plg-title {
 overflow: hidden !important;
 text-indent: -800px !important;
}

画像が表示されないときを考慮して、HTMLにはtitle属性をつけるとよいかもしれません。不審に思ってカーソルを合わせてくるに違いありません。

<!--plugin_first-->
<h3 class="plg-title" id="pt<%plugin_first_no>" title="<%plugin_first_title>"><%plugin_first_title></h3>
<div class="plg-body" id="pc<%plugin_first_no>">
  <!--plugin_first_description-->
  <p><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

これらの変更は識別タグ・説明文識別・CSS3においても同様です。

.plgEntry {   /* 最新記事 タイトルのスタイル（説明文識別） */
 background-image: url(画像アドレス/entries.gif) !important;
 overflow: hidden !important;
 text-indent: -800px !important;
}

[B]テキストを透明にする方法

プラグインタイトルを <span> で囲みます。

<!--plugin_first-->
<h3 class="plg-title" id="pt<%plugin_first_no>" title="<%plugin_first_title>">
 <span><%plugin_first_title></span>
</h3>
<div class="plg-body" id="pc<%plugin_first_no>">
  <!--plugin_first_description-->
  <p><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

span で囲まれたプラグインタイトルのスタイルのみ opacity を追加。

.plg-title span {
 opacity: 0 !important;
 filter: alpha(opacity=0) !important;
}

[C]テキストを目立たなくする方法

個別のスタイルに font-size と color を追加します。文字サイズを0.1emとし、背景画像に溶け込むような文字色を指定します。高さはpaddingで調整します。「 !important」が必要ないときは「 !important」を削除します。

#pt554050 {
 background-image: url(画像アドレス/entries.gif) !important;
 padding: 5em 0 5em !important;
 color: #fff !important;
 font-size: 0.1em !important;
}

上部余白を10emとして下部余白を0emすれば下部にテキストが表示されます。

#pt554050 {
 background-image: url(画像アドレス/entries.gif) !important;
 padding: 10em 0 0em !important;
 color: #fff !important;
 font-size: 0.1em !important;
}

必死さが伝わってくる方法です。

[C]プラグインのタイトルを空っぽにする方法

管理画面の[プラグインの設定]でプラグインのタイトルに全角スペースのみを入れて設定をクリックします。何のプラグインかわからないのでお勧めできません。

[D]画像img要素を使った方法

最も無難のようで強引です。

<!--plugin_first-->
<h3 class="plg-title" id="pt<%plugin_first_no>">
<img src="http://blog-imgs-no.fc2.com/x/x/x/ID/pt<%plugin_first_no>.gif" alt="<%plugin_first_title> /></h3>
<div class="plg-body" id="pc<%plugin_first_no>">
  <!--plugin_first_description-->
  <p><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

各プラグインの識別番号の画像を作成する必要があります。

http://blog-imgs-no.fc2.com/x/x/x/ID/pt567890.gif
http://blog-imgs-no.fc2.com/x/x/x/ID/pt567891.gif
http://blog-imgs-no.fc2.com/x/x/x/ID/pt567990.gif
...

どうしても width と height を指定したい場合は、プラグイン説明文（上部下部）にそれぞれの数値を入れます。そして、テンプレートのHTMLから説明文を出力するFC2変数を削除します。

<!--plugin_first-->
<h3 class="plg-title" id="pt<%plugin_first_no>">
<img src="http://blog-imgs-no.fc2.com/x/x/x/ID/pt<%plugin_first_no>.gif" width="<%plugin_first_description>" height="<%plugin_first_description2>" alt="<%plugin_first_title> /></h3>
<div class="plg-body" id="pc<%plugin_first_no>">
  <%plugin_first_content>
</div>
<!--/plugin_first-->

上記のようにすると、widthの値は説明文（上部）、heightの値は説明文（下部）になります。

備考

プラグインタイトル識別

プラグイン説明文識別の代わりにプラグインタイトル識別も使おうと思えば使えます。

<!--plugin_first-->
<h3 class="plg-title <%plugin_first_title>"><%plugin_first_title></h3>
<div class="plg-body c<%plugin_first_title>">
  <!--plugin_first_description-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
  <!--/plugin_first_description-->
  <%plugin_first_content>
  <!--plugin_first_description2-->
  <p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
  <!--/plugin_first_description2-->
</div>
<!--/plugin_first-->

ただし、プラグインタイトルがありきたりなクラス名（EntryやCommentなど）になり、テンプレートのクラス名と重複してしまう恐れがあります。また、プラグインタイトルに日本語を使用しているとクラス名が日本語になります。

.最新記事 {   /* 最新記事 タイトルのスタイル */
 color: #ffffff !important;
}

古いブラウザでは日本語のクラス名は適用されません。半角英字を使いましょう。

隣接セレクタの多用

容易ですが、基本的にすべてのプラグインの要素を指定しなければならないため、煩雑になります。また、スタイルは順次上書きされます。特にIE7の場合はコメントアウトも隣接セレクタと見なされるため、あいだにコメントアウトがあると正しく適用されません。IE6も対象外です。非推奨です。

（例1）3つのプラグインのデザインをそれぞれ変更する

プラグインが次のように出力されたとします。

<div id="sidebar">
 <h3 class="sideTitle">最新記事</h3>     <!--1番目-->
 <div class="sideBody">     <!--2番目(+)-->
  <ul>
   <li>銀河鉄道の夜 (03/01)</li>
   <li>風の又三郎 (01/06)</li>
   <li>ヰタ・セクスアリス (01/05)</li>
  </ul>
 </div>
 <h3 class="sideTitle">プロフィール</h3>     <!--3番目(+)-->
 <div class="sideBody">     <!--4番目(+)-->
  <p>Author:paroday</p>
 </div>
 <h3 class="sideTitle">カテゴリ</h3>     <!--5番目(+)-->
 <div class="sideBody">     <!--6番目(+)-->
  <ul>
   <li>小説 (9)</li>
   <li>宮沢賢治 (4)</li>
   <li>森鴎外 (2)</li>
  </ul>
 </div>
</div>

1番目は最新記事タイトル、2番目は最新記事内容、3番目はプロフィール…。「+」を付け足すことで要素を特定します。

.sideTitle{   /* 最新記事 タイトルのスタイル */
  color: #f00 !important;
}
h3 + div + .sideTitle{   /* プロフィール タイトルのスタイル */
  color: #0f0 !important;
}
h3 + div + h3 + div + .sideTitle{   /* カテゴリ タイトルのスタイル */
  color: #00f !important;
}
h3 + .sideBody{   /* 最新記事 内容のスタイル */
  font-size: 11px !important;
}
h3 + div + h3 + .sideBody{   /* プロフィール 内容のスタイル */
  font-size: 13px !important;
}
h3 + div + h3 + div + h3 + .sideBody{   /* カテゴリ 内容のスタイル */
  font-size: 15px !important;
}

上記のスタイルを追加すると、最新記事タイトルの文字色は赤、プロフィールは緑、カテゴリは青になり、最新記事内容の文字サイズは11px、プロフィールは13px、カテゴリは15pxになります。ただし、IE7ではあいだにコメントアウトがあるため、デザインは正しく表示されません。IE6も対象外です。

関連記事

• [C]月日別ページで1ページに30件以上の記事を表示する（日付単位）
• 検索ページのスポンサーサーチを消す、テンプレート適用ページに
• プラグイン識別番号を確認、プラグインごとのタイトル画像変更
• 各プラグインごとにタイトル画像・内容のデザインを変更する
• [仕様変更]検索結果ページから個別ページに移動すると広告が表示される
• [仕様変更]検索ページ（?q=keyword）が広告付きのFC2ブログページに
• テンプレート編集プレビューでトップページ以外（個別、JavaScriptオフ等）を表示