スマホのサイドバーにプロフィール文が表示されない!CSSの不具合対処方法

ブログ / CSSのこと
スポンサーリンク

初めまして!Hurariと申します。

今回はWordPressで作成したプロフィールがPCでは表示されているのに、スマホではプロフィール文が消えているという不具合対処方法をご紹介します。

こちらを解消するまでにネットやSNS等を調べてみたのですが、とても簡単な方法で解決できたので備忘録として書いています。

少しでも、サイトを運営する皆さんの役に立てれば幸いです。

この記事におすすめの方は?

  • スマホのサイドバーにプロフィールを設定しているが表示不具合のある方
  • PC上ではプロフィールが正常なのにスマホだとなんだかおかしいという方
スポンサーリンク

スマホにプロフィール文が表示されない

まず、私の画面上でどのような不具合が発生していたかというと、PC上では表示されているプロフィールが、スマホだと表示されていないという状態になっていました。

PCでの表示画面
スマホでの表示画面

このように、スマホではまるまるプロフィール文が消えてしまっています。

スマホでブログをご覧になる方も非常に多く、これではどういう人が書いたのか伝わらないので、あまりよろしくないですよね。

早速、解決していきましょう。

スポンサーリンク

不具合の対処方法

下記のCSSを追加するだけで不具合が解消できました。

#sidebar-menu-content {
  color: #333333; /*使用しているフォントの色を指定*/
}

こうすることで、PC同様のプロフィールが表示されるようになりました。

修正後のスマホ表示画面

ここまでの手順詳細をご説明していきます。

CSS編集の手順

WordPress「外観」→「カスタマイズ」を開く

カスタマイズを開くと下記画面のように表示されるかと思います。
ここでは変更がわかりやすいように、オレンジ部分の一番右(スマホ表示)を選択しています。

※「カスタマイズ」よりCSSを追加していますが、「テーマエディター」に追加してもOKです。

CSSを追加する

先程のコードを追加します。これで表示不具合が解消できます。

おそらく何らかの原因で、スマホのサイドバー表示だけ白色文字になってたのでしょうか。
ともかく解決できて一安心です!

いかがだったでしょうか。
簡単な方法で対処することができました。

私は色々なサイトの方のCSSを参考にカスタマイズをしているので、このような不具合が発生したのかと思います。

皆さんもご注意下さい。

ご覧いただき、ありがとうございました。
それではまた。よろしくお願いします!

この記事を書いた人
Hurari

音楽、旅行、DIY、筋トレが趣味のHurariです。
これまでにアジア8ヵ国を旅しています。

いつかは世界一周クルーズ旅をしたい!

Hurariをフォローする
ブログ / CSSのこと
スポンサーリンク
Hurariをフォローする
ふらりBLOG
タイトルとURLをコピーしました