*

楽天ショップの会社概要のスマホ版をリリース。画像の幅をレスポンシブにする方法

公開日: : ネットショップ

楽天の各ショップには会社概要ページ、お支払・送料のページがあります。しかし、あれだけスマホ最適化、モバイルファーストが叫ばれようともここだけはスマホで見ても PC 版のままでした。

ようやく楽天が重い腰を上げて、楽天ショップの会社概要ページ、お支払・送料のページのスマホ対応に着手しました。一般のお客様には2017年3月29日よりリリースされますが、ショップ運営者側は2017年2月9日から会社概要ページのスマホ対応化を試す事ができます。

会社概要ページ、お支払・送料のページは自動でスマホ対応されますが、事前にこのスマホ対応機能を使って不自然な所がないか、見難くないか確認するよう呼びかけています。

会社概要のスマホ対応を確認する方法

確認は RMS から行います。

RMS にログインし、左メニューの基本情報設定を開いて「会社概要ページ」のリンクをクリックします。

再び会社概要ページのリンクをクリックします。

画面上部に「スマートフォン用会社概要ページを確認する」というリンクが出来ているのでこちらをクリックします。

上図の赤枠部分のリンクから会社概要ページとお支払・送料ページのスマホ対応後のページを事前に確認する事ができます。リンクをクリックしても画面が真っ白という場合は、タグのとじ忘れなどが原因のようです。

基本的に画像を使っていなければ綺麗にスマホ対応されます。ただし、画像を使っている場合はそうはいきません。画像の幅が大きければスマートフォンの画面をはみ出してしまうのです。これではスマホ対応しても見難くなってしまいます。

これの対処法については、画像の幅をパーセンテージで指定するように勧めています。つまり「Width="100%"」という風に指定するわけです。しかしこれではスマートフォンでは画面ぴったりに表示されますが、パソコンでも画面ぴったりに表示されてしまいます。つまりパソコンでは最大幅1920pxで超拡大画像になってしまってボケボケになってしまうのです。50%にしたらスマートフォンでも画面半分の画像になってしまいます。

ダメ押しに店舗運営マニュアルには次のような事が書かれています。

なお、スマートフォン用会社概要ページとPC用会社概要ページで異なるサイズ指定することはできません。

欠陥か!(震え)

画像の幅をPCとスマホで違うサイズを指定する

楽天のあまりの欠陥システムに落胆しつつ、何とか対処法を考えます。画像はパソコンでは通常の実寸サイズ、スマホでは幅100%と設定できれば完璧です。

実はここの会社概要編集部分では CSS が使えるので楽天 GOLD スペースに CSS をアップロードして読み込みます。

<link href="http://www.rakuten.ne.jp/gold/****/css/company.css" rel="stylesheet" type="text/css">

このような外部 CSS を読み込むタグを直接書きます。

そして、画像を使っている部分には以下のようにします。

<img src="画像URL" alt="説明" class="img01" />

class の部分は自由に名前を付けて構いませんが、ここでは img01 としました。

次に CSS の中身についてです。

@media screen and (max-width: 980px) {
	.img01{
		width:570px;
		height:	424px;
	}
}

@media screen and (max-width: 767px) {
	.img01{
		width:100%;	
		height:auto;
	}
}

これはメディアクエリと言って、画面の幅によって異なるスタイルを適用しています。まず、上の方は PC 用で画像の実寸サイズの幅と高さを指定します。次に、下の方はスマホ用なので幅は100%、高さは auto と指定します。これで、幅が狭いスマートフォンやタブレットでも画像は画面ぴったりに表示する事ができますし、パソコンでも不自然な事なく今まで通りに画像を表示する事ができます。

おわりに

楽天ショップの会社概要ページやお支払・送料ページで画像を使っていない場合は特別対応は必要ありませんが、画像を使っている場合は対応が必要となります。楽天のマニュアル通り、幅100%にしてしまうとパソコンではとても見苦しいものになってしまいます。

このようなレスポンシブ対応でパソコンでもスマートフォンでもスッキリと見やすいページにしてみましょう。

  • Pocket

おすすめトピックス

関連記事

楽天のカテゴリ表示順序(優先度)変更でエラー「CSVファイルのフォーマットが違います。」

今回は楽天のカテゴリページの話をします。カテゴリページとはそのカテゴリに属する商品が一覧として表示されるページの事です。何も考えずにどんどん商品登録をしていくと、カテゴリページに表示される商品の順番はバラバラになってしま […]

プチプチ
誰も教えてくれない梱包に使うプチプチの切り方

プチプチと言えばきっと誰もが見たことがあるでしょう。手元にあればついプチプチと潰したくなるあれです。通販で購入した物の中に緩衝材として入っている事が多々あると思います。 ネットショップを開いている方や、個人でオークション […]

スマホ対応
早くネットショップのスマホ対応を!非対応サイトは誰も来なくなりそう

最近スマートフォンでの google 検索結果の画面が変わりました。スマートフォンに対応しているサイトは「スマホ対応」という文字が表示されています。google がこのサイトはスマートフォンで快適に閲覧できますよ~と太鼓 […]

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

動画からアニメーションgifへ自動で変換してくれるフリーソフト「動画GIF変換」

gif と言えば透過に対応した画像形式の一つですが、gif はアニメーションにも対応しています。ただの画像でありながらパラパラ漫画の要領で動く画像が作れるわけです。アニメーション gif はインターネット上で動画が普及し […]

楽天ショップで売り切れ商品が入荷したら通知する機能があります

(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

名古屋久屋大通(丸の内)の「Cafe One」で居心地良い空間でおうちごはんランチ

名古屋観光で名古屋テレビ塔と久屋大通公園を見に行った際にランチ

豊田合成リンク
名古屋栄の豊田合成リンクで氷じゃないスケートリンクで滑ってきた感想

名古屋市の栄に氷じゃないスケートリンクがあるという話を連れに聞

→もっと見る