ブログカスタマイズの第4回目です!
今回は、見出し(大見出し、中見出し、小見出し)をカスタマイズしていきます。
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
「Minimalism」テーマの見出しは、シンプル過ぎて、大見出し、中見出し、小見出しの差が分かりにくいです。
大見出しは、周りを囲う感じにして、中見出しは左に縦線、小見出しはアンダーラインだけ、のように、区別がつくようにしていきます。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
ブログカスタマイズのまとめ
最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。
変更前
変更後
デザインCSSに追記する内容
.entry-content h3 {
padding: 0.5em;
background: #404040;
color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
.entry-content h4 {
padding: 0.5em;
background: #f8f8f8;
border-left: solid 5px black;
}
.entry-content h5 {
padding: 0.5em;
border-left: solid 5px black;
border-bottom: solid 5px black;
}
準備物
下記準備物の入手方法については、第1回目の事前準備(【解説】はてなブログ:「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ)で説明しています。
事前準備
・ テスト用ブログに投稿した「サンプルエントリー」を開いておく
(デベロッパーツールを使うため)
・テスト用ブログの管理画面から、
「 デザイン→ カスタマイズをクリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル
「Minimalism」テーマの見出しのカスタマイズ
見出しのHTMLを把握する
【解説】はてなブログのHTML/CSSの構造を解析する(2) - daisukeの技術ブログで、目次も含めて、はてなブログの大まかなパーツの配置を特定しました。
下図は、「サンプルエントリー」のHTMLのソースファイルで、<h[0-9]
で正規表現で検索した結果です。
サンプルエントリーの見出しがh2タグな件
ここで一つ気づいたことがあります。はてなブログの大見出しは、見出しボタン(アイコン)を使って書いていると、h3タグ
が使われます。はてなブログの見出しは、そういうシステムになっています。
しかし、はてなブログが提供している「サンプルエントリー」は、Markdown記法で書かれており、##
で書かれていて、つまり、h2タグ
で書かれています(理由が知りたくて、Web検索でh2タグを検索したが、「はてなブログの大見出しはh2タグ」騒動しか引っかかりません)。
これは、「普段もh2タグを使った方がいい」ということなのでしょうか?(結局理由は分かりませんでしたが、このページの言いたいことではないので、これ以上は追及しないことにします)
このままでは、見た目の調整が失敗するかもしれないので、投稿した「サンプルエントリー」を再編集して、大見出しに相当するところは、h2タグからh3タグに書き直しました。
これに伴い、準備していた「サンプルエントリー」のHTMLのソースファイルも更新しました。
「Minimalism」の見出しのCSSを理解する
具体的な進め方は、(【解説】はてなブログ:「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ)で書いたので、その通りに進めていきます。
「Minimalism」テーマのCSSのソースファイルのh3タグ
が5か所あります。
最初の3つは、以下(H3タグだけを抽出しましたが、他のHタグも同じ)であり、正確な意図は分かりませんが、おそらく、見出しにリンクを設定した場合(普通はそういうケースは少ないと思う)に、他の文字色(黒)と同じ色にしたい(つまりリンクを貼った場合でも、リンクのような外観にはしたくない)ということだと思います。
h3 a,
h3 a:hover,
h3 a:visited {
color: #333333;
text-decoration: none;
}
残り2つは、以下(H3タグだけを抽出したが、他のHタグも同じ)であり、マージン、行間、フォントサイズの設定です。
.entry-content h3 {
margin: 1.3em 0 0.8em 0;
line-height: 1.5;
font-size: 140%;
}
というわけで、ほとんど飾りは付いてない状態です。
「Minimalism」の見出しをカスタマイズする
見出しはページのイメージを大きく変える要素なので、1回で決まらないと思います。
よって、とりあえず、気に入った感じに変えてみて、様子を見ようと思います。
.entry-content h3 {
padding: 0.5em;
background: #404040;
color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
.entry-content h4 {
padding: 0.5em;
background: #f8f8f8;
border-left: solid 5px black;
}
.entry-content h5 {
padding: 0.5em;
border-left: solid 5px black;
border-bottom: solid 5px black;
}
※2024/3/31追記:h4タグのbackground: #f8f8f8;
を、少し色を濃く(background: #f0f0f0;
)しました
おわりに
あとは、はてなブログのブログの管理から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」を開き、末尾に「デザインCSSに追記する内容」を貼り付けて、変更を保存すれば、ブログに反映されます。
今回は以上です!
最後までお読みいただき、ありがとうございました。