入口 > スポンサー広告 > スポンサーサイト テンプレ - カスタマイズ > 画面の四隅に背景画像を置く

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

画面の四隅に背景画像を置く

画面の四隅に背景画像を置く方法です。以前お返事記事としてまとめていたものですが、便利だし個人的にかわいいと思うので最新バージョン向けに少し書き換えてピックアップしてみました。
こんな感じになります→目次画面(背景画像はこちらの素材を加工させていただきました)。(ついでに記事本文だけ字色を青みグレーに、リンク色をピンクに変えています、スタイルシート末尾に「.topentry_body { color: slategray; }」と「.topentry_body a { color: hotpink; }」の二行を加えてます)
1.テンプレHTMLの初めの方に下記の通り青字を挿入

…<!--topentry--><%topentry_year><%topentry_month><!--not_edit_area--><!--/topentry--><!--topentry--><!--/not_edit_area--><!--/topentry-->"<!--/category_area-->>

<div id="left"></div><div id="right"></div>
<div id="left_top"></div><div id="right_top"></div>

<div id="container">

<!--検索窓-->


2.四隅に置きたい画像を「ファイルアップロード」でアップし、アドレスを控えておく

3.テンプレスタイルシート末尾に下記を加え、ピンク背景部分を2の各アドレスに書き換える

/*** 四隅に背景画像 ***/
#left{
background-image:url("http://左下の画像のアドレス");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
height:100%;width:100%;
position:fixed;
left:0;bottom:0;
}
#left_top{
background-image:url("http://左上の画像のアドレス");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
height:100%;width:100%;
position:fixed;
left:0;top:0;
}
#right{
background-image:url("http://右下の画像のアドレス");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
height:100%;width:100%;
position:fixed;
right:0;bottom:0;
}
#right_top{
background-image:url("http://右上の画像のアドレス");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
height:100%;width:100%;
position:fixed;
right:0;top:0;
}
#container { position:relative; z-index: 10; }


以上です。
繰り返しや画像固定の指定はお好みで適当に書き換えてください。ガチガチの隅っこではなく少しずらしたいとかも適当にpositionで変更してください。詳しくはスタイルシートの解説サイトを別途ご参照ください。
それぞれの「#」の前に「.category_catX_body 」と入れ、「X」を特定のカテゴリ番号に書き換えれば、そのカテゴリのみ四隅に背景がつくかたちになります。

2013-06-03
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。