SIRIUS(シリウス)でiPhone(スマホ)の画面幅を超えて表示される文字列を強制的に改行して見やすくする

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

iPhoneの画面幅を超えて表示される文字列を強制的に改行して見やすくする

サンプル画像

 

こんな経験ないですか?

 

iPhone(スマホ)で画面を縦スクロール(スワイプ)したら
左右(斜め)にぐわんぐわんとすべってしまって、
定位置に戻すのがとても面倒だった……。

 

これの原因は、
文字が iPhone(スマホ)の横幅を超えて表示されてしまった結果、
サイト表示領域が広がったことによるものです。

 

こんな↓感じですね。

文字列が画面横幅に応じてきちんと改行されずに飛び出してしまった例です。

 

キャプチャ画像

 

これは主に英単語やローマ字などが画面幅よりも長いときに起こる現象です。
日本語では(たぶん)起こりえないでしょう。

 

たとえば当サイトでもよく使ってますが、
英数字からなる各種コードなどをお伝えするときなどは
しょっちゅうこの現象が起きます。

 

あとはやたら長いローマ字の固有名詞を打ち込んだときとか、
画像が適切に縮小表示されずに
画面幅以上のサイズで表示されたときとか。。。。

 

これってスマホでサイトを見る側にしてみれば
とてもイラつく症状だと思うんですよ。

 

それに画面が左右(斜め)にするっとすべってばかりいると、
訪問者は途中で嫌になって逃げちゃう(サイトを閉じちゃう)恐れもあります。

 

見栄えもよくないでしょ。

 

でも大丈夫。
これを解決する方法があるんです。

 

それがこちらのコード(CSS)。

 

コード

word-wrap : break-word;
overflow-wrap : break-word;

 

この”word-wrap : break-word;”というのは、
『長い一連の文字もできるだけ切りのいいところで改行してあげますよ』
という機能をもっています。

 

2行目の”overflow-wrap : break-word;”に関しては”word-wrap”のCSS3での改変呼称になりそうということで併記という形を取ってます。

 

この機能は”親”で指定しておけば”子”にも継承されるプロパティなので、
大元の親である”body”に指定しておきます。

 

これをやっておけば、
文字のあふれなど気にすることなくサイト作成に集中できますね。

実装

「テンプレート」→「iPhoneサイトスタイルシート編集」を開きます。

 

アタマの方に”body”の設定があると思うので
設定の最後の方にでも加筆しておいてください。

それだけです。

 

コード

body {
      text-align: center;
      ・
      ・
      ・
      word-wrap : break-word;
      overflow-wrap : break-word;
}

 

この結果、文字が横にあふれたさきほどの画面はこちら↓のように
きちっと画面内に収まるようになりました。

 

画面が左右に滑ることもありません。

 

キャプチャ画像

 

テーブル表記では”word-wrap : break-word;”が有効にならない場合もありますが、
おそらくあなたの環境でその現象が出ることはマレかと思います。

 

よって今回はそこまで言及しないでおきます。

 

以上です。

 

購入ページへ


てっぺん