固定ページトップ画像

ピックアップメニュー画像をスマホ・タブレットで大きく表示させる方法【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デザインへブログランキング人気ブログをblogramで分析

月別アーカイブ一覧


新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-25

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

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

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL化に完全には対応できていない様です。当サイトは3系で運営して...

【mixhost・ミックスホスト へサーバー変更】baserCMS ホームページのプチリニューアルとSSL(暗号化通信)化を行いました。

2017-06-19

いつもご覧頂きありがとうございます。ホームページのリニューアルを行いましたのでお知らせ致します。大きな変更点は、ページ全体の暗号化通信(SSL)化を行いました。それに伴い、URLの変更がございます。 ...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-19

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

【ratio_3_2】ブログ記事下の次のページへのリンクを入れ替える方法【baserCMS】

2017-02-25

ブログ記事下の隣接ページへのリンクを入れ替える方法ご質問を頂きましたのでご紹介させて頂きます。 説明が難しいので要約させて頂いておりますm(_ _)mご質問ブログ記事の下部分の次のページへのリンクを入...

baserCMS

CakePHP(tm) : Rapid Development Framework