クラシトトノエ*賃貸の階段のあるおうち

メゾネット2LDKのおうちでインテリア・収納・家計を整えて、シンプルライフを目指しています

【はてなブログ】スマホからブログを見ると太字が表示されていない!解決策はコレ【Minimalism】

こんにちは、くうかです!
当ブログははてなブログのテーマ「Minimalism」を使わせていただいています。
とてもシンプルでお気に入りです。
しかしある日、気づいてしまいました。
スマホから見た時に太字が表示されていませんよね?(^^;

 

 

スマホからブログを見ると太字が表示されていない!解決策はコレ

f:id:ku-kahan:20190123142113p:plain

ある日スマホからブログを確認していると、太字に指定した文字が太字になっていない…。
スマホのユーザーが大半な上、見た目もよろしくないので解決策を見つけました。
ちなみにi-phoneは持っていないので動作未確認です。

 

はてなブログではbタグは使えず、strongタグを強制的に使用

当ブログは2018年9月にライブドアからはてなに引っ越してきました。

www.kurasitotonoe.com

 

ライブドアブログでは太字はbタグでした。
はてなブログに記事をインポートすると自動でstrongタグに変わります。

 

編集見たままのモードで編集する時の太字ボタン(B)を押すと、strongタグでhtmlが書かれますよね。
わざわざbタグを打ってみても、自動でstrongに変更されてしまいます。

 

どうやらはてなブログではbタグは使えないようですね!

 

ということでstrongタグをそのまま使っていたわけですが、スマホでブログを確認すると太字で表示されていません(^^;

 

訪問してくださるユーザー様は、スマホの方が圧倒的に多いです。
太字があるかないかで読みやすさって変わりますよね?

 

ではどうしたら太字を出せるのか?

 

スマホで太字を出せるタグを発見

はじめはネットで検索してもなかなか見つけられず、下線をつけたりして多少の強調をしていました。
しかし下線だけでは微妙…。

 

そしてある日、spanのタグを使うと太字が出ることに気づきました。
html編集で、spanタグ内に【font-weight:bold】を入れるとスマホでも太字が出ました。
これをいちいち記事を書いたあとにhtmlで編集してました(^^;
でも・・・

 

とっても面倒くさくて( ;∀;)

 

結論!cssにこの記述を入れるだけでOK

そしてcssで一発で変換してくれる記述がわかりました!

 

デザイン>cssのところにこちらの記述を入れます。

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

 

これで見たまま編集で太字ボタンを押した文字がスマホでも太字で出てくれました( ;∀;)

 

やっと面倒が解消されたよー・・・

 

まとめ

いくつか他のテーマも確認してみましたが、スマホで太字が表示されないのはMinimalismだけかもしれません。

POINT!
  • ブログテーマMinimalismでは、スマホではstrongタグ(太字)が表示されていない
  • cssで太字を指定してあげることでスマホでも太字が表示されるようになった

CSSは仕事ではかじったことがないので少々苦労してしまいました。
はてなブログの諸先輩方の記事のおかげで、解決策を導き出せたと思っています。

 

この記事がどなたかの参考になればとても嬉しいです。
本日も最後までご覧いただき、ありがとうございました。

 

▼テーマMinimalismカスタマイズ

www.kurasitotonoe.com