SIRIUS(シリウス)の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>タグ改行」での編集画面です)

 

キャプチャ画像

 

なんかちょっと面倒なことになってますね。

 

でも大丈夫。ちゃんと解決策はあるんです。

<p>から始まらない文中にある<br />にも改行の最適化を効かせる方法が。

 

それはスタイルシートに次のプロパティを加筆すること

 

コード

br {
	display:none;
}

 

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

 

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

 

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

(できれば一番下の方に)

 

以上です。

 

購入ページへ


てっぺん