入口 > テンプレ - カスタマイズ > とりあえずばーっと色を変える

とりあえずばーっと色を変える

カスタマイズとかようわからん! 解説記事をちまちまチェックすんのもスタイルシートから該当箇所を探して照らし合わせて置換してとかもめんどくさい! でも全体にもうちょっと自分色を出したい! という方のためのスタイルシートサンプルを作ってみました。
好きな色を何色か選んでおき、サンプルコードをコピペしてその色を当てはめる、という作業だけで、とてもざっくりではありますがそれなりに雰囲気が変えられるんじゃないかと思います。初心者さんの手がかりとして、またカスタマイズの大まかなベースとして、よかったらお試しください。
まずは手軽に全体をいじってみましょう。



1-1.以下の四色を好きな組み合わせで選ぶ(こちらこちらなどご参照ください)

[1]すごく薄い色(背景用)
[2]濃い色(テキスト用)
[3]薄い色(目立たせたくないとこ用)
[4]鮮やかな色(リンク選択時用)


1-2.テンプレスタイルシート最下部に以下をコピペする

/* * * * * 全体カスタム * * * * */
/*■■全体・背景■■***/
body, input, textarea { background: ===[1]backgroundcolor=== url(http://) top center fixed; } /*全体・ボタン類・テキストエリア背景*/

/*■■全体・字■■*/
body, #h1, a:link, input, textarea, .botan, .default:hover, #pankuzu a:link, #pankuzu a:visited { color: ===[2]darkcolor===; } /*全体基本、リンク基本、ボタン類・テキストエリア基本、親メニュー選択時、検索窓"?"、パンくずリストリンク*/
#pankuzu, .date, .morelink a:link, .edit a:link, .edit a:hover, .edit a:active { color: ===[3]lightcolor===; } /*パンくずリスト非リンク時色、他弱くしたい色(仮)*/
a:hover, a:active, .botan:hover, #pankuzu a:hover, #pankuzu a:active, .morelink a:hover, .morelink a:active, .h4 a:hover, .h4 a:active { color: ===[4]brightcolor===; } /*選択時リンク色*/
.nikki .topentry, .more { border-top: dotted 1px ===[3]lightcolor===; } /*日記記事区切り、記事内部追記区切り線(仮)*/
#h1 { color: ===titlecolor===; } /*ブログ名字色*/
a:visited { color: ===mediumcolor===; } /*訪問済みリンク色*/

/*■■全体・線■■*/
input, textarea, .topentry_body blockquote, .blog_baton { border: solid 1px ===[3]lightcolor===; } /*ボタン類・テキストエリア線*/
#search { border-bottom: dotted 1px ===[3]lightcolor===; } /*検索窓下線*/


1-3.1-2のピンク背景部分にそれぞれ1-1の色コードをペーストする([3]が4箇所、あとは1箇所ずつ)

1-4.お好みで、ブログタイトルだけ別の色にしたければ「===titlecolor===」を、訪問済みリンクは別の色にしたければ「===mediumcolor===」を、お好きな色コードで置換してできあがり



これで一旦保存して内部ページとかも見てみて、記事エリアはやっぱ違う色にしたいなーと思われたら、同じ要領で記事部分も色指定します。




2-1.以下の四色を記事エリアを想定しながら好きな組み合わせで選ぶ(こちらこちらなどご参照ください)

[1]すごく薄い色(背景用)
[2]濃い色(テキスト用)
[3]薄い色(目立たせたくないとこ用)
[4]鮮やかな色(リンク選択時用)


2-2.テンプレスタイルシート最下部に更に以下をコピペする

/* * * * * 記事エリアカスタム * * * * */
/*■記事内部・背景■*/
#not_index_area { background: +++[1]backgroundcolor+++; } /*記事エリア背景*/

/*■記事内部・字■*/
.topentry_body, .topentry_body a:link, div.topentry .h3, .nikki .h2, .h4 a:link, .h4 a:visited { color: +++[2]darkcolor+++; } /*記事本文、記事内リンク、各ページタイトル、日記記事タイトル字色*/
.date, .morelink a:link { color: +++[3]lightcolor+++; text-decoration: none; } /*日記日付、続きを読むリンク色と下線消し*/
.topentry_body a:hover, .topentry_body a:active, .h4 a:hover, .h4 a:active { color: +++[4]brightcolor+++; } /*記事内リンク、日記記事タイトルオンマウス時字色*/
.edit a:link, .edit a:hover, .edit a:active { color: +++[3]lightcolor+++; } /*記事編集ボタン*/

/*■記事内部・線■*/
.nikki .topentry, .more { border-top: dotted 1px +++[3]lightcolor+++; } /*日記記事区切り、記事内部追記区切り線*/
.topentry_body hr { border: none; border-top: dotted 1px +++[3]lightcolor+++; color: +++[1]backgroundcolor+++/*記事背景と同色*/; } /*記事内部水平線*/
.topentry_body blockquote, .blog_baton { border:dotted 1px +++[3]lightcolor+++; } /*記事内部引用・バトン枠線*/

/*■記事エリア上下余白■*/
#container { padding-top: --px; } /*上余白*/
#not_index_area { margin-bottom: --px; } /*下余白*/


2-3.2-2のブルー背景部分にそれぞれ2-1の色コードをペーストする([1]が2箇所、[2]が1箇所、[3]が5箇所、[4]が1箇所あります)

2-4.お好みで、記事エリア上下余白を広げたければイエロー背景にお好きな数値を入れたり、記事編集ボタンをもっと目立たなくしたければ「.edit a:link, .edit a:hover, .edit a:active { color: ~; } 」のところをもっと薄い色にしたり、記事エリアの角を丸くしたければ

#not_index_area { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

(数値は適当に)を付け加えたりしてできあがり



と、こんな感じです。
どうでしょうか、色が変わるとだいぶ雰囲気変わったんじゃないでしょうか?
もちろん背景と字の濃淡を逆にしてもいいですし、リンクオンマウス時だって鮮やかな色じゃなきゃいけないわけではありません。上記は強引に一般化したただのひとつの目安ですので、要領がわかったらあとはご自由になさってください。背景を画像にするとかもっと細かいとこまで色指定するとか字の大きさを変えるとかフォントを変えるとか、サイト内容や嗜好、知識に応じて手を加えていけば、どんどんオリジナルの場所に作り込んでいけるんじゃないかと思います。カスタマイズを楽しんでください。

大事なとこで指定漏れがあるようならぜひお知らせください。
2012-12-18