はてなブログの見出しデザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】
はてなブログのテーマを「Minimalism」にしました。
Minimalismは元のデザインがシンプルなので、自分の好みのデザインに変更しやすいと思ったからです。
さっそく見出しのデザインをカスタマイズしてみました。
見出しのデザインを考えたとき、記事本文やサイドバー本文の文字の大きさとのバランスも考えた方がいいと思い、それらも調整しました。
- 見出しをカスタマイズ
- カスタマイズしているときに困ったこと
- カスタマイズした見出しのCSS
- カスタマイズしたデザインのCSS備忘録
- 記事本文・サイドバー本文の文字の大きさ調整
- おまけ：以前カスタマイズした見出しのCSS
- 見出しのデザインを考えてわかったこと
- おわりに
見出しをカスタマイズ
ミニマリズムの元の見出しのデザインはとってもシンプルです。
ミニマリズムの見出し
デザインを選ぶ
ネットで検索し、自分の好みの見出しのデザインを探しました。
選ぶのは
- 大見出し
- 中見出し
- 小見出し
- サイドバーの見出し
の計4個のデザイン。
私が参考にしたサイトは以下の二つです。
CSSをコピペする
参考サイトのCSSをコピー、
はてなブログの
「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」
に張り付ける。
コードの調整
コピペしたコードがはてなブログの見出しになるようにセレクタを書き換えます。
セレクタとは、コードの先頭部分。
サルワカさんのCSSでは「h1」になっている部分です。
はてなブログ見出しのセレクタ
- 大見出し「h3」
- 中見出し「h4」
- 小見出し「h5」
- サイドバー見出し「.hatena-module-title」
色を変える
コピペしたコードの色を書き換えるときの参考サイト
カスタマイズしているときに困ったこと
自分のやりたいデザインによってはコピペだけではできない場合がありました。
私が見出しのデザインを試行錯誤しているときに困ったこととその解決策をまとめました。
見出しの文字を大きくしたい
Minimalismの見出しの文字サイズ
- 大見出し（h3）は「font-size; 140%:」
- 中見出し（h4）は「font-size; 130%:」
- 小見出し（h5）は「font-size; 110%:」
- サイドバー見出し（.hatena-module-title）は「font-size; 120%:」
大見出し（h3）を少し大きくしたかったのですが、「h3」に文字サイズを入れても反映されませんでした。
なので、もう一段階詳しいセレクタである「.entry-content h3」を追加し、そこに文字サイズ「font-size; 150%:」を入れました。
.entry-content h3 {
font-size; 150%: /*文字サイズ*/
}セレクタのことはこちらのサイトに説明があります。
見出しの余白について（marginとpadding）
- 緑の部分が「padding」
見出しの文字の周りの余白を調整する場合は「padding」
例えば、文字と下線を近づけたいとか、遠ざけたいというとき。
- オレンジの部分が「margin」
見出しと文章の余白を調整する場合は「margin」
見出しの余白（margin）を広げたい
見出しと本文の距離が少し狭く感じたので広げたいと思いました。
目次の外側の余白を広げたいので「margin」を使います。
これも「h3」に入れても反映されなかったので、前述した「.entry-content h3」に入れたら反映されました。
.entry-content h3 {
font-size: 150%; /*文字サイズ*/
margin: 3em 0 1.5em; /*外側（上下）の余白*/
}サイドバーの見出しを中央揃えにしたい
「.hatena-module-title { }」の括弧内に追加
.hatena-module-title {
text-align: center; /*中央揃え*/
}サイドバーの見出しの文字色が変わらない
サイドバーの見出しの背景に色をつけて文字を白くしたかったのに、「アーカイブ」の文字は黒いままで変わりませんでした。
サイドバーの「アーカイブ」はその文字がリンクになっていてクリックできるようになっているため、他のものとは別で文字色の指定をしなければならないようです。
→「aタグ」の文字色を指定する
.hatena-module-title a {
color: #fff; /*文字色*/
}「背景が紺色で、見出しの文字は中央揃え、文字色は白いデザイン」のサイドバーの見出しのコード
.hatena-module-title {
padding: 0.5em; /*文字回りの余白*/
color: #fff; /*文字色*/
background: #364f6b; /*背景色*/
text-align: center; /*中央揃え*/
}
.hatena-module-title a {
color: #fff; /*文字色*/
}見出しの色を一括変換したい
色を変更したいとき、一つ一つ変更するのは面倒だなと思ったので一括で変更する方法がないか探しました。
「:root」
これを活用すれば色を一括で変換でき、便利です。
:root {
--任意の文字: 色のコード;
}
/*色のコードを入れていたところに入れる*/
var(--任意の文字)カスタマイズした見出しのCSS
私のブログには主張の強くないシンプルなデザイン・淡い色があうかなと思ってそのようなデザインにしました。
/*見出し*/
/*h3 大見出し*/
.entry-content h3 {
font-size: 150%; /*文字サイズ*/
margin: 4em 0 1.3em; /*見出しの上下の余白*/
}
h3 {
padding: 0.8em 0.6em; /*文字周りの余白(上下 左右)*/
color: #606060; /*文字色*/
background: #fff9fc; /*背景色*/
border-left: solid 7px #f4c0c2; /*左線（実線 太さ 色）*/
}
/*h4 中見出し*/
.entry-content h4 {
margin: 3em 0 1.3em 0; /*見出しの上下の余白*/
}
h4 {
padding: 0.3em 0.5em; /*文字周りの余白(上下 左右)*/
color: #606060; /*文字色*/
border-left: solid 6px #f4c0c2; /*左線*/
border-bottom: solid 3px #f4c0c2; /*下線*/
}
/*h5 小見出し*/
.entry-content h5 {
margin: 2em 0 1.3em 0; /*見出しの上下の余白*/
}
h5 {
color: #606060; /*文字色*/
padding: 3px 15px; /*文字周りの余白(上下 左右)*/
display: block;
border-left: 7px solid #f4c0c2; /*二重線左側（太さ 実線 色）*/
position: relative;
}
h5:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 0;
width: 3px; /*二重線右側の太さ（幅）*/
height: 100%;
background: #f4c0c2; /*二重線右側の色*/
}
/*サイドバータイトル*/
.hatena-module-title {
border-bottom: solid 4px #f4c0c2; /*線の種類（実線）太さ 色*/
color: #606060; /*文字色*/
font-size: 125%; /*文字サイズ*/
padding: 0 0 3px 10px; /*文字回りの余白(下 左)*/
}
.hatena-module-title a { /*リンクになっているタイトル*/
color: #606060; /*文字色*/
}線の色は赤字、大見出しの背景色は青字
カスタマイズしたデザインのCSS備忘録
大見出し（左側にライン、背景に薄い色）
よくあるデザインですが、シンプルだけど存在感があって見出しが目立つと思いこのデザインにしました。
元のCSS（引用サイト「サルワカ」）
h1 {
padding: 0.5em; /*文字周りの余白*/
color: #494949; /*文字色*/
background: #fffaf4; /*背景色*/
border-left: solid 5px #ffaf58; /*左線（実線 太さ 色）*/
}変更後のCSS
/*h3 大見出し*/.entry-content h3{ font-size: 150%; /*文字サイズ*/ margin: 4em 0 1.3em 0; /*見出しの上下の余白*/ } h3 { padding: 0.8em 0.6em; /*文字周りの余白(上下 左右）*/ color: #606060; /*文字色*/ background: #fff9fc; /*背景色*/ border-left: solid 7px #f4c0c2; /*左線（実線 太さ 色）*/ }
- 「h1」からはてなブログの大見出しのセレクタである「h3」に変更
- ミニマリズムの元の大見出しの文字サイズは140%ですが少し大きくしたくて「h3」に「font-size」を追加しましたが反映されませんでした。なので、一つ詳しいセレクタ「.entry-content h3」を追加し、そちらに文字サイズを入れました。
- 見出しと文章の間を広げたかったので「margin」を追加
- 文字サイズはそのままで薄ピンクの部分を少し広げたかったので「padding」で調整
- 文字の色「color」はそのままの黒だと印象が強すぎると感じたので、少々淡い黒に変更
- 背景の色「background」を薄ピンクに変更
- 見出しの先頭の縦線「border-left」を少し太くして、色もピンクに変更
中見出し（左側と下側にライン）
これも見出しによく使われるデザインだと思います。
元のCSS（引用サイト「サルワカ」）
h1 {
padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
color: #494949; /*文字色*/
background: #f4f4f4; /*背景色*/
border-left: solid 5px #7db4e6; /*左線*/
border-bottom: solid 3px #d7d7d7; /*下線*/
}変更後のCSS
/*h4 中見出し*/.entry-content h4{
margin: 3em 0 1.3em 0; /*見出しの上下の余白*/
}
h4 {
padding: 0.3em 0.5em; /*文字周りの余白(上下 左右)*/
color: #606060; /*文字色*/
border-left: solid 6px #f4c0c2; /*左線*/
border-bottom: solid 3px #f4c0c2; /*下線*/
}- 「h1」からはてなブログの中見出しのセレクタである「h4」に変更
- 中見出しと文章の距離を調整するため「margin」を追加、「h4」に追加しても反映されなかったので、もう一つ詳しいセレクタ「.entry-content h4」を追加
- 文字周りの余白「padding」（上下）を少し狭くした
- 見出しの文字の色「color」を少し淡い黒に変更
- 見出しの先頭の縦の線「border-left」を少し太くし、線の色を変更
- 見出しの下線部分「border-bottom」の線の色を変更
- もとのCSSでは背景の色が指定「background: #f4f4f4;/*背景色*/」されていましたが、今回は必要ないので削除
小見出し（左に2重線：2本の異なる太さの線）
小見出しを使うことはほぼないと思いますがせっかくなので設定しました。
左側に線があるデザインはいくつか種類がありますが（線1本、2重線：線の太さが同じ）、今回は左右の太さが違うデザインにしてみました。
元のCSSは「初心者のためのブログ講座」参照
（「デザインを選ぶ」という中見出しのところにリンクを貼っています）
解説は省略
サイドバーの見出し（下線）
サイドバーはシンプルな下線にしました。
元のCSS（引用サイト「サルワカ」）
h1 {
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px black;
}変更後のCSS
/*サイドバータイトル*/.hatena-module-title a
.hatena-module-title { border-bottom: solid 4px #f4c0c2; /*線の種類（実線）太さ 色*/ color: #606060; /*文字色*/ font-size: 125%; /*文字サイズ*/ padding: 0 0 3px 10px; /*文字回りの余白(下 左)*/ }{ /*リンクになっているタイトル*/ color: #606060; /*文字色*/ }
- 「h1」から「.hatena-module-title」へ変更
- 下線の太さ「border-bottom」を少し太くし、色を変更
- 文字の色「color」を他の見出しと同じ色に変更
- 文字サイズ「font-size」を少し大きく変更
- タイトルを少しだけ右にずらし、タイトルと線の距離を少しあけた。「padding」で調整
- リンクになっているタイトル「.hatena-module-title a 」の色「color」を変更
ぱっと見ただけではわかりにくいですが、サイドバーのタイトルのうち「月刊アーカイブ」と「最新記事」はリンクになっています。
他のタイトルは「.hatena-module-title」で文字色等を変更できますが、
リンクになっているタイトルは「.hatena-module-title a」にしないと文字色等が変更できません。
記事本文・サイドバー本文の文字の大きさ調整
見出しの文字サイズを考えるとき、記事本文やサイドバー本文の文字の大きさも一緒に考えないとバランスが悪いなと思い、本文の文字サイズも自分の好みに変更しました。
Minimalismは文字が小さめに設定されています。
それがMinimalismの特徴であり、おしゃれなところなのですが、私は読みやすさ優先で少し大きくしました。
記事本文の変更前後
サイドバーの変更前後
/*記事の文字設定*/
.entry-content p {
font-size: 16px; /*文字サイズ*/
line-height: 1.7; /*行間*/
margin: 1em 0 1.7em 0; /*段落の余白(上下)*/
letter-spacing: 0; /*文字間*/
}
/*サイドバーの文字設定*/
.hatena-module-profile .profile-description { /*プロフィールの本文*/
font-size: 105%;
}
.hatena-module-body { /*プロフィール以外の本文*/
font-size: 105%;
}
.hatena-urllist li a { /*リンクになっている文字部分*/
font-size: 105%;
}
.hatena-urllist li a:hover { /*リンク部分をマウスオーバーしたとき*/
color: #c0c0c0; /*文字の色*/
}サイドバーの本文部分は、プロフィールとその他で別々のセレクタを使うことがわかりました。
記事本文の文字サイズは以下のサイトを参考にしました。
おまけ：以前カスタマイズした見出しのCSS
こちらも頑張ったので、お蔵入りにさせるのはもったいないと思いのせました。
大見出しのデザインがかわいくてお気に入りです。
/*見出しの色を一括変換*/ :root { --main-color: #364f6b;/*見出しの色（紺）*/ } /*大見出し*/ .entry-content h3 { font-size: 160%; margin: 3em 0 1.5em; } h3 { position: relative; padding: 1rem 1rem 1rem 2rem; border: 3px solid var(--main-color); background-image: linear-gradient(90deg, transparent 0 20px, #fff 20px), repeating-linear-gradient( -45deg, var(--main-color), var(--main-color) 5px, #ffffff 5px, #ffffff 10px ); } /*中見出し*/ .entry-content h4 { font-size: 150%; margin: 3em 0 1.5em; } h4 { padding: 0.4em 0.5em 0.3em; /*文字の上 左右 下の余白*/ color: #494949; /*文字色*/ background: #f9fcff; /*背景色*/ border-left: solid 5px var(--main-color); /*左線*/ border-bottom: solid 3px #767FA5; /*下線*/ } /*小見出し*/ .entry-content h5 { margin: 3em 0 1.5em; } h5 { padding: 0.25em 0.5em; /*上下 左右の余白*/ background: transparent; /*背景透明に*/ border-left: double 10px var(--main-color); /*左線*/ } /*サイドバーの見出し*/ .hatena-module-title { padding: .5em .5em .1em .5em; /*文字周りの余白*/ border-bottom: solid 3px var(--main-color); /*下線*/ }
色を変更したい場合は青字の部分を変更すると一括で変更されます。
見出しのデザインを考えてわかったこと
はじめはちょっと凝ったデザインにしようかなって思い、おまけでのせた紺色の見出しデザインにしました。
試行錯誤してやっとこれでよいと思える形になったのですが、自分のブログにはなんだか不釣り合いのように感じました。
この記事のような何かを説明する記事ならいいのですが、普段私が書いているような文章だけの記事には派手に思えてしっくりきません。
いろいろなブログ（下記の参考サイト）を見にいってみたのですが、意外とみなさんシンプルな見出しを使っていると知りました。
なので、派手ではないシンプルなデザインにしようと選びなおし、デザインを少し変更してみました。
私の普段のブログにちょうどいいデザインになったと思います。
おわりに
はじめはCSSをコピペして、色を変更するくらいでカスタマイズはサクッと終わりにするつもりでした。
しかし、やり始めるとあれもこれもと欲が出て、かなり時間がかかってしまいました。
私以外の人が見ても気が付かないほんの少しの違いにこだわってしまい、自分で自分の首をしめるはめに。
そして、せっかくだからブログの記事にしようと思いついちゃったものだから、囲み枠をカスタマイズしたり、蛍光ペンで線を引くやり方を調べたりで、当初の目測よりもだいぶ時間がかかってしまいました。
大変でしたが、思うようにできたので満足しています。
カスタマイズ楽しい！
※このブログはCSSのことを何も知らなかった私がネットで情報をかき集めて書いています。
説明が間違っていることもあるかもしれませんのでご容赦ください。
記事完成後に文字の大きさや色など微調整している部分もあり、ブログにのせたCSSと私のブログの現状のデザインが異なる部分もあります。
- カスタマイズの記事
はてなブログの目次デザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】
はてなブログのグローバルメニューをカスタマイズ（CSSコピペで簡単！）【Minimalism】
はてなブログの記事一覧をカスタマイズ（CSS解説付き）【Minimalism】
