今回は私が公開しているはてなブログのテーマ「CONTENTS」のコピペ簡単でカラー変更シリーズに第二弾として「CONTENTS×日本の夏」ということでCONTENTSを夏にまつわる色に変更してみましょう。
前回のCONTENTS×日本の伝統色
前回はCONTENTSと日本の伝統色を紹介しましたが、予想以上に多くの人に使っていただけたようで嬉しく思ってます。やはり漆黒が一番人気でしょうか。しかし他の色も使ってくれている人を確認出来たので、公開してよかったなと思いました。その他にも自分なりの色に変更して使っていただいているようで、PCの向こう側で満足している自分がいます。ありがとうございます。
www.dreamark.tokyo
今回は4色ご用意しました。
密柑(太陽)・山吹色(向日葵)・紺碧(青空)・鉄色(蚊取り線香)夏といえば。を自分なりに考えて4色を選ばさせていただきました。基本的には前回の色と被らないように選択をしてます。それではCSSコードと色の紹介をしていきます。
密柑(太陽)
夏と言えば燦々と降り注ぐ太陽の光。今年の夏は猛暑で特に暑いと言われていますね。その太陽を黄色を少し含んだんオレンジで表してみました。明るく元気でパワフル。色からはそんな印象を受けます。ブログデザインをパワフルに表現したい方に。
.navi,
.entry-content h3,
.entry-content h1,
#globalheader-container,
a.entry-see-more,
.pager-next a:after,
.pager-prev a:after,
#footer,
#footer-inner,
#footer-inner,
#copyr,
.leave-comment-title{
background: #f08300;
}
#title a,
.entry-content h4,
.point:before,
.column:before,
.attention:before,
#title a{
color: #f08300;
}
.entry-header .entry-title a,
.entry-header .entry-title a:visited{
color: #7d7d7d;
}
.kaerebalink-box,
.booklink-box,
.entry-content .hatena-asin-detail{
border: 1px solid ##f08300;
}
.entry-content h4,
.hatena-module-title{
border-left:4px solid #f08300;
}
.point,
.column,
.attention,
.entry-content blockquote{
border: 1px dashed #f08300;
}
.entry-header .entry-title,
.page-archive .archive-entry-header .entry-title
{
border-top: #f08300 8px solid;
border-bottom: #f08300 1px solid;
}
only screen and (max-width: 767px) {
.navi,
.toggle a
{
background: #f08300;
}
.close{
background: #f08300;
}
}
山吹色(向日葵)
太陽に向かって元気にすくすくと伸びる向日葵をイメージした色を選んでみました。色から受けるイメージは太陽に同様、明るく元気という印象。太陽よりも若々しい印象が若干プラスされる。ブログデザインを元気に表現したい方に。
.navi,
.entry-content h3,
.entry-content h1,
#globalheader-container,
a.entry-see-more,
.pager-next a:after,
.pager-prev a:after,
#footer,
#footer-inner,
#footer-inner,
#copyr,
.leave-comment-title{
background: #fcc800;
}
#title a,
.entry-content h4,
.point:before,
.column:before,
.attention:before,
#title a{
color: #fcc800;
}
.entry-header .entry-title a,
.entry-header .entry-title a:visited{
color: #7d7d7d;
}
.kaerebalink-box,
.booklink-box,
.entry-content .hatena-asin-detail{
border: 1px solid #fcc800;
}
.entry-content h4,
.hatena-module-title{
border-left:4px solid #fcc800;
}
.point,
.column,
.attention,
.entry-content blockquote{
border: 1px dashed #fcc800;
}
.entry-header .entry-title,
.page-archive .archive-entry-header .entry-title
{
border-top: #fcc800 8px solid;
border-bottom: #fcc800 1px solid;
}
only screen and (max-width: 767px) {
.navi,
.toggle a
{
background: #fcc800;
}
.close{
background: #fcc800;
}
}
紺碧(青空)
真夏の空は青くとても綺麗な色をしてます。その青さをイメージした色を用意しました。青と水色の中間のような色なので爽やかで清潔感があります。今まで紹介した中では少し明るい色ですが、目立ちすぎずコンテンツも際立つ。ブログデザインをさわやかにて表現したい方に。
.navi,
.entry-content h3,
.entry-content h1,
#globalheader-container,
a.entry-see-more,
.pager-next a:after,
.pager-prev a:after,
#footer,
#footer-inner,
#footer-inner,
#copyr,
.leave-comment-title{
background: #007bbb;
}
#title a,
.entry-content h4,
.point:before,
.column:before,
.attention:before,
#title a{
color: #007bbb;
}
.entry-header .entry-title a,
.entry-header .entry-title a:visited{
color: #7d7d7d;
}
.kaerebalink-box,
.booklink-box,
.entry-content .hatena-asin-detail{
border: 1px solid #007bbb;
}
.entry-content h4,
.hatena-module-title{
border-left:4px solid #007bbb;
}
.point,
.column,
.attention,
.entry-content blockquote{
border: 1px dashed #007bbb;
}
.entry-header .entry-title,
.page-archive .archive-entry-header .entry-title
{
border-top: #007bbb 8px solid;
border-bottom: #007bbb 1px solid;
}
only screen and (max-width: 767px) {
.navi,
.toggle a
{
background: #007bbb;
}
.close{
background: #007bbb;
}
}
鉄色(蚊取り線香)
夏と言えば蚊取り線香ということで、少し深い緑でイメージしてみました。キャッチーに蚊取り線香にしましたが、夏の生え盛る木々の緑も合わせてイメージしています。緑といっても明るさは抑えてあるので、落ち着いた感じも持ちあわせています。ブログデザインを落ち着いて表現したい方に。
.navi,
.entry-content h3,
.entry-content h1,
#globalheader-container,
a.entry-see-more,
.pager-next a:after,
.pager-prev a:after,
#footer,
#footer-inner,
#footer-inner,
#copyr,
.leave-comment-title{
background: #005243;
}
#title a,
.entry-content h4,
.point:before,
.column:before,
.attention:before,
#title a{
color: #005243;
}
.entry-header .entry-title a,
.entry-header .entry-title a:visited{
color: #7d7d7d;
}
.kaerebalink-box,
.booklink-box,
.entry-content .hatena-asin-detail{
border: 1px solid #005243;
}
.entry-content h4,
.hatena-module-title{
border-left:4px solid #005243;
}
.point,
.column,
.attention,
.entry-content blockquote{
border: 1px dashed #005243;
}
.entry-header .entry-title,
.page-archive .archive-entry-header .entry-title
{
border-top: #005243 8px solid;
border-bottom: #005243 1px solid;
}
only screen and (max-width: 767px) {
.navi,
.toggle a
{
background: #005243;
}
.close{
background: #005243;
}
}
このような夏にまつわる4色をご用意させていただきましたが、いかがでしたでしょうか?お気に入りの色はありましたか?変更方法については前回の記事、日本の伝統色×CONTENTSをお読みください。
www.dreamark.tokyo
新色リクエストを受付します
自分のイメージでは良いなと思っても、やはり色の好みというのは人それぞれありますよね?そこで今回思いきって、こんな色にしてほしい!というのを募集してみようかと思いました。
CONTENTSのカラーリクエスト
希望の色
#FFFFFFなどのようなカラーコード指定が一番良いのですが、赤、青など色の名前でも構いません。。
※色の名前を伝えいただいた場合は必ず希望どうりの色にならないこともあります。
希望の色についてはお一人様、1色迄とさせていただきます。
また、タイトルはこの色で、見出しはこの色というように、細かい色指定は対応できかねますのでご了承ください。
カラーコードが分からない方は以下のサイトを参考にしていただければ分かりやすいです。カラーコードも沢山出ているのでお気に入りの色が見つかるはずです。
※原色だけに限りません。和色や洋色などからお選びください。
www.colordic.org
募集方法
下記リンクのアンケートフォームより応募をしてください。
※名前やメールアドレスなどの入力は必要ありません。
docs.google.com
応募条件
CONTENTSを使っていただいている方。もしくはこれから使うことを検討している方。
採用について
まだどれ程の応募があるかわかりません。もしかしたらないかも知れませんが、応募いただけた中から私が選ばせていただいた、5カラーを予定しています。
※同じ色に多数の方が希望している場合は採用を優先させていただきます。
採用させていただいたカラーについては今回のような記事にしてご紹介させていただきます。
CONTENTSのインストール
テーマのインストールは下記よりしていただく事が出来ます。テーマを新規インストールする際には各自が現在デザインCSSに指定しているCSSや背景画像が破棄されてしまうので、インストールする際はバックアップを忘れないようにして下さい。
CONTENTS - テーマ ストア