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

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

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

サンプル画像

 

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

 

その設定自体はシリウスに標準搭載されているんですが、
もっと細かな設定も可能です。

 

それが画像の「縮小変換して表示」機能。
(上位版のみの機能です)

 

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

 

キャプチャ画像

 

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

 

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

 

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

各表示の違い

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

 

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

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

 

テキストの右には画像が回り込んでいます。

 

この画像、実サイズでiPhone画面の横幅320pxを下回る210pxとなってます。

 

キャプチャ画像

 

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

 

テキストが左に押しつぶされてとても見にくくなっちゃいましたね。

 

キャプチャ画像

 

今度は「縮小変換して表示(中央揃え)」に変更して表示させてみました。

 

画像が中央に表示されて、
回り込んでいたテキストは画像の下に移動してます。

 

こっちの方が見やすいと言えば見やすいですね。

 

キャプチャ画像

 

ちなみにこちら↓はiPhone上でもPCとほぼ同じように表示させてみた例です。

設定は「縮小変換して表示」

 

キャプチャ画像

 

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

 

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

 

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

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

 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

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

 

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

結論

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

 

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

 

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

 

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

 

購入ページへ


てっぺん