新着情報

今回は、TOPロゴのサイズについて、あるデータを見ながら適正サイズを見直していきたいと思います。

デフォルトのトップロゴのサイズは、550×70ピクセルとなっています。


このサイズを元に作成される方が多いと思うのですが、あるスマホ環境では綺麗に収まりません。

こちらです。

iPhone４・5・５S・SEや旧ギャラクシーなどの横幅が320ポイントの環境です。

本来はこの様に表示されるべき？

横幅360ポイント以上のスマホだとこの様に表示されます。（正確には350）


いやいや、

横幅320ポイントのスマホはもう古いでしょ？

と突っ込まれそうですが、見過ごせないデータがあります。

2016年12月28～2017年1月27日までの過去30日間、とある私のサイトのGoogle Analyticsのデータです。

月刊PV数 約10万のサイトですが、スマホ画面サイズ 320×568 のからのアクセスが約15%を占めています。スクリーンショットは規約によりお見せできません。

画面サイズを検索してみると、iPhone 5系 （5/5s/5c/ SE ） で有ることが判ります。

この様に、まだまだ、横幅320ポイントのスマホからのアクセスに対応していかないといけないと改めて感じました。

幸い当方の手元にはiPhone５ｓ と SE、ギャラクシーＳ2がありますので、上記のロゴについては対応済みです^^;

当サイトのトップロゴです。

iPhone SE 320×568 より

---

本題です。

横幅320ポイントのスマホに対応させるには？

既にデフォルトのサイズ（550×70）で作成されている方は、下記のコードを style.min.css の一番最後、または custom.css に追記して下さい。

@media only screen and (max-width: 349px) {
.navbar-brand{
max-width: 210px;
height: auto;
}
}

max-width: 210px の値は、最大220px までOKですが、メニューとの隙間が無いので210px にしてあります。
 

適応後

因みに当サイトトップロゴのサイズは、555×82 px で作っております。 このサイズであれば CSS の追記は不要です。

 

最後に

今回は、横幅320ポイントサイズのスマホからのアクセスもまだまだ見逃せない？とお伝えしたのですが、手元にそのスマホが無ければ気づかないやん？って思われるかもしれません。

そんな方にGoogle さんが便利な機能を提供してくれてますので、それをご紹介して終わりたいと思います。

Google Chrome の【デベロッパーツール】 で、PCからスマホの表示を確認する方法。
→ Google chromeでスマホ表示画面(レスポンシブデザイン)を確認

この機能を使えば、色々なスマホやタブレットが無くてもデザイン（表示）を確認できます。一度ご自身のサイトも色々な機種で見てみると発見があるかもしれません。

めちゃくちゃ便利ですよ(^^)/

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。