ratio_3_2 のカスタマイズ方法

トップロゴの適正サイズについて【baserCMS ratio_3_2】

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

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

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

こちらです。
logo1.jpg
iPhone4・5・5S・SEや旧ギャラクシーなどの横幅が320ポイントの環境です。

本来はこの様に表示されるべき?
logo3.jpg
横幅360ポイント以上のスマホだとこの様に表示されます。(正確には350)


いやいや、

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

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

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

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

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

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

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

当サイトのトップロゴです。
mylogo.jpg
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 にしてあります。
 

適応後

iphonesetoplogo.jpg

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

最後に

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

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

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

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

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

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework