はてなブログのテーマ「Minimalism」のカスタマイズの第2回目です！
今回は、「Minimalism」テーマは、スマホで見ると、太字に指定したはずが、太字で見えない問題を対処していきます。
なお、他のテーマでは、同様の問題は発生していないようなので、「Minimalism」テーマの問題です。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
準備編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タグになっていました。
太字は、本来は、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; }
無事に、スマホで太字が表示されるようになりました！
今回は以上です！
