http://10plate.blog44.fc2.com///blog-entry-249.html

記事別フリーエリアの表示

先日カテゴリ別フリーエリアの表示方法を紹介しました。
今回は記事別にフリーエリアを表示する方法を紹介します。

HTMLの<head>～</head>の間に、以下を加えてください。
FC2変数を利用するため、スタイルシートではなくHTMLのheadタグ内に書く必要があります。

<style type="text/css">
.en<%topentry_no> { display: block; }

--></style>

次に、当サイトが公開している共有テンプレートであれば
記事別フリーエリアの表示位置を

記事の上に表示したければ
 の上に

記事の下に表示したければ
 の下に

次の記述を加えてください。

【standardシリーズの場合】

<div class="c en1">
<div class="menu_outline3">
<div class="menu_title3" style="text-align: center;" >フリーエリアタイトル1</div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align: left;">
ここに記事1のフリーエリアの内容を表示
</div>
</div>
</div>
<br />
</div>

<div class="c en2">
<div class="menu_outline3">
<div class="menu_title3" style="text-align: center;" >フリーエリアタイトル2</div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align: left;">
ここに記事2のフリーエリアの内容を表示
</div>
</div>
</div>
<br />
</div>

【lightframeシリーズの場合】

<div class="c en1">
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル1</div>
<div class="plugin3_body">
<div style="text-align:left;">
ここに記事1のフリーエリアの内容を表示
</div>
</div>
</div>
</div>

<div class="c en2">
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル2</div>
<div class="plugin3_body">
<div style="text-align:left;">
ここに記事2のフリーエリアの内容を表示
</div>
</div>
</div>
</div>

同様に
<div class="c en3"> ～ </div>
<div class="c en4"> ～ </div>
・・・
と、記事の数だけ増やせます。

赤い数字は記事番号を設定してください。各記事番号は、その記事ページのURLを見ると判ります。
http://～/blog-entry-x.html
xの位置にある数字がその記事の番号です。

各文字の
中央寄せ ( center )
左寄せ ( left )
はお好みに合わせて設定してください。

これで各記事ページに異なる専用のフリーエリアを表示することが出来ます。
ただし、多用することはSEO的に良くないかもしれません。

目に見える記事別フリーエリアは各記事ページにつき１つだけですが、HTML上では全てのフリーエリアが存在することになります。それにより記事本文のキーワード重要度が薄れてしまうかもしれません。

関連記事

[ 2009/07/31 22:27 ] カスタマイズ共通カスタマイズ | TB(0) | CM(5)