はてなブログの見出しのデザインをカスタマイズしてみました

はてなブログの大見出し(h3)を、ステッチ風にしてみました。

f:id:yuzumochi3:20171114225552j:plain

実装自体は簡単だったのですが、使用しているブログテーマと干渉するようで、思うように表示されず苦労しました。

というわけで、今回はその顛末を書いてみます。

ステッチ風の見出しをステッチ風にする

実装はかんたん、コピペだけでOKです。

次のコードを、はてなブログの管理画面から「デザイン」→「カスタマイズ」とすすみ、「デザインCSS」に貼ります。

.entry-content h3{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

 

上のコードを貼っても反映されなかったり、表示がおかしくなる場合は、次のコードを、先ほどのコードの前に貼ります

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}

どちらも大見出し(h3)用のコードですので、中見出しや小見出しで使う場合は、「h3」の部分を変更します。

中見出しなら「h4」に、小見出しなら「h5」にすればOKです。リセット用のコードのほうは、変える箇所が複数あるので、間違えないようにしてくださいね。

ブログテーマ「Blooklyn」との相性

Blooklynのレスポンシブ表示が壁でした。

通常であれば、上に紹介したところ方法でキレイに表示されますが、私の場合はここで問題が発生しました。

はてなブログのテーマ「Blooklyn」を使っているのですが、スマホで見るとこんなふうになっていました。

f:id:yuzumochi3:20171114233317j:plain 

なんと見出しの左右が切れています。タブレットでみても同じ様子です。

レスポンシブ表示の問題か?

「Blooklyn」はレスポンシブ表示に癖があるのか、画面端が切れる傾向があるようです。

f:id:yuzumochi3:20171114234533j:plain

ふきだしアイコンも、画面端に接する部分が切れてしまいます。

対策はいろいろあると思いますが、私の場合は、

  • 表示を画面端から離す
  • 端が切れても問題のないデザインにする

ことで対応しました(かなり苦しまぎれ)。

www.yuzumochi.com

まとめ

見出しが変わると、ブログのイメージもガラッと変わります。

Blooklynの場合、見出しのリセットをかけないと、前の見出しと合体してしまうことがあります。リセットは必須ですね。