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

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

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

このカスタマイズは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; /* 画像位置設定 */
}



上記要領でフリーエリアはいくつでも増やせます。
各フリーエリアはお好きな様に背景画像を設定してください。
関連記事
[ 7443 ]
ページナビが左にずれたのですがどうすればいいでしょうか?
[ 2009/12/16 22:16 ] [ 編集 ]
[ 7446 ] > Geckoさん
スタイルシートの末尾にこれを加えてみてください。

.page_navi {
text-align:center;
}

最近テンプレートかプラグインを弄ったでしょうか。これで上手くいかない場合はバックアップしたテンプレートに戻すか、最近追加したプラグインを非表示にしてみてください。

[ 2009/12/16 22:52 ] [ 編集 ]
[ 7447 ]
ありがとうございます。
直りました。
[ 2009/12/17 09:24 ] [ 編集 ]
[ 7449 ] > Geckoさん
解決して良かったです^^
[ 2009/12/17 23:44 ] [ 編集 ]
[ 8712 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/07/07 08:15 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る