白兎のまじメモ!検索は「まじメモ」

会社員との兼業ブロガー白兎が語る「超」雑記ブログ!

はてなブログテーマ『ZENO-TEAL』をカスタマイズ。カラー・ヘッダー・グローバルナビなどの備忘録。

f:id:shiro-usagi:20190310182518j:plain

 

はい!たったん(@tattan213)です^^。このはてなブログでテーマを『ZENO-TEAL』にしてからずっとやりたいと思っていたカラーの変更などのカスタマイズなんですが、今日やっと多少手を付ける事が出来ました~!

 

意外と他のサイト見ても端的に書いてあるサイトがないんで、自分なりに今後ZENO-TEALをカスタムすると時に分かりやすくパーツ別に書いておきます。自分用のZENO-TEALカスタマイズ備忘録なんで、不明な点はコメント下さいませ。一応仕事がWEBデザイナーなのである程度はお答えできるかと...。

 

 

ZENO-TEALヘッター画像カスタム

 

はい、まずはヘッター画像のカスタマイズの方法ですが、僕はベースの背景画像のドット画を生かしたかったので、ヘッダ画像は背景を透明にしてます。そう、png画像ですね。

 

(まじメモ備忘録...)

画像サイズ ⇒ 横534px 縦200px

 

画像の横サイズは特に意味はないんですが、僕はスマホもPCと同じ画像を表示してます。なので、スマホ画面で収まるサイズにしてます。適当に画像を作ってたら程よい大きさだったのでこのサイズにしました!

 

PC側の設定はヘッダーの設定は当然「画像だけ表示」です。スマホ側の設定は「PCと同じ画像を表示」です。

 

ZENO-TEALのテーマカラーを変更

 


/* メインカラー 500 */
#blog-title, .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, .hatena-module-title, .archive-heading
{background-color:#3f658c;}

.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:#3f658c;}>

.archive-heading::before, .entry-content h2::before
{border-top-color:#3f658c;}

.entry-content h3
{border-left-color:#3f658c; color:#333;} ul.table-of-contents, .page-index .pager a, .page-entry .pager span {border-color:#3f658c;} @media screen and (max-width: 480px){ .entry-content h2 {border-bottom:3px solid #fac559;color:#fac559;background-color:transparent;} } /* 濃い部分 600 */ #globalheader-container, .zeno-menu li a:hover {background:#3f658c;} .entry-content p a:visited {color:#3f658c;} /* 薄い部分 400 */ .page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before {background:#3f658c;} /* カード部分 */ .page-index .entry-categories, .page-entry .entry-categories{ background:#色コード; }

 

 まず、これが「まじメモ」のカラーコードです。「#3f658c」がネイビーを表現してます。とりあえず分からなければ以下のサイトから色を選んで置き換えましょう!

 

www.colordic.org

 

ヘッダーに固定ページを設置

 

f:id:shiro-usagi:20190310180815j:plain

 

この▲の5個並んだ所です!これは「デザイン設定」から「ヘッダー部分」に以下のHTMLを加工して貼り付けるだけなので簡単です。

 

zeno-teal.hatenablog.com


 

ヘッダーにグローバルナビを追加

 

これ、意外だったのが普通にHTMLを使いするだけなんですよねw。

zeno-teal.hatenablog.com

 

まとめ

ちょっと必要なリンクをまとめたまとめページになっちゃいましたね。すみません....。ただそれぞれリンク先に分かりやすく書いてありますので参考にしてください。僕も初めてから1時間かからずにできました。

 

おしまいっ!

 

www.shirousagi.site