ratio_3_2 のカスタマイズ方法

ピックアップメニュー画像をスマホ・タブレットで大きく表示させる方法【baserCMS ratio_3_2】

ピックアップメニュー画像をスマホ・タブレットで大きく表示させる方法【baserCMS ratio_3_2】
、横幅320ポイントのスマートフォンからのアクセスも、まだまだ見逃せないとお伝えいたしました。今回もそれに関連がある内容でご紹介したいと思います。

◆ピックアップメニュー画像をスマホから見た時に大きく表示する方法

ピックアップメニューとは?

TOPページの下記の場所です。(PCから)
ピックアップメニュー


スマホから(iPhone SE 320×568)
pickups.jpg

↑スマホからだと、ほぼ実物大でご覧頂けます。
 このページのQRコード
上記の左側の画像を大きくしたいというのが、今回ご紹介する内容になります。

先に出来上がりをお見せします。

ピックアップ画像調整後

↑この様に画面幅の約半分の大きさになるようにしてみました。もちろん任意の大きさに変更できます。

これで、アイキャッチ効果が高められると思います。5インチ以上の画面サイズ(iPhone7 Plusなど)のスマホをお使いの方からすると、余りピンと来ないかもしれませんが・・・。

◆ユーザビリティを第一に考えよう

ユーザビリティとは

サイト訪問者が快適に閲覧・目的の情報に辿り着けるようにすること。サイト運営者(あなた)のスマホの大きさではなく、あなたのサイトに訪れる方にとって見やすいかそうでないかが重要になってきます。

スポンサードリンク

◆実践編

デモサイトのトップページのソースを見てます。赤線を引いた部分が画像に関連していそうな箇所。色枠がそれぞれひとかたまりになっています。
pickupsource.jpg

これらの情報を元に、style.min.css の中で画像の大きさを指定している部分を探します。

今回は、custom.css に追記する方法ではなく、style.min.css を直接書き換える方法を取りますので、ソースのバックアップを必ず取ってから作業して下さい。

レイアウトテンプレート から、CSS一覧→ style.min.css に移動します。
style.min.jpg

css 内で .pickup .thumbnail と検索をかけます。(Ctrl + F を押すと検索窓が出てきます。画像はGoogle Chrome)

該当部分に色付けがされています。
pickup1.png
赤線の部分が、一般的なタブレットを縦に見た時の画像サイズの指定、青線がスマホ(一般的な縦向き)での画像サイズを指定している箇所になります。

私は、タブレット側を 37.5 → 40% 、スマホ側 width:100px → width:50% にしてあります。

変更後
pickup2.png

これで、先にお見せした表示になります。

@media (max-width:991px)~省略~img{width:50%} までのコードを付けておきます。
@media (max-width:991px){.pickup .thumbnail{clear:both;padding-top:15px}.pickup div[class*=col-]:first-child .thumbnail{padding-top:0}.pickup .thumbnail .thumbnail-title{position:static;bottom:0;background-color:rgba(0,0,0,.1)}.pickup .thumbnail img{float:left;width:40%;margin-right:15px}}@media (max-width:599px){.pickup .thumbnail img{width:50%}
※どうしても style.min.css を触りたくない方は、上記のコードを丸ごとコピーして custom.css に貼り付けてください。
 
注意 メディアクエリをCSSに書き込む際は、必ず順番に書かなくてはいけません。モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。 詳しくは →こちら を参考にして下さい。


iPad (768×1024)で表示結果
ipadafter.jpg
iPad 側の指定は、元々 37.5% の指定だったのでさほど変化はありませんが、サイズが変わっていることが確認頂けると思います。

表示が変わらない時は

ページを更新する (PCならF5を押す)

キャッシュをクリアする

ブラウザのキャッシュをクリアする方法

スーパーリロードする (PCから Ctrl + F5 を同時押し)


上記のパーセントの数値を変えることで、簡単に大きさを調整出来ますので、ぜひ挑戦してみて下さい(^^)/

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

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

baserCMS

CakePHP(tm) : Rapid Development Framework