はてなブログの見出しを目立つようにする
こんにちは、いつでも初心者のぽんきちさんです。
今日は、はてなブログの見出しを変えてみたいと思います。
最初の状態
デフォルト状態の見出しは、太字になっている状態です。
「この状態もそんなに悪くないんだけれど…」
でも、できればもっと目立つようにしたいなあ。
「ちょっと太くなっている字」にしか見えないなあ。
今回は、見出しをもう少し目立つようにしたいと思います。
参考にさせていただいたサイト
今回は「NO TITLE」さんの
という記事を参考にさせていただきました。
こちらのサイトの、「見出しタイプ２」にしてみようと思います。
CSSのことはまだあまりよくわかっていないので、
とりあえずコピペしてみることにします。
とても見やすい色遣いなのですが、
以前に決めたテーマカラーの通りに作ってみたいと思います。
「えーと、テーマカラーはグレーと水色とピンクだから、」
色も変えてみることにしました。
cssの最後に、これをはりつけます。
/* 見出し1 */
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 16px solid #c1e0ff;
border-bottom: 1px solid #293b6a;}
左側のラインを、水色に。（#c1e0ff）
下のラインを紺色にしました。（#293b6a）
ついでに、中見出しもつけます。
大見出しの横のラインを水色にしたので、
中見出しはピンクにすることにしました。
/* 見出し2 */
.entry-content h4 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 12px solid #ffe6fb;
border-bottom: 1px solid #293b6a;
}
ピンクは#ffe6fbです。
横のラインの太さは、水色の大見出しは16pxに、
ピンクの中見出しは12pxにしてみました。
このような感じになりました
大見出しの横のラインが水色になっています。
中見出しの横のラインをピンクにしてみました。
うーん、色合いは、思ったよりちょっとぼやっとした感じでしょうか。
でも、色が変わって楽しかった！
記事数がそろってきて、気になるようになるまでは
このままいきたいと思います！
あと、中見出しを一段下げたいのですがやり方がわからないので
今後の宿題にしたいと思います。
サイドバーの見出しの色を変える
せっかくなので、サイドバーの見出しの色を変えてみたいと思います。
デフォルトの状態では、チェックマークが付いている感じですね。
太字になっています。
これを、見出しと同じような色合いにしていきたいと思います。
cssのところに、以下のようにはりつけました。
/* サイドバー */
.hatena-module-title {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 16px solid #c1e0ff;
border-bottom: 1px solid #293b6a;
}
.entry-content h3 のところを
.hatena-module-titleに変えただけで、
あとは大見出しと全く同じです。
すると、こうなりました。
こんな感じになりました。
「…。チェックが消えん。」
チェックマークのせいでなんだか狭そう！
キュッとなっています。キュって。
このチェック、いらないのですが消し方がわかりません。
しかもいじり方もよくわからないということでここでギブアップ。
しかし、だいぶ見やすくなってきたような気がするので
今日はここでおしまいにしたいと思います。
楽しかった！
