【WordPress】タイトルロゴを画像にしたらスマートフォンでの表示を調整しましょう

Logo 2 eyecatch

昨日タイトルロゴをテキストではなく画像にしたという記事を書きましたが、スマートフォンの表示で画面からはみ出しているとのご指摘をいただきました。

今日はスマートフォンでの表示を調整しましたのでその方法を書き残しておきたいと思います。

不具合発生

Twitterでととっちさん(@totocchissu)さんにご指摘いただきました。


Macからしかチェックしてなかったので完全に盲点でした。ととっちさんのおかげで気がつけました。

確かにiPhoneからみてみたらロゴ画像の右半分くらいがはみ出していました。

IMG 4682

そう言えば、ダレデキブログさんでも、画像は320pxl以内で準備する、と書かれていた気が。

つまりスマートフォン表示にあうように320pxlという注意だったのかなと思いました。

それでととっちさんに返信してみたら、こんな答えが。

そういうこともできるんだ〜、ということでいろいろと調べてやってみました。

解決編

といってもあまり大袈裟なことではありませんでした。

CSSのこと、あまりよく分かっていないのですが、おそらくsmart.phpというファイルをどうにかすれば良さそうということは分かりました。

画像をスマートフォンの画像サイズに合わせることができればよさそう、ということであれこれ検索してみて、読んでみたら、ここが分かりやすそうでした。

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

 

 

具体的には、このコードをいれたらよさそうに思いました。

img {
 max-width: 100%;
 height: auto;
 }

場所とか、どこに入れるべきなのか分からなかったので、smart.cscのファイルの一番最後に挿入してみました。

Logo modify

これは横幅を表示される100%で表示させるという意味のようです。高さは幅によって自動調整するためにautoとなっています。

そしてスマートフォンでサイトにアクセスしてみるとこのような表示に。

IMG 4686

ロゴがきちんと全体表示されていました。

Tomo’s Comment 

デザインを変更するときはスマートフォンでの設定も行う必要があるのかないのかを明確にする必要があると思いました。

なんとなく調べて、うまく解決できているようなのですが、これが正解で良いのかかなり不安です。PHPやCSCについてやはり知っておかなければならないと感じました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です