はてなblogをカスタマイズ。暗めの背景を使いたいとき、タイトルとサイドバーの文字色などなど。

みなさまこんばんは96です。

blogをすこしづつカスタマイズしているので、参考になれば幸いです。

はてなブログってカスタマイズしたいですよね。最初のほんとにシンプルなのも捨てがたいですが、やっぱり見やすいblogとかにあこがれてしまいませんか。

私はもともと某通販サイトのECサイトのコーディングや、画像の修正などを行っていました。

また、小さい事業所のPR用のページをいくつかつくったりもしていました。

blogのカスタマイズはそのままhtmlコーディングの練習にもなるので、おすすめです。

さて、今回は自分のはてなブログのカスタマイズです。

今回のポイントは暗めの背景をつかいたいときに、文字の色が見えないじゃん、という場合です。

さっそくですがまず私のブログの背景は、はてなのもとからある背景で、笹をテーマにした背景です。くらい。。。

まずは、はてなブログバーのカスタマイズから。

①はてなブログバー

ここは私はあんまり目立たせる気がなかったので、より控えめにしました。

wakaba-mafin.hatenablog.com

若葉さんのblogがわかりやすいですね。

私はこんなふうにしました。

iframe backgroundを指定して色などを変更するには

idタグで#globalheader-containerと指定してあげれば任意に変更できます。

idタグとはhtmlの要素を指定してcssと呼ばれるスタイル、つまり見た目を調整できる言語です。

#globalheader-container{background-color:rgba(60,179,113,0.5);
　　　　　　　　　　　　}
#blog-description {font-size:24px;
                   color:#FFFF;
}
#title a{color:#FFFF;}

次にでてくる#blog-descriptionはブログの説明ですね。

最後に#titleこれはそのとおりタイトルですね。ここ順番が逆のほうがよかったかもしれません。

②サイドバー

次に、私みたいに背景画像がやや暗いため、サイドバーも色を変えたいと思っていらっしゃるかたもいるかもしれません。

そういうときはclassタグの.hatena-module-title及びその子要素をCSSで指定してあげて、色を変更できます。

また、同じくclassタグの.hatena-urllist li aと子要素まで指定してあげると、

↓

このようにリンクの色を変えることができます。

子要素まで指定してあげないとCSSを変更できないので注意が必要です。

子要素とは親要素の中に入れ子の状態である要素のことで

リンクタグに使われるaタグはインライン要素とよばれていますが、blockタグであるdiv要素などを入れ子にすることはできません。逆はもちろん可能です。

私はこんなふうにしました。

.hatena-module-title{color:#FFFF;}
.hatena-module-title a{color:#FFFF;}
.hatena-urllist li a{color:#FFFF;}

 classタグはidタグと違って、複数の要素に指定することができるのでとても便利です。

ただ先頭に数字をいれることはできないんです。よく、いっぱいclassタグつけるから単語じゃなくて数字だけで管理すれば楽勝じゃん。とおもって昔ハマりました。

qiita.com

こちらの記事が参考になります。

 よかったら、こちらの本もご参考ください。

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

まだカスタマイズしだしたばっかりなので、これから少しずつ直していきます。