WordPressの編集画面では改行されているのに、公開後の記事では改行されま…

記事の書き方解決済み
ユーザー1538さん
ユーザー1538

WordPressの編集画面では改行されているのに、公開後の記事では改行されません。

https://gyazo.com/f6c5207bd75b5c68554f3650beeab8f8

↑はWordPressの編集画面ですが、改行されています。

https://gyazo.com/236c112ec59b1ada49def2f82c93ccc0

ですが公開後の記事では、改行されていません。

編集画面では、適宜改行をして空白をつくっているのですが、公開後の記事では改行されなくて、ゴチャゴチャした画面になってしまいます。

今の編集画面に問題があるのかと思い、新規記事の別の編集画面で全く同じ文章を書いてコピペし、問題の箇所に貼り付けてみましたが、相変わらず改行できません。

このような現象は記事の中盤ぐらいで発生しており、記事冒頭や終盤の方では、きちんと改行できています。

HTMLやCSSはちんぷんかんぷんなので分からないのですが

https://gyazo.com/8035bd19e5555244ebadc71abf30bfb0

問題が発生している部分にタグ、きちんと改行できている部分にはタグが付いていて、この違いなのかと思います。

手作業でタグに変えていくしかないでしょうか?

みんなのコメント 7件

ベストアンサー

ユーザー660さん
ユーザー660さん

「div」タグは基本的に、 コンテンツ区分要素です。詳細は端折りますが、結論としては改行で用いることはあまりありません。
本来改行は、段落指定タグの「p」か改行要素の「br」タグを用います。

HTML や CSS がわからない方がタグの有無で改行が変化する点に気づいたのは、大きな進歩ですね。

で、本来 WordPress で改行を用いる場合は、「Enter 」キー(p タグ付与)で行うことができます。つまり、コードエディター(もしくはテキストエディター)でいちいち改行タグを入力する必要はありません。

ただし連続改行を用いる場合は、「Enter + Shift」キーの同時を押しを用いて「br」タグを付与します。要はご希望の状態にしたい場合、「Enter + Shift」キーで「br」タグを付与してください。

ただ、関係ない部分に「div」タグが付与されている現状の状態も気になります。おそらくは、アフィリエイト広告タグか何かで「div」要素を用いた場合に、「div」タグが閉じられることなく、そのまま続けてしまっているためと予想されます。そのため、記事の中盤ぐらいで思うように改行されない現象が発生しているのでしょう。
こればっかりは実際の記事を見てみないとわからないため、よろしければ記事 URL を提示してください。

ちなみにですが、句点「。」で改行するのであればまだしも、読点「、」で改行する理由がよくわかりません。ポエムブログでも運営されているのでしょうか?

質問者からのお礼コメント

ユーザー1538さん
ユーザー1538さん質問者

丁寧なご回答、誠にありがとうございました。本当に助かりました。

ユーザー1538さん
ユーザー1538さん質問者

回答ありがとうございます。

https://tama-buro.com/cleansing-type/

記事URLは↑です。
「02「クレンジングを選ぶ際の基準」ベスト3!!」というH2のなかにあるH3、「2位 「肌質で選ぶ」」で、改行できない現象が発生しています。

>読点「、」で改行する理由というのは、キャプチャした箇所の問題でそのような印象を与えてしまっていますが、記事中では「、」と「。」の使い分けはしてあります。

ユーザー1538さん
ユーザー1538さん質問者

「Enter + Shift」キーを使うと、改行が反映されるようになりました。ありがとうございました。

しかし「div」タグが付いてしまっている現象がおかしいですよね。

頂いた参照記事に書かれている、「TinyMCE Advanced」のプラグインを導入して自動整形を無効にするのが、この問題を発生させない最も確実な方法でしょうか?

ユーザー660さん
ユーザー660さん

>しかし「div」タグが付いてしまっている現象がおかしいですよね。

>頂いた参照記事に書かれている、「TinyMCE Advanced」のプラグインを導入して自動整形を無効にするのが、この問題を発生させない最も確実な方法でしょうか?

▶この問題は先に述べた通りで、「div」タグを含む何らかの要素を使用したあとに、その「div」タグが正しくとじられていないため、以降も「div」タグが自動で挿入されてしまっているがために発生しています。いただいた URL の記事では、h2 見出し『「クレンジングを選ぶ際の基準」ベスト3!!』の中の h3 見出し『2位 「肌質で選ぶ」』の中でその現象が発生していて、次の h3 見出し『使い心地で選ぶ』にてその事象がリセットされていますね。(添付画像参照)

いただいた URL の記事でこの問題を解消するには、単に不必要な部分の「div」タグを削除するしかありません。おそらくは記事執筆途中の h3 見出し『2位 「肌質で選ぶ」』挿入時に、その「div」タグが正しく閉じられずに「div」タグを引きずってしまったと予想されます。
あくまでも結果論なので発生事由は不明ですが、結果としてそうなっています。

移行の記事でこれを解消するには、記事執筆時にビジュアルエディターとコードエディターとを切り替えながら、記事の HTML 状態をチェックしていくしかないかと。「p」タグの自動挿入を停止して自動整形を無効にするだけでは、おそらく解決しないはずです。
つまり問題は、otrmgrks@gmail.com の中にあります。現状の記事執筆方法の改善するしかありません。

添付された画像

ユーザー1538さん
ユーザー1538さん質問者

丁寧なご回答、誠にありがとうございます。

h3 見出し『2位 「肌質で選ぶ」』を書くときに、「div」が付きっぱなしになる何かを、やってしまったのか・・・
原因が分からないので、おっしゃる通りHTMLを確認しつつ記事を書くか、コードが読めないため記事を書いた後に問題が発生したら、「div」タグをその都度消すか・・・どちらかに致します。

助かりました。本当にありがとうございます。

あなたの経験や知識を共有しませんか?

ほかのユーザーの相談に、コメントで参加してみましょう。

ログインしてコメントするはじめての方は無料登録