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

フリーエリアを表示したい任意の箇所に、この記事のテーブルを入れてください。

プラグインフリーエリア等の中身を横に４つ並べて表示する

記事では４つ並べる場合を紹介していますが、<td>〜</td>の数と幅(width)の数値を調整していくつにすることもできます。

当サイト配布の共有テンプレートを使用しているならば、このテーブルのそれぞれの中身に以下を挿入すると枠を表示できます。

【lightframeの場合】

<div class="plugin3_outline">
<div class="plugin3_title">タイトル</div>
<div class="plugin3_body">
ここになんでもスクロール等、中身を挿入
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->

【standardの場合】

<div class="menu_outline3">
<div class="menu_title3">タイトル</div>
<div class="menu_cont3">
ここになんでもスクロール等、中身を挿入
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->

なんでもスクロールを挿入する場合は上記の紫部分を削除し、なんでもスクロールの一行目を以下のようにすると見栄えがよくなるかもしれません。

<div class="plugin3_body plugin3_outline" style="

これで外枠を分けたフリーエリアを横に並べて表示することができます。

このカスタマイズを施すには、まずメニューバーのドロップダウンの記事にあるスタイルシートを加えてください。

そしてHTMLを下記のように編集してください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>

<!--▼ リンクを表示 ▼-->
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">リンク一覧</a><ul>
<!--link-->
<li>
<a href="<%link_url>" target="_blank"><%link_name></a>
</li>
<!--/link-->
</ul></li>
<!--▲ リンクを表示 ▲-->

<!--▼ 月別アーカイブを表示 ▼-->
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">月別アーカイブ</a><ul>
<!--archive-->
<li>
<a href="<%archive_link>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul></li>
<!--▲ 月別アーカイブを表示 ▲-->

</ul>
<!--▲ メニューバー ▲-->

これでメニューバーに最新記事と最新コメントを表示することができます。
tskillさん、ありがとうございました＾＾

HTMLに次の様な箇所があるので、この部分をコピーしてください。

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->

〜（中略）〜

<!--/plugin_third-->
<!--/plugin-->
<!--/index_area-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

これを以下のように記事を表示する部分（<!--topentry-->〜<!--/topentry-->）の下に貼付けて
<!--index_area-->を<!--permanent_area-->に
<!--/index_area-->を<!--/permanent_area-->に書き換えてください。
（それ以外は手を加えないでください。少しでもコピー元と違うと変数が機能しないようです。）

<!--/topentry-->
<!--▲ エントリー（記事）▲-->

<!--▼▼ プラグイン カテゴリー３ ▼▼-->
<!--permanent_area-->
<!--plugin-->
<!--plugin_third-->

〜（中略）〜

<!--/plugin_third-->
<!--/plugin-->
<!--/permanent_area-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

これでトップページでは記事の上に表示されていたプラグイン３が、個別記事ページでは記事の下に表示されるようになります。