はてなブログで太字がスマホで表示されない場合の対処方法

2024年4月12日2024年5月9日

当ページのリンクには広告が含まれています。

はてなブロガーの皆さん。ブログ記事を書いたあと、スマホでもチェックしていますか？

私もつい忘れてしまうことがありますが、ある日チェックした際に太字で設定したはずの箇所が反映されていないことに気づきました。

当ブログは人気テーマ「Minimalism」を使わせていただいた時期があり、Minimalismでは太字がスマホでは表示されていないことがわかり、CSSで対処しました。

くうか

簡単なCSSですので、ぜひ参考にしてみてください。

この記事はこんな人におすすめ

＼こちらもおすすめ／

はてなブログでは太字ボタンを押して太字に変換すると、htmlではstrongタグが使われます。

しかしstrongタグでは、Minimalismではなぜかスマホに太字が表示されません。

いくつかのテーマで試してみましたが、この現象が出るのはどうやらMinimalismだけのようです。

結論は、スマホでも太字で表示させたい場合には別途CSSを追加する必要があるということです。

Androidにて動作確認済ですが、CSSの追加は自己責任の上でおこなってください。

はてなブログ管理画面の【デザイン】→【css】のところに以下のCSSを追加します。

/* strongタグを変える */
article strong{
font-weight:bold;
}

１行目の「/*strongタグを変える*/」の部分はコメントです。

スラッシュとアスタリスクで囲んだ部分はテキストで説明文を入れておきましたが、なくても大丈夫です。

これで見たまま編集で太字ボタンを押した文字がスマホでも太字で出てくれるようになります。

くうか

やっとできたよー！！

CSSで置き換えることで太字は表示されますが、strongタグ本来の意味での”より強調したい箇所”という意味は失われることになります。

強調から、見た目での見やすさ、という意味に変わるので、CSSを使用する場合はその辺りをご了承いただければと思います。

くうか

見た目を取るか、強調を取るかという選択肢になります。

【まとめ】はてなブログでスマホで太字が表示されない場合の対処方法

まとめ

CSSは仕事ではかじったことがなく調べまくったので、少々苦労してしまいました。

私と同じように困っていた方がいらっしゃって、この記事を参考にしてくれたという報告がいくつかあり嬉しかったです。

くうか

困っていたらぜひ参考にしてみてくださいね。

この記事の内容を含めたフォント関連のカスタマイズを、以下の記事にまとめているのでこちらもぜひ。