新着情報

前回、横幅320ポイントのスマートフォンからのアクセスも、まだまだ見逃せないとお伝えいたしました。今回もそれに関連がある内容でご紹介したいと思います。

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

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

TOPページの下記の場所です。（PCから）



スマホから（iPhone SE 320×568）


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

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

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

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

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

ユーザビリティとは

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

---

◆実践編

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

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

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


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

該当部分に色付けがされています。

赤線の部分が、一般的なタブレットを縦に見た時の画像サイズの指定、青線がスマホ（一般的な縦向き）での画像サイズを指定している箇所になります。

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

変更後


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

@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 に貼り付けてください。
 

iPad （768×1024）で表示結果

iPad 側の指定は、元々 37.5% の指定だったのでさほど変化はありませんが、サイズが変わっていることが確認頂けると思います。

表示が変わらない時は

ページを更新する （PCならF5を押す）

キャッシュをクリアする

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

スーパーリロードする （PCから Ctrl ＋ F5 を同時押し）

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

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