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-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->

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

HTMLを編集します。
以下のように色が付いた部分を加えてください。
青い部分はフリーエリアの数に応じて数字を変えてください。

～
<div id="center">

<!--▼ フリーエリア ▼-->

<!--▽ フリーエリア１ ▽-->
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル１</div>
<div class="plugin3_body fa1">
<div style="text-align:left;">
ここにカテゴリー1のフリーエリアの内容を表示
</div>
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--△ フリーエリア１ △-->

<!--▽ フリーエリア２ ▽-->
<div class="plugin3_outline">
<div class="plugin3_title" style="text-align: center;">フリーエリアタイトル２</div>
<div class="plugin3_body fa2">
<div style="text-align:left;">
ここにカテゴリー２のフリーエリアの内容を表示
</div>
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--△ フリーエリア２ △-->

<!--▲ フリーエリア ▲-->

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

そしてスタイルシートの末尾に以下を加えてください。

/* フリーエリア１の背景画像設定 */
.fa1 {
background: url("画像URL");
}

/* フリーエリア２の背景画像設定 */
.fa2 {
background: url("画像URL");
background-repeat: no-repeat; /* 繰り返し表示しない場合に設定 */
background-position: right bottom; /* 画像位置設定 */
}

上記要領でフリーエリアはいくつでも増やせます。
各フリーエリアはお好きな様に背景画像を設定してください。