iPhone(スマホ)サイトでの画像の「縮小変換して表示」機能を使いこなす

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

iPhone(スマホ)サイトでの画像の「縮小変換して表示」機能を使いこなす

サンプル画像

PC用に作成された大きな画像を小さな画面の iPhone(スマホ)サイトで正常に表示させようと思ったら、画像を縮小させる必要があります。

 

その設定自体はシリウスに標準搭載されているんですが、もっと細かな設定も可能です。
それが画像の「縮小変換して表示」機能。(上位版のみの機能です)

 

「サイトオプション」→「iPhoneサイト設定」→「詳細設定」タブを開くと
こちら↓のような設定画面が開きます。

 

キャプチャ画像

 

「記事中の画像」というところにいくつか選択枝がありますね。

 

この中で実用的と思われるのが
「縮小変換して表示」「縮小変換して表示(中央揃え)」の 2つだと思います。

 

ここではその 2つに絞ってご説明します。

 

各表示の違い

実際の例でご説明しましょう。

 

画像幅が iPhone画面横幅よりも小さい場合

例えば PCで以下のように表示されてるページがあったとします。

 

テキストの右には画像が回り込んでいます。
この画像、実サイズで iPhone 画面の横幅 320pxを下回る 210pxとなってます。

 

キャプチャ画像

 

これを「縮小変換して表示」で iPhoneで見るとコチラ↓のようになります。
テキストが左に押しつぶされてとても見にくくないですか?

 

キャプチャ画像

 

今度は「縮小変換して表示(中央揃え)」に変更して表示させてみました。
画像が中央に表示されて、回り込んでいたテキストは画像の下に移動してます。
こっちの方が見やすいと言えば見やすいですね。

 

キャプチャ画像

 

ちなみにこちら↓は iPhone上でも PCとほぼ同じように表示させてみた例です。
設定は「縮小変換して表示」

 

キャプチャ画像

 

『画像幅は 40%』というスタイル(CSS)を画像に設定してそれを iPhone(スマホ)のみが認識可能な『<ipc>~</ipc>』というタグでくくることで実現させてます。

 

ここまでやる人はそうはいないでしょうが、やろうと思えばいろんな表現ができますね。

 

画像幅が iPhone画面横幅よりも大きい場合

PCで以下のように表示されてるページがあったとします。

 

テキストの右には前回同様、画像が回り込んでいます。
ただしこの画像、実サイズで iPhone 画面の横幅 320pxを上回る 350pxあります。

 

キャプチャ画像

 

これを「縮小変換して表示」にして iPhoneで見るとコチラ↓のようになります。

 

キャプチャ画像

 

元々の画像幅が iPhone 画面幅を超えていたため
結果的には画像が画面幅いっぱい(100%)に縮小されてその下にテキストが表示されてます。

 

「縮小変換して表示(中央揃え)」とほぼ同じですね。

 

結論

画像の回り込みのありなしや画像サイズによっては思った通りのレイアウトにならないこともあるので、ここでの一番無難な選択肢は「縮小変換して表示(中央揃え)」でしょうか。

 

これにしておけばほぼ問題ないレイアウトで表示されるハズです。

 

iPhoneでの閲覧数がどんどん増えている時代ですから、画像の見せ方一つにも細かい配慮が必要です。

 

この機能をうまく使いこなしてアクセスアップにつなげましょう。

購入ページへ


TOPへ戻る