【解説】ブログカスタマイズ：「Minimalismã€ãƒ†ãƒ¼ãƒžã®ã‚¹ãƒžãƒ›ã§å¤ªå­—ã«ãªã‚‰ãªã„å•é¡Œã®åŽŸå› ã¨å¯¾ç­–

はてなブログのテーマ「Minimalism」のカスタマイズの第2回目です！

今回は、「Minimalism」テーマは、スマホで見ると、太字に指定したはずが、太字で見えない問題を対処していきます。

なお、他のテーマでは、同様の問題は発生していないようなので、「Minimalism」テーマの問題です。

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策 ← 今回
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する

準備編、準備編2では、はてなブログのHTML/CSSの構造を調べました。

第1回では、最初のカスタマイズなので、Chromeのデベロッパーツールの具体的な使い方についても説明しました。

今回は、スマホで太字にならない問題について、対処方法だけではなく、なぜこの問題が発生しているのかと、どう修正するのが適切なのかを書いていきます。

最初に、今回のまとめとして、外観のビフォーアフターを貼っておきます。

変更前

スマホで太字にならない

変更後

スマホで太字が表示されるようになった

デザインCSSに追記する内容

b,
strong {
  font-weight: 700;
}

「Minimalism」テーマのスマホで太字にならない問題の原因

私は、スマホはAndroidを使っていて、ブラウザはChromeを使っています。

「Minimalism」テーマに変更してから、自分のブログを見てみると、太字に指定したはずのところが太字になっていませんでした。

前回（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）の準備で、「Minimalism」テーマのCSSと、「サンプルエントリー」のHTMLのソースコードは入手済みです。

まず、「サンプルエントリー」のHTMLのソースコードを見て、太字にした部分を探したが、無かったので、サンプルエントリーの先頭の2行について、太字と斜体にして、反映されているかを確認しました（サンプルエントリー - daisuke20240310testのブログ）。その後、再度「右クリック→ページのソースを表示」を行い、テキストファイルに上書き保存し、Visual Source Codeで開き、右クリック→ドキュメントのフォーマットをクリックして整形しておきます。

太字にした部分のHTMLのソースコードを見ると、以下のように、strongタグになっていました。

太字にするとstrongタグになっていた

太字は、本来は、bタグのはずだが、Markdown記法としては、bタグに対応していないらしいです。よって、strongタグに変換されたのだと思います。ですが、strongタグが使われるのは、他のテーマでも同じであり、これが原因ではありません。

では、次に、「Minimalism」テーマのCSSファイルを開いて、strongタグを検索します。一か所だけ見つかり、以下のようになっていました。

b,
strong {
  font-weight: 600;
}

CSSの規格（https://www.w3.org/TR/css-fonts-3/#font-weight-prop）を見ると、font-weightは、700でBOLDとなっています。

つまり、原因は、本来はfont-weight: 700;とするところを、font-weight: 600;としてしまっていることになります。

「Minimalism」テーマのスマホで太字にならない問題の対策

原因が分かったので、あとは、デザインCSSに上書きするコードを書いてやればOKです。

デザインCSSに追記する内容*

b,
strong {
  font-weight: 700;
}

無事に、スマホで太字が表示されるようになりました！

今回は以上です！