--
--.--

スポンサーサイト

上記の広告は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
2013
03.05

white_grain

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

特徴?
うっすらノイズ入りの白背景にグレーの文字。
余白を大きめにとって、なるべくボックス間をラインで区切らないようにしました。
サイドバーは固定、記事部分はブラウザの大きさに合わせて幅が変わります。
ヘッダーに画像を入れやすい、かも。
画面右下に、JavaScriptを利用したページの先頭へ戻るボタンを付けてみました。

デメリット
日付部分の丸い枠にCSS3を使っています。CSS3に対応していないブラウザでは四角く表示されます。
記事部分に投稿年が表示されません。
アイコンの色が薄くて見にくいかもしれません。

カスタマイズ例
◆ヘッダーに画像を入れる
スタイルシート編集から以下の部分を探し、赤字の箇所を書き換えます。
ヘッダーのサイズは、縦150px、横はブラウザの幅いっぱいです。(広がります。)
縦の長さは150pxで、横方向に繰り返してもおかしくない画像か、横の幅が十分に大きい画像を使うと良いかと思います。
/*---------------------ヘッダー------------------------*/
/* ヘッダー全体 */
#header {
width:100%;
height:150px;
margin-bottom:32px;
background: #c8c8c8;
}


◆ブログ名の文字色を変える
スタイルシート編集から以下の部分を探し、赤色の箇所を書き換えます。(text-strokeは文字のアウトラインを表示するプロパティです。)

◆ブログの説明の文字色を変える
スタイルシート編集から以下の部分を探し、黄色の箇所を書き換えます。
/*---------------------ヘッダー------------------------*/
/* ヘッダー全体 */
#header {
width:100%;
height:150px;
margin-bottom:32px;
background: #c8c8c8;
}
/* ブログタイトル */
.blogtitle{
font-size:48px;
padding-top:58px;
padding-left:92px;
font-family: 'MS PMincho','Hiragino Mincho Pro',serif;
-webkit-text-stroke: 0.5px #eee;
}
/* ブログタイトルのリンク設定 */
.blogtitle a{color:#eee;}
.blogtitle a:link{color:#eee;}
.blogtitle a:visited{color:#eee;}
.blogtitle a:hover{color:#eee;text-decoration:none;}
/* ブログの説明 */
.description{
font-size:12px;
padding-left:94px;
margin:13px 0 0 0;
color:#666;
}

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