はてなブログで太字がスマホで表示されない場合の対処方法
こんにちは、ゆるミニマリスト主婦のくうかです。
ブログ記事を書いたあと、スマホでもチェックしていますか?
私も時々忘れてしまうのですが、ある日チェックした際に太字で設定したはずの箇所が反映されていないことに気づきました。
当ブログは人気テーマ「Minimalism」を使わせていただいた時期があり、そのテーマでは太字がスマホでは表示されていないことがわかり、CSSで対処しました。
簡単なCSSですので、ぜひ参考にしてみてください。
- はてなブログでMinimalismを使用している
- スマホでチェックしたら太字が表示されていなかった
\ こちらもおすすめ /
はてなブログで太字がスマホで表示されない場合の対処方法
はてなブログでは太字ボタンを押して太字に変換すると、htmlではstrongタグが使われます。
しかしstrongタグでは、Minimalismではなぜかスマホに太字が表示されません。
いくつかのテーマを試してみましたが、この現象が出るのはどうやらMinimalismだけのようです。
【結論】スマホでも太字を表示させるにはCSSを追加する
管理画面の【デザイン】→【css】のところに以下のCSSを追加します。
/* strongタグを変える */
article strong{
font-weight:bold;
}
1行目の「/*strongタグを変える*/」の部分はコメントです。
スラッシュとアスタリスクで囲んだ部分はテキストで説明文を入れておきましたが、なくても大丈夫です。
これで見たまま編集で太字ボタンを押した文字がスマホでも太字で出てくれるようになります。
やっとできたよー!!
【注意事項】本来のstrongの意味は失われる
CSSで置き換えることで太字は表示されますが、strongタグ本来の意味での”より強調したい箇所”という意味は失われることになります。
強調から、見た目での見やすさ、という意味に変わるので、CSSを使用する場合はその辺りをご了承いただければと思います。
【まとめ】はてなブログでスマホで太字が表示されない場合の対処方法
- ブログテーマMinimalismでは、スマホではstrongタグ(太字)が表示されない
- CSSで太字を指定してあげることで、スマホでも太字が表示されるようになった
CSSは仕事ではかじったことがないので少々苦労してしまいました。
はてなブログの諸先輩方の記事のおかげで、解決策を導き出せたと思っています。
この記事がどなたかの参考になればとても嬉しいです…!
コメント