段落が改行に変わっている

Simplicityの特徴 フォーラム Simplicityについての質問 段落が改行に変わっている

このトピックには8件の返信が含まれ、2人の参加者がいます。8 ヶ月、 2 週間前 鈴木順一 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #49267

    つとむ

    いつからかわかりませんが、気づいた時には段落していたところが改行に変わっています。

    うまく説明できないのですが、Simplicity導入サイトの

    http://blazechariot.wp.xdomain.jp/
    http://zubora.main.jp/wordpress/simplicity-structure/

    の二つのサイトがありますが、私は下の人と同じように段落しているはずなのに改行のように、文字と文字の隙間が無くなっている状態です。前まではそんなことなかったのですが。

    前までは↓

    あああああああ

    あああああああ

    あああああああ

    とちゃんと文字と文字の隙間がありましたが、

    今は↓

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

    となっています。

  • #49268

    Hidekichi

    改行自体は仕様としては変わってないと思うんですが、pタグとbrタグはcss次第でどうとでもできますし、pタグを無くしてしまえば段落にならないので、そういったカスタマイズをfunctions.phpに入れる人もいます。

    何もしてないのに変わるというのは改行や段落についてはアップデートしたからどうというのはwordpressの仕様からはないと思うので、それがSimplicityの仕様変更なのか自身のカスタマイズなのかはサイトを見てみないと何とも言えません。
    逆にサイトを見たらだいたい解ると思いますし、おかしければ修正すればよいだけのことなので、それを調べる必要があります。

    デベロッパーツールで問題の段落なり改行部分を調べて、どのようなcssになっているのかと、pタグで段落が作られているかをまず調べて、おかしいと思われているのがスマホの画面であれば、カスタマイザーでbrタグを無視するような設定が入っていないかを調べてください。

    対象のページがわからないので想像ではこれぐらいしか思いつきません。

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

    Simplicity自体では、意図的にそういった変更は加えていないつもりです。

    ただ、どういった原因なのかは、実際のページからデベロッパーツールなどで調査してみないと、何とも言えません。

  • #49400

    鈴木順一

    上の方とは違う現象かもしれませんが、私の場合、Simplicityで運用されているサイトのPC表示でのみ、段落が改行で表示されます。モバイル表示については通常に段落が入っています。
    普段利用しているブラウザはGoogle Chromeです。
    なにぶん初心者なのでうまく説明ができませんが、もし原因や対策などがあればご教授いただけると幸いです。

  • #49401

    Hidekichi

    > 段落が改行で表示されます。モバイル表示については通常に段落が入っています。

    段落が改行というのは見てみないとどういうことかわかりませんが、通常は段落も改行です。
    僕が知っている範囲でのSimplicityのcssは、brをdisplay: noneにするか否かだけなので、通常は、

    <p>何かしらのテキスト
    何かしらのテキスト
    何かしらのテキスト</p>

    こうあれば、

    何かしらのテキスト何かしらのテキスト何かしらのテキスト

    こうなって、

    <p>何かしらのテキスト<br>
    何かしらのテキスト<br>
    何かしらのテキスト</p>

    こうあれば、

    何かしらのテキスト
    何かしらのテキスト
    何かしらのテキスト

    こうなります。Simplicityのbrを非表示が聞いている場合は、

    何かしらのテキスト何かしらのテキスト何かしらのテキスト

    こうなります。

    つまり、pタグは単純にdisplay: blockかつ、margin-上下: 任意のスペースということなだけなんだと思います。またこれらはブラウザのデフォルトで設定されているもので、Simplicityでは、font-sizeと、text-align、line-heightぐらいしか設定されていないかと思います。

    逆を言えばそれらを設定すれば任意の段落にできるということです。

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

    いろいろな原因が考えられるので、できれば、実際のページのURLを貼り付けていただけると助かります。

  • #49412

    鈴木順一

    私がSimplicityで運用しているサイトは、

    http://gyousei.jsuzuki-office.com/
    http://gyousei-souzoku.com/contents/

    です。初心者で知識もないため、カスタマイザーでの変更以外は特にカスタマイズは行っていません。
    ほぼデフォルトで親テーマのみで使用しております。
    また、他の方のSimplicityで作成されているサイトも、同じように見えています。
    以前は段落がきちんと入っていたと思うのですが、いつからか段落が改行に変わってしまいました。
    私の方の使用環境に原因があったのであれば、大変お騒がせして申し訳ございません。
    何卒、よろしくお願いいたします。

  • #49414

    Hidekichi

    サイトを見てみましたが、Simplicityのデフォルトと同じなので表示的には特に問題はないんですけれども、気になったこととして、Simplicityの過去バージョンも見てみましたが2.0あたりにも.entry-content p(#the-content p)について何かしらの記述はなく、また.article pについても特にスタイルされていません。そこでブラウザのデフォルトのスタイルが適用されていると思われます。

    p {
        display: block;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
    }

    chromeではこういうのがブラウザのデフォルトなんですが、-webkit-margin-before(after)は対応しているブラウザでしか動作しませんが、意味合い的には段落の前後に1em、つまりはデフォルトのことなので16pxのマージンが入ると言う点です。

    段落の前後に1emのマージンができていますが、Simplicityの公式でもこのマージンは重なっています。

    本来であれば、

    (16pxのマージン)
    何かしらの段落とテキスト
    (16pxのマージン)
    (16pxのマージン)
    何かしらの段落とテキスト
    (16pxのマージン)

    こうなって欲しいところですが、おそらくはdisplay: blockのせいか何かしらで、

    (16pxのマージン)
    何かしらの段落とテキスト
    (16pxのマージン) ここが重なってる?
    何かしらの段落とテキスト
    (16pxのマージン)

    このようになります。例えば、

    .entry-content p {
        margin-top: 0;
        margin-bottom: 24px;
    }
    .entry-content p:last-child {
        margin-bottom: 0;
    }

    このようにした場合、段落の上はマージン0、下には24pxのスペースを作ることができます。.entry-contentは編集画面で入力した記事の部分(本文)なので、それ以外は指定しない限り今までと同様です。

    つまり該当箇所に明示的にマージンを入れるというのがわかりやすい解決方法なのではないかと。
    下方向にだけスペースを作り、最後のpはmargin-bottomを0にすることでスタイルもうまく行けるかと思います。

    別に上下にマージンを入れても良いですが、そうした場合、pの前にある要素の下マージンとpの上マージンとが加算されてデザインはしにくくなったりします。できるだけ記事内の他要素も含め下方向のみにスペースを取るようにするとデザイもしやすくなるかと思います。

  • #49444

    鈴木順一

    Hidekichi様
    初心者の私にも分かりやすいご説明、ありがとうございました。
    chromeの場合、デフォルトでは段落間にスペースが入らないのですね。
    Simplicityはとても気に入っているテーマなので、今後も色々と参考にさせていただき、自力でカスタマイズできるよう勉強していきたいと思います。

トピック「段落が改行に変わっている」への新規返信追加は締め切られています。

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