入口 > テンプレ - カスタマイズ > 線の色やスタイルを変える

線の色やスタイルを変える

ブログ内各所にある「線」類の色やスタイルを変える方法です。
「テンプレートの設定」画面で、スタイルシート下の方の「/*** 色関係 ***/」のところを見てください。
下記の赤字部分のコード(「#333」「1px」「solid」など)を書き換えれば、いろんな線の色が変わります。何がどの指定にあたるのかは、灰字の説明を参考にしてください。

/*** 色関係 ***/
/* 色【基本】 */
body { color: #333; background: #fff; }
a { text-decoration: none; }
a:link { color: #333; }
a:visited { color: #555; }
a:hover, a:active { color: #ccc; }
input, textarea { border: solid 1px #ccc; background: transparent; color: #000; } ←入力もの関係の枠線

/* 色【各エリア】 */
#search { border-bottom: solid 1px #dfdfdf; } ←検索窓の下線
#search .kensakumado { border: none; }
.botan { color: #ccc; border: none; }
.botan:hover { color: #ddd; }
#h1 { color: #000; }
#pankuzu { color: #ccc; }
#pankuzu a:link, #pankuzu a:visited { color: #999; }
#pankuzu a:hover, #pankuzu a:active { color: #333; }
.date { color: #999; }
.nikki .topentry { border-top: dotted 1px #ccc; } ←日記ページの記事ごとの境界線
.nikki h2 + div.topentry { border: none; }
.morelink a:link { color: #999; text-decoration: none; }
.morelink a:visited { color: #ccc; text-decoration: none; }
.morelink a:hover, .morelink a:active { color:#333; }
.edit a { color: #ccc; text-decoration: none; }


/* 色【記事内部】 */
.more { border-top: dotted 1px #ccc; } ←追記の上の線
.topentry_body hr { border: none; border-top: dotted 1px #999; color: #fff/*背景と同色*/; } ←記事内の水平線
.topentry_body blockquote, .blog_baton { border:dotted 1px #999; } ←記事内の引用部分とバトン部分の枠線

ちなみに、線に限らず全ての色の指定はここでやっています。
どんなコードを指定すればどんな色になるのかといったことは、スタイルシートや色関係の専門のサイトをご参照ください。例えばこちらこちらなど、色コードのサンプルを見るだけでなく、配色をテストしたり和風洋風といったイメージから色を選んだりもできます。
2012-06-27