iPhone(スマホ)サイトでの「改行の最適化」を極める

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

iPhone(スマホ)サイトでの「改行の最適化」を極めよう

サンプル画像

「サイトオプション」→「iPhoneサイト設定」→「改行の最適化」
きちんと使いこなしている人ってどれぐらいいるんでしょうね。

 

私は最初はよくわからなかったのでそのまま放置しておいたクチです。

 

しかし便利そうだという声がチラホラ聞こえてきたのできちんと調べてみたら、、、
なんと便利な機能だこと!

 

もっと早くに使えばよかった。。。

 

「改行の最適化」っていうのは「改行を iPhoneでもそのまま活かすか無視するか」という機能なんですが、(自分で説明しておいて言うのも変ですけど)実のところこれだけぢゃぁよくわかりませんでしょ?

 

そこであらためてこの機能をきちんとご紹介しちゃいます。

 

あと、『便利』なんだけど”万能ではない”ってこところも教えちゃいます。

 

事例で解説

シリウスでサイトを作るときって、
一般的には PC での見た目を優先して文章を”レイアウト”していくことが多いと思います。

 

ここで問題となるのが、
『見た目を重視してページの表示幅いっぱいまで文章を書く』のか、
『読みやすさを重視してく途中で強制的に文を改行させて書く』のかということです。
(当サイトでは、、、内容に応じてどちらも採用しております。(^^ゞ)

 

ここで『読みやすさ』を重視した場合、ちょっとした問題が起こります。

 

例えばこちら↓の文章。
少し多めに改行を入れて読みやすくしてみました。

ソニーは、「VAIO(バイオ)」シリーズの2014年春モデルを、
22日より順次発売することにしました。楽しみですね。
いずれもオープン価格。

 

パソコン事業を売却するため、
ソニー製のVAIOとしては今回が最後のモデルとなります。

 

これを PC で見ると、上で書いた通りのレイアウトで次のように表示されます。

 

キャプチャ画像

 

しかしこれを『改行を最適化しない』に設定して iPhoneで見た場合、
画面表示幅の関係でコチラ↓のように表示されてしまいます。

 

キャプチャ画像

 

中途半端な位置で改行されてかえって見づらくなってしまいました。

 

これを『改行を最適化する』に変更すると、
こちら↓のように余分な改行マークが外れて狭い画面内でも見やすくなります。

 

キャプチャ画像

 

これが「改行の最適化」です。
とても便利な機能だと思いませんか。

 

ただし文章の内容や長さによっては逆に見にくくなるケースもあります。
サイトに応じた切り替えは必要ですよ。

 

”万能”ではない

この機能、ひとつだけ注意点があります。
というのも『改行を最適化する』で外せない”改行”もあるからです。

 

『改行の最適化』が機能するのは、
あくまで<p>~</p>で囲まれた中にある<br />だけです。

 

<p class="sample">~</p>のように<p>から始まらない文中にある<br />は外してくれません。

 

………???でしたか?

 

では具体的に事例でご紹介しましょう。(※事例は「<p>タグ改行」での編集画面です)

 

キャプチャ画像

 

こんな風に若干使いづらい面もあることはありますが、それでも便利な機能には違いありません。
うまく使い分けましょう。

 

開発元に問い合わせたところ「この改修はかなり困難」ということなので、
おそらく今後もこの仕様のまま続くものと思われます。

 

以上です。

 

追記(2014.9.21)

上記の問題は CSSに次のプロパティを加筆することで解決することがわかりました。

コード

br {
	display:none;
}

これは”改行コード(<br />)を非表示にする”→”改行を無効にする”という意味合いです。

これで<p class="sample">~</p>のように<p>から始まらない文中での<br />も外せます。

「テンプレート」→「iPhoneサイトスタイルシート編集」を開いて、適当なところへコピーペーストしてください。

購入ページへ


TOPへ戻る