--
--.--

スポンサーサイト

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

2013
03.11

leaves

Category: テンプレート
【DEMO】
【色違いの背景画像(別ページ)】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
画像の再配布×

特徴?
葉っぱの画像は全て透過してあります。
記事の投稿日部分の葉っぱは、曜日によって変わります。
サイドバーの色を変えるための、色違いの背景画像を作っておきました。

デメリット
画像が重めかもしれません。
Win Vista以降で閲覧した場合、Candaraというフォントを指定された部分(英数字)が、日本語部分(メイリオ)に比べて小さく見えます。
Candaraを指定した部分は、ブログタイトル・ブログ説明・記事タイトル・記事日付・カレンダーです。

メイリオよりCandaraが小さい


カスタマイズ例
◆外側の背景画像(白い布の部分)を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を使いたい画像のURLに書き換えます。
/*---------------------ページ全体----------------------*/
body{
margin:0;
padding:0;
font-family:Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
font-size:16px;
letter-spacing:1px;
line-height:1.6em;
word-wrap: break-word;
color:#151105;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-bg-cloth.jpg);
}


◆記事とサイドバーの背景画像を変える
スタイルシート編集から、下記の部分を探し、赤色の箇所を使いたい画像のURLに書き換えます。
/*---------------------コンテンツ全体----------------------*/
#container{
width: 900px;
margin:0 auto;
text-align:left;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/leaves-bg-biscuit2.jpg) repeat-y;
}

デフォルトでは、こんな画像を使っています。全体の幅が900pxで、左側650pxが記事部分の色、右側250pxがサイドバー部分の色です。

leaves背景

上で書いた通り、サイドバーの色を変えた画像も作ってあります。ご自由にお使い下さい。

◆Candaraを使わない
スタイルシート編集で「Candara,」と書かれている箇所を探し、削除します。
また、WindowsとMacで表示を近くしたい場合は、Candaraのすぐ後に書いてある「Optima,」も削除して下さい。
(OptimaもCandaraも、ちょっとエレガントな雰囲気のあるフォントです。OptimaはMac、Candaraはwinです。)

スポンサーサイト
Comment:11  Trackback:0
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。