はてなブログでhタグをカスタマイズする

今回はhタグをカスタマイズする方法を紹介したいと思います。先駆者の方々がいろいろなデザインのCSSを公開してくれているおかげで簡単に装飾することができます。

はてなブログのh2タグについて

markdown記法で記事を書かれている方はあまり関係がありませんが、見たままモードで記事を作っている場合、タグの割り当ては下記のようになりますので、注意しましょう。
・大見出し ⇒ h3タグ
・中見出し ⇒ h4タグ
・小見出し ⇒ h5タグ
タイトルがh1タグなので、h2タグは自分で意図してhtmlタグでコードを書かないと使うことができません。markdownの方は、何も気にせず##とかけばh2タグになるので、問題ないですが、見たままモードの方は注意しましょう。

各タグをカスタマイズする方法

まずは下記の2つのサイトから好きなデザインを探してCSSのコードをコピーします。
(他にもサイトはありますが、下記の2つのサイトが種類が多く好みのデザインが見つかると思い、紹介しています。)

www.notitle-weblog.com

上記サイトの場合は、全てh3タグをカスタマイズするCSSになっています。h2タグをカスタマイズしたい場合は、h3の部分をh2に変えてください。h4やh5も同様です。

saruwakakun.com

上記サイトの場合は、全てh1タグをカスタマイズするCSSになっています。まず、h1の前に.entry-contentを追加しましょう(はてなブログの仕様です)。.h2に変えたい場合は、.entry-content h2、h3に変えたいなら.entry-content h3に変更してください。h4やh5も同様です。

デザインCSSにコードをコピペする

上記で紹介したCSSコードを [デザイン] ⇒ [カスタマイズタブ] ⇒ [デザインCSS] に貼り付けてください。これでhタグのデザインが変わります。
参考に私のページで使っているCSSコードを紹介します。

参考 h2タグです。下記コードを使うとこうなります。

.entry-content h2 {
  position: relative;
  padding: 6px 0 6px 34px;
  color: inherit;
  border-bottom: 2px solid #009688;
}
.entry-content h2::before,
.entry-content h2::after {
  position: absolute;
  background-color: #009688;
  content: '';
}
.entry-content h2::before{
  top: 0;
  left: 14px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.entry-content h2::after{
  top: 18px;
  left: 8px;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

参考 h3タグです。下記コードを使うとこうなります。

.entry-content h3 {
  font-size: 1.3rem;
  color: inherit;
  padding: 1em 0 0 0;
  margin: 0 0 .5em 0;
}
.entry-content h3:before {
  font-family: blogicon;
  content: "\f029";/*アイコンのユニコード*/
  margin-right: .5em;
  color: 
  #009688;
}

タグのデザインが変わらない場合

デフォルトで設定されているhタグのCSSを初期化するコードを追加して試してください(私はこれで問題解決しました。)。初期化コード ⇒ カスタマイズコードの順番で必ず記載してください。

/* h2タグの初期化 */
.entry-content h2,
.entry-content h2::before,
.entry-content h2::after {
  background: none;
  border: none;
  border-radius: 0;
}

/* h3タグの初期化 */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}

hタグのデザインが変わると、ページのイメージが変わって自分の好みのページに近づけることができますね。いろいろと試して、自分の好みのデザインのページを作ってみてください。

トップに戻る