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