※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSの改行の最適化を極める

キャプチャ画像

iPhoneサイト同時生成機能を利用して「改行の最適化」をONにすると、PC上のブラウザで改行して表示させてた箇所をiPhone(スマホ)表示時には改行を無視して文章を1行で表示させることができます。

 

iPhoneサイト同時生成機能はSIRIUS上位版の機能になります。

 

この改行の最適化は『便利』ではあるんですが、実は”万能ではない”んです。


『改行の最適化』の例外

SIRIUSでサイトを作る時、普通はPC上でのレイアウトを優先して文字入れや画像差し込みを行っていくと思います。

 

ここでちょっと悩むのが、

『文章をそのまま打ち込んでページの表示幅に応じて自然改行させる』のか、『読みやすさを優先して改行を多くとるか』ということじゃないでしょうか。


(当サイトでは、内容に応じてどちらも採用しております

 

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

 

例えばこちら↓の文章、わざと少し多めに改行を入れてみました。

 

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

 

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

(※iPhone(スマホでは)改行の最適化がきいてPC上での表示とは異なって見えます)

 

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

 

キャプチャ画像

 

この時、『改行の最適化』OFF(「改行を最適化しない」にしてiPhone(スマホ)で見ると、画面表示幅の関係でコチラ↓のように中途半端な位置で改行されてかえって見づらくなってしまいます。

 

キャプチャ画像

 

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

 

キャプチャ画像

 

ただしこの機能、ひとつだけ注意点があります。

 

というのは『改行を最適化する』でも外せない”改行”もあるからです。

完璧な『改行の最適化』

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

 

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

 

???でしたか?

 

<br />というのは”改行”を意味するHTMLタグです。

 

ではより具体的に画像でご紹介します。

 

ここからはちょっと専門的な話になりますので、わからない方は無理して理解する必要はありません。

 

こちら↓はテキストエディタでの編集画面です。

改行設定で”<P>タグ改行”にチェックが入った状態です)

 

キャプチャ画像

 

まだわかりにくいかもしれないので多少補足します。

 

SIRIUSのテキストエディタ上で①のように文章を打つと、ブラウザで表示されるときには(⑦)自動的に文章が<p>~</p>というタグで挟まれます。

<br />が改行を意味するタグです)

 

そしてテキストエディタ上で改行した部分は、PCのブラウザ上では(③)同じように改行されて表示されます。

 

一方、iPhone(スマホ)上では、自動で打ち込まれた<p>~</p>内の改行タグは『改行の最適化』が機能して(⑤)改行が無効となり、文がつながって表示されます。

 

ところが②のようにエディタ上で<p style="xxx">とか<p class="xxx">といった行全体に影響する装飾スタイルやタグ等を付けてしまうと、その中にある改行は(正確には<br />タグは)『改行の最適化』の適用外になって(⑥)iPhone(スマホ)上でも改行されて表示されてしまいます。

 

では<p>で始まらない文中にある<br />にも『改行の最適化』を効かせる方法がないのかと言えば、そうでもありません。

 

それは<br />タグを無効化するスタイルシートを追加してやればいいのです。

 

コード

br {
     display:none;
}

カスタムテンプレート【Volar】には『改行の最適化』機能が最初から搭載されています。

 

またPCでもiPhone(スマホ)でもどちらでも改行を有効にしたり、iPhone(スマホ)のみ改行を有効にするなどの細かい設定も付いてます。

 

”iPhone(スマホ)のみ改行を有効”なんてどこで使うの?なんて思う方もいらっしゃるでしょう。

 

これがいろいろサイトを作っていくと必要になる時もあるんですよ。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像