なすみのメモ帳

40代ひきこもりおばさんのハマり事

はてなブログの「見出し」をカスタマイズ！（CSS解説付き）【Minimalism】

ブログデザイン

「はてなブログ「Minimalism」でカスタマイズした見出しのデザイン、簡単、初心者、コピペ

 

ブログ開設しました。

さっそく見出しのデザインを自分好みにカスタマイズしたいと思います！

はてなブログのテーマは「Minimalism」を選びました。

見出しをカスタマイズ

 ミニマリズムのデフォルトの見出し

はてなブログ、Minimalismのデフォルトの見出し

はてなブログ、Minimalismのデフォルトのサイドバーの見出し

デザインを選ぶ

選ぶのは

  • 大見出し
  • 中見出し
  • 小見出し
  • サイドバーの見出し

の計4個のデザイン。

私が今回、参考にしたサイトは二つ。

CSSをコピペする

参考サイトのCSSをコピー、

はてなブログの

「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」

に張り付ける。

はてなブログ、コピペしたCSSのコードを貼り付ける場所

コピペしたCSSのコードを貼り付ける場所

コードの調整

コピペしたコードがはてなブログの見出しになるようにセレクタを書き換えます。

セレクタとは、コードの先頭部分。

はてなブログ、セレクタ、書き換える場所

「セレクタ」の部分、書き換える場所

サルワカさんのCSSでは「h1」、Pa-TuさんのCSSでは「h2」になっている部分です。

はてなブログ見出し

  • 大見出し「h3」
  • 中見出し「h4」
  • 小見出し「h5」
  • サイドバーの見出し「.hatena-module-title」

色を変える

コピペしたコードの色を書き換える。

私がカスタマイズしたデザインのCSSの備忘録

迷いに迷い、これらのデザインにしました。

はてなブログ、Minimalism、カスタマイズした見出しデザイン

記事部分の見出しのデザイン

はてなブログ、Minimalism、カスタマイズしたサイドバーの見出しデザイン

サイドバーの見出しデザイン

大見出し（左側がストライプ）

デザインはシンプルなものにと思っていましたが、左にストライプのあるデザインに撃ち抜かれてしまった。

ストライプの幅と横幅を自分の好みに調整しました。

ストライプの見出し　ストライプの見出し

/*大見出し*/
h3 {
  position: relative;
  padding: 1rem 1rem 1rem 2rem;/*内側の余白*/
  border: 3px solid #364f6b;/*わく線の色*/
  background-image:
      linear-gradient(90deg, transparent 0 20px, #fff 20px),/*左側によせたストライプの幅*/
      repeating-linear-gradient( -45deg, #364f6b, #364f6b 5px, #ffffff 5px, #ffffff 10px );/*ストライプのデザイン*/
}

Pa-TuさんのサイトからCSSをコピペ

  • 外枠の太さを1px太くした
  • 左側のストライプ部分の横幅が太く感じたので幅を狭めた（30px→20px）
  • ストライプが細いと感じたので、別のところで見つけた太いストライプのコードに差し替えた
  • 文字の大きさ、文字の太さ、文字の色のコードは削除

中見出し（左側と下側にライン、背景に薄い色）

文字の下側の余白を調整しました。

/*中見出し*/
h4 {
  padding: 0.4em 0.5em 0.3em;/*文字の上 左右 文字の下の余白*/
  color: #494949;/*文字色*/
  background: #f9fcff;/*背景色*/
  border-left: solid 5px #364f6b;/*左線*/
  border-bottom: solid 3px #767FA5;/*下線*/
}

元々の内側の余白の配分だと文字が少々浮いているように見えるので少しだけ下側の余白を小さくしました。

 

「padding: 0.4em 0.5em;」→「padding: 0.4em 0.5em 0.3em;」

下の線がずれている分だけ、文字の下側の余白が短くなりました。

小見出し（左に2重線）

もとは1本の線でしたが、2重線にしました。

/*小見出し*/
h5 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: double 10px #364f6b;/*左線*/
}

左の2重線を1本の線に戻す場合、

「double」を「solid」に。

「10px」を「5px」に。

サイドバーの見出し（下線）

もともとの設定だと文字が線から浮いているように見えたので、文字の下側の余白を調整しました。

/*サイドバーの見出し*/
.hatena-module-title {
  padding: .5em .5em .1em .5em;/*文字周りの余白*/
  border-bottom: solid 3px #364f6b;/*下線*/
}

文字の下側の余白だけせまくしました。

「padding: .5em;」→「padding: .5em .5em .1em .5em;」

カスタマイズしているときに困ったこと

自分のやりたいデザインによってはコピペだけではできない場合がありました。

私が見出しのデザインを試行錯誤しているときに困ったこととその解決策をまとめました。

サイドバーの見出しを中央揃えにしたい

「.hatena-module-title { }」に以下を追加

text-align: center; /*中央揃え*/

サイドバーの見出しの文字色が変わらない

サイドバーの見出しの背景に色をつけて文字を白くしたかったのに、「アーカイブ」の文字は黒いままで変わっていませんでした。

字を白くしたのに黒いまま（サイドバーの見出し）、はてなブログ

見出しの文字を白くしたのに黒いまま（サイドバーの見出し）

サイドバーの「アーカイブ」はその文字がリンクになっていてクリックできるようになっているため、他のものとは別で文字色の指定をしなければならない。

→「aタグ」の文字色を指定する

.hatena-module-title a {
  color: #fff;/*文字色*/
}

 

 「背景が紺色で、見出しの文字は中央揃え、文字色は白いデザイン」のコード

背景が紺色で見出しが白く文字を中央揃えにしたサイドバーの見出しデザイン、カスタマイズ

.hatena-module-title {
  padding: 0.5em;/*文字回りの余白*/
  color: #ffffff;/*文字色*/
  background: #364f6b;/*背景色*/
  text-align: center;/*中央揃え*/
}
.hatena-module-title a {
  color: #fff;/*文字色*/
}

一度はこのデザインにしたのですがグローバルナビゲーションも紺色にしたので、パソコンでブログを見ると紺色が強くて暗いと感じました。

なのでシンプルな下線に変更しました。

見出しの文字を大きくしたい

大見出し（h3）と中見出し（h4）をもう少し大きくしたい。

見出しの文字サイズ（Minimalism）

  • 大見出し（h3）は「font-size; 140%:」
  • 中見出し（h4）は「font-size; 130%:」
  • 小見出し（h5）は「font-size; 110%:」

 

「h3」に文字サイズを入れても反映されませんでした。

なので、もう一段階詳しいセレクタである「.entry-content h3」に文字サイズを入れました。

.entry-content h3 {
font-size; 160%:/*文字サイズ*/
}

見出しの上下の余白を広げたい

見出しの上下が少し狭く感じたので広げたいと思いました。

目次の外側の余白を広げたいので「margin」を使います。

これも「h3」に入れても反映されなかったので、前述した「.entry-content h3」に入れたら反映されました。

.entry-content h3 {
  font-size: 160%; /*文字サイズ*/
  margin: 3em 0 1.5em;  /*外側（上下）の余白*/
}

セレクタのことはこちらのサイトに説明があります。

見出しの色を一括変換

左がストライプになっている見出しのCSSを参考にしたサイトで使われていた「:root」。

これを活用すれば色を一括で変換できると知りました。

色を変更したくなったときに便利なので使ってみることにしました。

:root {
  --任意の文字aaa: 色のコード;
}

/*色のコードを入れていたところに入れる*/
var(--任意の文字aaa)

私がカスタマイズした見出しのCSS

/*見出し（文字の大きさ、上下の余白）*/
.entry-content h3 {
    font-size: 160%;
    margin: 3em 0 1.5em;
}
.entry-content h4 {
    font-size: 150%;
    margin: 3em 0 1.5em;
}
.entry-content h5 {
    margin: 3em 0 1.5em;
}
/*見出しの色を一括変換*/
:root {
 --main-color: #364f6b;/*見出しの色（紺）*/
}
/*大見出し*/
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 );
}
/*中見出し*/
h4 {
  padding: 0.4em 0.5em 0.3em;/*文字の上 左右　下の余白*/
  color: #494949;/*文字色*/
  background: #f9fcff;/*背景色*/
  border-left: solid 5px var(--main-color);/*左線*/
  border-bottom: solid 3px #767FA5;/*下線*/
}
/*小見出し*/
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をコピペして、色を変更するくらいでカスタマイズはサクッと終わりにするつもりでした。

なのに気になる部分を放置しておけなくて、あれもこれもと調べてかなり時間がかかってしまいました。

さらに、せっかくだからブログの記事にしようと思いついちゃったものだから、囲み枠とかアイコンフォントとかカスタマイズしたりやり方を調べたりでいつ終わるのかと思いました。

大変でしたが、思うようにできたので満足しています。

カスタマイズ楽しい！