--
--.--

スポンサーサイト

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

2013
02.21

grey_paisley

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

特徴?
文字大きめ。
無彩色だけを使っています。
画面右下に、JavaScriptを利用したページの先頭へ戻るボタンを付けてみました。

デメリット
一部にCSS3を使っています。CSS3に対応していないブラウザではその箇所は表示されません。
※該当箇所
・記事タイトル・サイドバー項目・トラックバックURL・トラックバック・コメント前後にあるアイコン
・コメント欄・トラックバック欄・blockquote部分の背景と角丸
・カレンダーリンクの角丸

カスタマイズ例
◆右上のペイズリー模様を変える
左側が大きくあいた950px*277pxの透過PNGを使っています。
(こんなの)
スタイルシート編集で下記の部分を探し、赤色の部分を使いたい画像のURLに差し替えます。
また、黄色の部分を変更して画像の位置を調節します。
/*---------------------コンテンツ全体----------------------*/
#container{
width: 950px;
margin:0px auto;
text-align:left;
background: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-bg-paisley.png) center 5px fixed no-repeat;
}


◆記事タイトル前後のアイコンを変える・消す
スタイルシート編集で下記の部分を探します。
アイコンを変えたい場合は、赤色の部分のURLを使いたい画像のURLに差し替えます。黄色の部分を変更するか削除して、位置を調節します。
アイコンを消したい場合は、下記の部分を全て削除します。
/*---------------------記事表示部----------------------*/

/* 記事タイトル */

.title::before {
content: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-entry1.png);
position: relative;
top: 3px;

}
.title::after {
content: url(http://blog-imgs-55.fc2.com/p/o/t/potar/blackgrain-entry2.png);
position: relative;
top: 5px;

}


◆サイドバー項目、トラックバックURL、トラックバック、コメント前後のアイコンを変える・消す
記事タイトル前後のアイコンを変える・消す場合と同じようにします。
直す場所は、以下の部分です。
サイドバー .sidetitle::before, .sidetitle::after
トラックバックURL .trackback-urlhead::before .trackback-urlhead::after
トラックバック .trackback-head::before .trackback-head::after
コメント .comments-head::before  .comments-head::after
スポンサーサイト

Comment:0  Trackback:0
トラックバックURL
http://potar.blog.fc2.com/tb.php/19-c7b57b47
トラックバック
コメント
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。