MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

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

URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

はてなブログでテーマによっては太字で設定したのに、スマホで確認すると太字で表示されていないことはありませんか?

当ブログはテーマ『Minimalism』を使わせていただいた時期があり、そのテーマでは太字がスマホでは表示されていなかったので、CSSで対処してみました。

Contents

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

ある日スマホからブログを確認していると、太字に指定した文字が太字になっていない…。

スマホのユーザーが大半な上、見た目もよろしくないので解決策を探しました。
ちなみにi-phoneは持っていないので動作未確認です。

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

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

ライブドアブログでは太字は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だけかもしれません。

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

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

くうか

この記事がどなたかの参考になればとても嬉しいです…!

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる