ブログのデザイン「Pink Pharmacy」をカスタマイズ

どうもgtwebです。
今日から11月ですねぃ。
ブログやるとなるとやっぱ気になるのデザインですねぇ。

はてなブログには公式テーマがいくつも用意されてるので、
とりあえずレイアウト的に気に入った「Pink Pharmacy」っていうのを設定しました。

ただ名前の通り可愛らしいピンク色で、オレもピンク色は嫌いじゃないけど
どっちかっていうとグリーンのが好きなのでカスタマイズ！

デザインCSSの項目でCSSを追加していじれば色とか装飾部分は変更出来そう。
HTMLそのものを変更は出来ない感じかな？
もうこの記事が上がってる時点では色がグリーンになっていると思います。

デザインCSSに元から書き込まれているものは残したまま、
以下の赤文字の内容を追加しました。

/* Common */

a{color:#62e575;}
a:hover{color:#46ce5a;}

/* Buttons */
.btn{background-color:#62e575;}
.btn:hover{background:#46ce5a;}

/* ヘッダ（グローバルヘッダ） */
#globalheader-container{color:#46ce5a;}

/* title */
#blog-title{background:#62e575;}

/* ヘッダ画像アップロードしてるとき */
.header-image-enable #blog-title,.header-image-only #blog-title{background:#62e575 url(/css/theme/pink-pharmacy/images/header-bg.gif) repeat center 0;}

/* entry */
.entry-title .entry-title-link{color:#62e575;}

/* date */
.page-entry .date a,.page-index .date a{background:#fff url('https://cdn-ak.f.st-hatena.com/images/fotolife/g/gtweb/20181101/20181101145410.gif');}
.page-entry .date .date-day,.page-index .date .date-day{color:#62e575;}
.entry-header-menu a{background:#62e575;}
.entry-header-menu a:hover{color:#fff;background:#46ce5a;}
.entry-header-menu a:before{border-top:15px solid #46ce5a;}

/* entry-footer */
.comment-user-name a{color:#62e575;}
.leave-comment-title{background-color:#62e575;}
.leave-comment-title:hover{background:#46ce5a;}

/* sidebar */
.hatena-module-title{background:#62e575;}
.hatena-module-title:before{border-top:5px solid #62e575;}
.hatena-urllist li a:hover{color:#46ce5a;}
.hatena-module-profile .id a{color:#62e575;}

もしかしたら見落としててピンクのままになってる部分あるかもだけど、
その時は訂正します・・・
あ、ちなみに背景の色はデザイン設定に
「背景色」って項目があったんでそこで変更しました。

記事タイトル横の日付出てるところのちょっと色ついてる部分が
最初全然ピンクから変更されなくて焦った～・・・
よく見たらそこだけ画像gifになってました。
なので、色変更した画像をはてなフォトライフにアップロードして、
そっちを背景画像にするように。これでスッキリ！
なので上のコードももしコピペする時は画像部分だけ
自分のデザインに合わせて変更する必要があります。

ヘッダーのタイトルのバックも背景画像だったけど、
いいの探すのが面倒で（酷い）とりあえず同じグリーンに・・・
またそこはじっくり考えます。

最後にブログ内でコード載せるやり方がわかんなかったんで
参考にさせて貰ったのがこちら
nagoyanofes.hatenadiary.jp