FC2ブログ共有テンプレート説明 grass_board_2colmn

grass_board２カラム テンプレートイメージ


背景のコンクリート・木・ガラスは全て独立しているため、着せ替えが可能です。
３タイプ用意してますので、下記方法でイメージチェンジしてみて、気に入ったものを使用してください。
もちろん、独自に作った画像と差し替えても構いません。
コンクリートと木の部分はリピート画像になっています。

★背景画像の変更方法
CSSの次の部分を変更します。

全体背景画像（コンクリート部分）
body{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/concrete_a.jpg);}

ヘッダータイトル画像
#header_content{background:url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/titleimg810_a.jpg);}

フッター背景画像（ウッド）
#b_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}

aタイプ、bタイプ、cタイプ、それぞれ画像を用意していますので、
拡張子.jpgの前の「a」の部分を「b」「c」に変えるだけです。

aタイプイメージ

bタイプイメージ

cタイプイメージ

上のイメージ画像では、それぞれカラム数が異なっていますが、
どのカラムのバージョンでもa,b,cの３タイプが利用可能です。

次のように#h_backgroundに背景画像を設定すると、
フッター部分のようにヘッダーにも背景画像を設定する事ができます。
#h_background{background: url(http://blog-imgs-45.fc2.com/o/r/e/oreshiten/wood_a.jpg);}


フッター背景を削除する事もできます。


#header_contentの背景画像がヘッダーのタイトル画像になってますが、
これを削除するとまた違った印象になります。

背景色によっては文字が見難くなりますので、色やサイズを調整してご利用ください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ」のコメントにてお知らせ頂けると幸いです。

１カラムバージョン FC2ブログ共有テンプレート説明 grass_board_1colmn
３カラムバージョン FC2ブログ共有テンプレート説明 grass_board_3colmn