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

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

はてなブログのテーマMinimalismで、スマホだとstrongタグが表示されない問題を解決!

このブログははてなブログのテーマ「Minimalism」を使わせていただいてます。
シンプルでお気に入りです^^

でもある日、気づいてしまいました。
スマホではstrongタグが表示されてなくない?(^^;

私だけじゃないですよね?
そんなの簡単に直せる感じだったらすみません(^^;
私はようやく直せたので、忘れないうちに記事にしておきたいと思いました。
(ちなみにi-phoneは持っていないので動作未確認です)

 

Minimalismのスマホ表示でstrongタグ(太字)が表示されない問題を解決!

f:id:ku-kahan:20180930002451j:plain

まず、はてなブログではbタグは使えない

9月中旬にライブドアからはてなに引っ越してきました。

www.kurasitotonoe.com

ライブドアブログでは太字はbタグでした。
はてなブログに古い記事をインポートするとstrongタグに変わったようでした。

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

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

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

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

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

 

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

ネットで検索してもなかなか見つけられず・・・
下線をつけて多少の強調をしてました(;^_^A

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

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

 

cssにこの文を入れるだけでOK

そして別のことを調べているうちに、cssで一発で変換してくれる記述をひらめきました!

デザイン>cssのところにこの文を入れます。

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

importantとは重要という意味で、こちらを優先してくれるようです。

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

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

cssの知識のない私が考えついたものなので、間違いがあったら教えてください。

 

まとめ

f:id:ku-kahan:20180921152315j:plain

Point

・Minimalismに限ってのことかわかりませんが、スマホでstrongタグ(太字)が表示されていない(いくつかのブログを確認させていただきましたが、Minimalismだけのような気がします)
・cssで太字を指定してあげることでスマホでも太字が表示されるようになった

知識のない私でも、達人の方たちの色んなカスタマイズを参考に、少しずつこのブログもカスタマイズを進めてます^^
本当にありがたいです。

そのうちその他のカスタマイズも記事にできたらと思います!

最後までお読みいただきありがとうございました。