--
--.--

スポンサーサイト

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

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。