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

このカスタマイズはlightframeシリーズが対象です。

当サイトが配布している共有テンプレートはプラグイン３が記事上部に表示されますが、これに「異なる背景画像」となるとプラグイン３を使わずに直接HTMLを編集する必要があります。

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; /* 画像位置設定 */
}

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

関連記事

• トップページのみ３カラム、他を２カラムにする。(lightframe) (2011/12/24)
• 記事上部に異なる背景画像のフリーエリアを表示 (2009/12/15)
• 記事タイトルの色を変える (lightframe) (2009/11/26)
• プラグイン３のレイアウト (lightframe) (2009/10/09)
• ページナビゲーション（ページ送り）の前後を入れ替える (2009/09/09)
• 記事とコメント欄の間にフリースペースを設置 (2009/09/06)
• 記事タイトルやプラグインタイトルを画像にする (lightframe) (2009/08/24)