以下の内容はhttp://10plate.blog44.fc2.com///blog-entry-340.htmlより取得しました。


記事上部に異なる背景画像のフリーエリアを表示

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

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

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


<div id="center">

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

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

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

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


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



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

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

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



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



以上の内容はhttp://10plate.blog44.fc2.com///blog-entry-340.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14