feliz dia

毎日を少しでも楽しく過ごせるように目指している人のブログです

画像の説明
画像の説明
画像の説明
画像の説明
画像の説明
画像の説明

《はてなブログ》場所ごとのテーマカラーの設定方法

f:id:feliz-dia:20200604010343j:plain


はてなブログの人気テーマであるZENO-TEAL。メインカラーの印象が強いこのテーマですが、一色でまとめるのでなく、数か所に分けて色を指定したい時があるかもしれません。他のテーマを使ってる方もそう思う方はいるかも。私はZENO-TEAL公式のテーマカラーの変更の仕方を参考に、何かイベントがあるごとにテーマカラーを変えています。




普段はこの画像のように、ヘッダー、フッター、ドロップダウンメニュー、サイドバーをグラデーションカラーに、それ以外の部分(記事内のh2、h3など)には単色を設定しています。


f:id:feliz-dia:20200604013337j:plain

f:id:feliz-dia:20200604013326j:plain
グラデーション
f:id:feliz-dia:20200604014532j:plain
単色


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を指定しています。色見本表で好きな色を探してみて下さいね。

単色の色見本

www.colordic.org

グラデーション作成ツール

shapy.app


グラデーション作成では、Color Stops欄を操作すると簡単に自分の好きなグラデーションが出来上がります。出来上がったグラデは右の欄の下、Preview部分にコードが出てくるので、それをコピーして使用してください。




今回は6月の世界のプライド月間にあわせて、テーマカラーをレインボーに変えてみました。ボーダーやストライプのレインボーは気分じゃなかったので、四方からカラーがジュワッとにじむような設定にしました。参考にさせていただいたのはコチラのレインボー。
https://codepen.io/GemmaStiles/pen/MqbwYr



f:id:feliz-dia:20200604014436j:plain
f:id:feliz-dia:20200604013332j:plain


ヘッダー、フッター、サイドバーをレインボーのグラデーションカラーで、ドロップダウンメニュー部分のみ、ブルーのグラデーションを設定しています。それ以外の部分は、上のコードと変更なし。


/*レインボーのグラデーション*/
#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;
}


今後もクリスマスや新年など、季節や気分に合わせて期間限定で色を変えていく予定です。