生涯、学習していきたい

2018年はプログラミング学習に凝っています。

はてなブログの見出しを目立つようにする

こんにちは、いつでも初心者のぽんきちさんです。

今日は、はてなブログの見出しを変えてみたいと思います。

 

f:id:ponnkichi:20171222214009j:plain

[フリー画像素材] ビジネス, オフィス, 家電製品, PC / パソコン, ノートパソコン, コーヒー, 手帳, スマートフォン / スマホ ID:201501140800 - GATAG|フリー画像・写真素材集 4.0

 

最初の状態

デフォルト状態の見出しは、太字になっている状態です。

f:id:ponnkichi:20171216215651p:plain

f:id:ponnkichi:20171215094103p:plain「この状態もそんなに悪くないんだけれど…」

 

でも、できればもっと目立つようにしたいなあ。

「ちょっと太くなっている字」にしか見えないなあ。

 

今回は、見出しをもう少し目立つようにしたいと思います。

 参考にさせていただいたサイト

今回は「NO TITLE」さんの

 

www.notitle-weblog.com

という記事を参考にさせていただきました。

 

こちらのサイトの、「見出しタイプ2」にしてみようと思います。

CSSのことはまだあまりよくわかっていないので、

とりあえずコピペしてみることにします。

とても見やすい色遣いなのですが、

以前に決めたテーマカラーの通りに作ってみたいと思います。

 

f:id:ponnkichi:20171215094103p:plain「えーと、テーマカラーはグレーと水色とピンクだから、」

 

色も変えてみることにしました。

 

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にしてみました。

 

 

 このような感じになりました

f:id:ponnkichi:20171216220030p:plain

大見出しの横のラインが水色になっています。

f:id:ponnkichi:20171216220123p:plain

中見出しの横のラインをピンクにしてみました。

 

うーん、色合いは、思ったよりちょっとぼやっとした感じでしょうか。

でも、色が変わって楽しかった!

記事数がそろってきて、気になるようになるまでは

このままいきたいと思います!

 

あと、中見出しを一段下げたいのですがやり方がわからないので

今後の宿題にしたいと思います。

 

  サイドバーの見出しの色を変える

せっかくなので、サイドバーの見出しの色を変えてみたいと思います。

f:id:ponnkichi:20171216221006p:plain

デフォルトの状態では、チェックマークが付いている感じですね。

太字になっています。

これを、見出しと同じような色合いにしていきたいと思います。

 

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に変えただけで、

あとは大見出しと全く同じです。

 

すると、こうなりました。

f:id:ponnkichi:20171216221341p:plain

こんな感じになりました。

 

 

f:id:ponnkichi:20171215094103p:plain「…。チェックが消えん。」

チェックマークのせいでなんだか狭そう!

キュッとなっています。キュって。

このチェック、いらないのですが消し方がわかりません。

しかもいじり方もよくわからないということでここでギブアップ。

 

しかし、だいぶ見やすくなってきたような気がするので

 今日はここでおしまいにしたいと思います。

楽しかった!