*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 >  Template >  カスタマイズ >  レスポンシブテンプレートの使い方(背景画像変更 ① )

レスポンシブテンプレートの使い方(背景画像変更 ① )

al-mihon1.jpg今時とってもLegacyな テンプレートですが、その分『見掛け』を自分流にカスタマイズ出来るように、CSSも(多分)分かり易く作っております。
可愛い愛犬・愛猫や、旅先で撮った素敵な画像等々…お好きなように飾って下さい。(^-^)


上の画像は、クリックすると当ブログでの見本表示になりますので是非ご確認を。
詳しくはこの記事の次
『レスポンシブテンプレートの使い方(背景画像変更 ② )』でご説明致します。m(__)m (ちょっと派手めですが。^^;)



先ずは基本形。現状テンプレートの簡単背景変更から。
テンプレートの管理画面下段の [ al_responsive〇c ] のスタイルシート編集枠内
スクロールするとすぐ下に下記のような箇所が有ります。

body::before{
background-image:url(https://blog-imgs-115.fc2.com/s/o/r/sorauta1/hahana.png); /* --透過背景画像-- */
background-color:#e2eccb; /* --透過背景画像の背景色-- */
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

赤文字の部分が今現在の花柄背景画像です。
hahana.png←背景画像
この画像は透過PNGを使用しているので、青い文字のようなカラーコードを指定すると背景色が変わります。
b-img_b.pngb-img_g.pngb-img_o.pngb-img_p.pngb-img_y.png
上記に使っている背景色のカラーコードは
background-color:#d1eafc; (ブルー)
         #d3e1c0; (グリーン)
         #ffddb0; (オレンジ)
         #ffd8d8; (ピンク)
         #eeebbb; (イエロー)
になっており、青い文字部分のカラーコードを変えるだけで背景のイメージも随分変わります。
また、ご自身で用意した背景画像も、『ファイルアップロード』でアップロードした画像のURLを赤い文字の部分に入れれば変更する事ができます。
(上記の場合は敷き詰めるタイプのリピート画像です。)

カラーコード、カラーネームの参考は下記をどうぞ。m(__)m
カラーコード表(216色) カラーネーム表(147色)

コメント







管理者にだけ表示を許可する