FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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

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上では全てのフリーエリアが存在することになります。それにより記事本文のキーワード重要度が薄れてしまうかもしれません。

関連記事