はてなブログの人気テーマであるZENO-TEAL。メインカラーの印象が強いこのテーマですが、一色でまとめるのでなく、数か所に分けて色を指定したい時があるかもしれません。他のテーマを使ってる方もそう思う方はいるかも。私はZENO-TEAL公式のテーマカラーの変更の仕方を参考に、何かイベントがあるごとにテーマカラーを変えています。
普段はこの画像のように、ヘッダー、フッター、ドロップダウンメニュー、サイドバーをグラデーションカラーに、それ以外の部分（記事内のh2、h3など）には単色を設定しています。
CSSのコードはこんな感じ。はてなブログでの設定は、ダッシュボード＞デザイン＞カスタマイズ＞デザインCSSにペーストします。
/*グラデーション*/
#blog-title, .hatena-module-title, .hatena-follow-button.unsubscribing, #dropmenu, #footer {
background: 好きな色;
}
/*単色*/
.entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before, .entry-content ul li::before {
color: #好きな色;
}
.entry-content h2, .entry-content ol li:before, .page-index .pager a:hover, .page-entry .pager .pager-prev::before, .page-entry .pager .pager-next::after, .archive-heading {
background-color: #好きな色;
}
.archive-heading::before, .entry-content h2::before{
border-top-color: #好きな色;
}
.entry-content h3{
border-left-color: #好きな色;
}
ul.table-of-contents, .page-index .pager a, .page-entry .pager span{
border-color: #好きな色;
}
@media screen and (max-width: 480px){
.entry-content h2 {
border-bottom: 3px solid #好きな色;
color: #好きな色;
background-color: transparent;}
}
#globalheader-container, .zeno-menu li a:hover {
background: #好きな色;
}
.entry-content p a:visited {
color: #好きな色;
}
.page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before {
background: #好きな色;
}”#好きな色” の部分はお好きな色をどうぞ。ちなみに私はグラデーションにはrepeating-linear-gradient(151deg, #AE23A0 0%, #FF6017 100%, #00978d 0%, #f3b6c9 100%) no-repeat 50% 50% / 100% 100%、単色には#bf3084を指定しています。色見本表で好きな色を探してみて下さいね。
単色の色見本
グラデーション作成ツール
グラデーション作成では、Color Stops欄を操作すると簡単に自分の好きなグラデーションが出来上がります。出来上がったグラデは右の欄の下、Preview部分にコードが出てくるので、それをコピーして使用してください。
今回は6月の世界のプライド月間にあわせて、テーマカラーをレインボーに変えてみました。ボーダーやストライプのレインボーは気分じゃなかったので、四方からカラーがジュワッとにじむような設定にしました。参考にさせていただいたのはコチラのレインボー。
https://codepen.io/GemmaStiles/pen/MqbwYr
ヘッダー、フッター、サイドバーをレインボーのグラデーションカラーで、ドロップダウンメニュー部分のみ、ブルーのグラデーションを設定しています。それ以外の部分は、上のコードと変更なし。
/*レインボーのグラデーション*/
#blog-title, .hatena-module-title, .hatena-follow-button.unsubscribing, #footer {
background: linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
}
/*ブルーのグラデーション*/
#dropmenu {
background: linear-gradient(#3399ff, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
border-top: 0.5px solid white;
}
今後もクリスマスや新年など、季節や気分に合わせて期間限定で色を変えていく予定です。
