スマホで見た場合の改行がおかしい

Simplicityの特徴 フォーラム 不具合報告 スマホで見た場合の改行がおかしい

このトピックには9件の返信が含まれ、2人の参加者がいます。3 年、 4 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #28268

    モモタロス

    記事投稿の編集画面で、「ビジュアル」ではなく「テキスト」で編集した場合、改行をすると、

    1行目⇒ 文章文章文章文章文章文章
    2行目⇒ 文章文章文章文章文章文章

    のような形で一行開けない改行になります。
    この場合、スマホで見た場合、改行が反映されませんが、PCで見た場合反映されます。
    下記のように1行開けるとスマホでも改行が反映されます。

    1行目⇒ 文章文章文章文章文章文章
    2行目⇒
    3行目⇒ 文章文章文章文章文章文章

    これはテキストでも後者のように1行開けた改行をすべきなのでしょうか?
    それとも不具合でしょうか?

  • #28278

    Hidekichi

    ちょっと僕が意味を取り間違えてるかも知れませんけれども…、本来改行を反映させたい場合はbrタグを入れないといけません。

    wordpressは、
    1行目⇒ 文章文章文章文章文章文章
    2行目⇒
    3行目⇒ 文章文章文章文章文章文章

    このように書くと、文章文章文章文章文章文章をpタグで囲むと思います。なので改行したように思うわけです。

    例えば、

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

    と入れたとします。文章は画面端で折り返されてはいますが1行です。そしてpタグで囲まれているため段落になっています。
    これを任意の位置で改行したい場合は、

    ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ(ここにbrタグ)ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

    と入れると、brタグの所で改行します。もちろんpタグで囲まれているので段落の中での改行になります。
    例えば上記でbrタグの後でenterによる改行を入れたとしても段落の中でしかもbrが入っているのでそのbrの後ろの改行は無視されるのではないかと思います(2重に改行されるわけではない)。
    編集画面の表示的には\nが入っている感じ。これは改行コードと言うやつなのですが、ソース画面(web開発環境とか)では\nが入っている部分は改行しているはずですがhtmlでの改行はあくまでbrなので\nは無視されると思います。おそらく(笑)

    さてここで色々と問題が出る時があります。例えばPCの場合、画面幅が十分にある時は#mainのサイズは740pxです。paddingやらが設定してあるので、実質680pxぐらいしか利用できないのですが、これは例えば16pxのフォントサイズの場合、横42文字分ぐらいです。

    もし、42文字表示できる領域の43文字目にbrタグがあった場合、1文字だけの所で改行したりすることになり見栄えがとても悪いですよね?
    なのでテキストエディターでは、enterを入れることによる改行のポイントまでをpタグで囲って1行にしているわけです。すると、1行で表示されるわけですから画面幅横がどれだけであろうと、文章が途中で途切れず(改行されず)きちんと続けて1行で表示されるということになります。

    こういうことから、自分の意図がはっきりしている場合を除いてbrタグはあまり使わないほうが良いと言うのがレスポンシブなデザインでは慣例となっています。

    ビジュアルエディターもその場で見えないだけでpタグで囲っているのですが、本番で表示されるのと同じように編集できますから気が付かないだけなのかも知れません。編集画面で文字数の上にpと表示されていると思います。
    テキストエディターも特別pタグで囲まなくても勝手にpタグで囲っているので、文字のはじめからenterで改行した所までが段落と思って間違いないかと思います。

    段落と改行を再考して、できたらweb開発環境(モダンブラウザでF12キー)より記事のソースを見ることをオススメします。すると仕組みがだんだん理解できるのではなかろうかと思います。

    と、半分想像も踏まえて書いてみました。

  • #28287

    モモタロス

    Hidekichiさん

    アドバイスありがとうございます。
    知識不足のためにおっしゃってることが半分ぐらいしかわかりませんでした。
    アドバイス通り、ソースを見ました。

    Hidekichiさんがおっしゃるってるのは、「brタグはレスポンシブデザインの場合は無効になるよ」ということでしょうか?(意味がわかってないので違ってたらすみません)

    例えば、この私の投稿もそうなんですが、ソースは

    <p>1行目⇒ 文章文章文章文章文章文章<br />
    2行目⇒ 文章文章文章文章文章文章</p>

    となっています。
    そして、PCで見た場合の表示はbrタグのところで改行になるが、iPhoneで見た場合(ブラウザはサファリとchrome)、下記のようにbrタグが無視され、スペースになると言うことです。

    以前は、brタグが反映されていたように思うのですが、最近はされなくなってしまったように思います(私の感が違いかもしれない)。
    レスポンシブデザインの場合、brタグが使えないということでしたら、過去記事を全部直す必要が出てくるので、ちょっとそれは物理的に辛いです。

    Attachments:
  • #28288

    モモタロス

    ソースのはりつけがおかしかったようで申し訳ありません。
    ソース部分は下記です。
    貼り付け方がわからないので、「<」、「>」を全角にしました。

    <p>1行目⇒ 文章文章文章文章文章文章<br />
    2行目⇒ 文章文章文章文章文章文章</p>

  • #28290

    Hidekichi

    >「brタグはレスポンシブデザインの場合は無効になるよ」ということでしょうか?

    いえいえ、画面幅がまちまちなものに対応するのがレスポンシブデザインなので、変な所で改行されると見栄えが悪い(デザインが崩れる事がある)と言うことからbrタグは自分が意図とする所以外は使わないほうが良いということです。

    もし、
    <p>1行目⇒ 文章文章文章文章文章文章<br />
    2行目⇒ 文章文章文章文章文章文章</p>
    このように書かれているのであれば、

    1行目⇒ 文章文章文章文章文章文章
    2行目⇒3行目⇒ 文章文章文章文章文章文章

    こうなっているはずですが、仮にbrが無い場合、つまりはbrの位置でenterによる改行をした場合は、

    <p>文章文章文章文章文章文章</p>
    <p>文章文章文章文章文章文章</p>

    こうなると思います。
    と、毎回<をコード化するのは面倒なので うちの海外サーバーテスト投稿
    にテキストで編集した内容をcrayonで表示したものと、その結果部分を編集投稿してみました。で原因がわかりました。

    @media screen and (max-width: 639px)
    .article br {
      display: none;
    }

    narrow.cssのこやつが悪さをして効いていたようです。まぁわいひらさんの何かしらの意図があるんでしょうけれども、不要ならコメントアウトしてしまえば良いと思います(笑)
    639px以外にももしかしたらあるかもしれないので、#the-content br { display: block; }とでも子テーマに入れたりですかね。

    ちなみに、モモタロスさんがレスされたコードの部分は間違っていません。管理者権限のない人がスクリプトっぽいものを投稿してcodeタグを入れるとエンティティ化されてコード(htmlコード)で表示されるのです。これはその内、わいひらさんが修正してくれると思います。

  • #28303

    モモタロス

    Hidekichiさん

    ありがとうございます!
    教えて頂いた箇所をコメントアウトしたら大丈夫でした!
    ホントに助かりました。

  • #28313
    わいひら
    わいひら
    キーマスター

    narrow.cssのbrは、スマホのような画面の狭い端末だと、改行連発の文章だとガタガタに表示されて、文章が読みにくい傾向にあるからです。
    子テーマなので、モバイルでも開業を有効にしたい場合は、優先度の高いCSSセレクタを書くか、importantを利用して子テーマのstyle.cssなどで、

    #main .article br {
      display: block;
    }

    とでもしておいてください。

  • #37363

    よしたか

    質問者の方と内容は同じだけどまったく逆の希望なのですが、

    これまでPC画面で文章が見やすいようにと

    <p>1行目⇒ 文章文章文章文章文章文章<br />
    2行目⇒ 文章文章文章文章文章文章</p>

    とブログを書いてきたのですが、

    WordPressへ移行するにあたり、
    ・PC表示は<br />を反映したままで
    ・スマホ表示は<br />が反映されず、改行なしのひとつづきの文章に
    という動きをして欲しいのです。

    上記のやり取りを拝見するとCSSをどこもいじらなくてもそうなるのかと思ったのですが、ダメだったので自分で

    @media screen and (max-width: 480px) {
    br { display : none ; }
    }

    を加えてみましたが反映されず、よく分からなくて困っています。
    お助けいただけますと幸いです。

  • #37364

    よしたか

    自分で解決できました。
    http://wp-simplicity.com/simplicity1-7-6/
    に記述があることに気が付きました。
    失礼いたしました。

  • #37377
    わいひら
    わいひら
    キーマスター

    一応補足説明。

    「外観→カスタマイズ→レイアウト(投稿・固定ページ)」の「モバイル端末で<br>を表示」から変更できます。

    モバイルでBRを表示

    チェックを入れることで、狭いモバイル端末でも、<br>で設定したとおりに改行が表示されます。

    引用:Simplicity1.7.6公開。モバイルでもBRタグを表示する機能、@importをまとめる、WP4.1未満でもタイトルタグを表示など。

トピック「スマホで見た場合の改行がおかしい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)