サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年7月20日 11:26
いつもお世話になっております。今更な質問をして申し訳けありません。
記事が「見出し」と<p></p>タグだけで構成されていても十分体裁が良いのですが<p> </p>タグを挟んでちゃんと「改行」したほうが良いのでしょうか？
スマホで見てもパソコンで見ても、改行ナシでまったく変ではありません。
ご教授のほうよろしくお願いいたします。
2020年7月20日 13:38
前略、menkakaka さん
menkakaka さんのサイトの本文の ｐタグ（段落）には、上側と下側に、それぞれ「2em」分の高さのマージンが設定されているようです。
.entry-content > p, .sidebar p {
margin: 2em 0;
line-height: 2;
}
ですので、それでバランスよく配置されているのでしたら、特に問題はないと思います。
仮に、以下の空白の段落を間に入れますと、より空白の高さが増すと思われます。
<p> </p>
なので、空白を増やしたいときは、有効なのかもしれません。
ただ、
<p> </p>
は、段落の中身を空白にしただけのものですので、「改行」の指定ではありません。
HTMLの改行コードは、
<br>
ですが、最近は、いろいろな画面幅の端末で表示されるため、段落の途中に改行コードを入れると、パソコンでは、上手く表示されても、スマホでは、変なところで改行されちゃったりするので、多用しない方が良いかもしれません。（できるだけ使わない方がよいのかも・・）
Topic starter
2020年7月20日 23:08
@leafytreeさん、ご回答ありがとうございます。
それでバランスよく配置されているのでしたら、特に問題はないと思います。
あのあと、Enterキーを使わなくても良いと解釈できる参考サイトも見つかったのですが、それで構わないのでしょうか？
さきほど説明した通り、pタグの前後には改行が入ります。ブログなどで文章を書く場合には、pタグだけ使うようにするのがおすすめです。<p>~</p>に囲まれた部分は「段落」を表します。「改行が必要なところ＝次の段落に行くべきところ＝次の<p>~</p>」となるのが、理想的なわけですね。
サルワカさんのHTMLで改行する方法：brとpタグの使い分け方は？参照
因みに「<br></br>を使わないほうが良い」の理由の方は理解出来ました。
お手数おかけします汗
Topic starter
2020年7月20日 23:21
@sarukoさん、ご回答ありがとうございます。旧式のエディターが使いやすいので戻してあるのですがブロックエディターに変更するようなことがあったら利用してみます。
<p>や<br>タグで改行するのはオススメしません。
それと「<p>」というのは「<p> </p>」のことですか？分かってなくてすみません汗
ん？「Enterキーの連打はいけない」もよく皆さん書かれていますが、たった今意味が分かったような気がします。
Enterキーを1回ならば「<p> </p>」は挿入されないですものね？
つながったひとかたまりの文章を書いた後Enterキーを1回押して次に行って良いということでしょうか？
2020年7月21日 09:43
@menkakaka さん
Enterキーを1回ならば「<p> </p>」は挿入されないですものね？
つながったひとかたまりの文章を書いた後Enterキーを1回押して次に行って良いということでしょうか？
以下の、
は,文字実態参照で、それを段落のタグである、ｐタグで囲むことで、空白の行を１行入れる用途でもよく使われるようです。
HTMLで空白を入れたい時に使う謎の文字＆nbsp; とは？
ですので、空白の行を入れたいときに以下を用いれば良いと思います。
<p> </p>
＜ｐ＞タグは、ブロック要素ですので、親のコンテナの横幅いっぱいに広がります。
ですので、「 」を一文字入れるだけで１行分の空白行ができる訳です。
空白の行が必要ない場合は、Enterキーは１度だけで、
<p>最初の段落</p>
<p>２番目の段落</p>
<p>３番目の段落</p>
という具合になるように、記述すれば良いかと思います。
Topic starter
2020年7月21日 10:52
参考サイトまで用意していただきありがとうございます。
文字実体参照とだんだん難しくなって来ましたね汗
「 」は、敢えて空白の行を作りたい時に使うものであって、普段は要らないということですね。
バランスよく配置されているのでしたら、特に問題はないと思います。
パソコンでもスマホでも「 」無しでバランスが良いので、今まで通りにします。
このことに気づく前の記事は大体「 」が入ってしまっています。
一括でする方法は「置換」というワードがよぎったのですが、100記事～ですし、リライトもしなくてはいけないので個別に対処することにします。
それと、今、この経緯をブログに書いているのですがリンクを貼ればOKですか？
Topic starter
2020年7月22日 12:25
「Enterキーで改行」などと訳のわからない質問をしてしまいましたが、ご回答くださった皆様には大変お世話になりありがとうございました。
今回のことを、よくおさらいをしてブログにもまとめてみましたのでリンクを置いておきます。間違っていたらご指摘くださると嬉しいです。
WordPressでの行間と段落・改行についてのおさらいをしてみました
それとフォーラムのこのスレッドのリンクを貼らせて頂きました。
かなりトロイですが今後ともどうぞよろしくお願いいたします。
2020年7月22日 19:36
@menkakaka さん
ほぼ合っているとは思いますが、今回の件は、段落と次の段落との間の上下方向のスペースの話なので、厳密には、「行間」ではありません。
これは、一般的には、ｐタグの上方向と下方向の「margin」をCSSで指定することで、調整することができます。
一方、「行間」とは、同じ段落であっても、自動的に折り返されて、２行、３行、あるいは、長い文章であれば、もっと行数が増えてくる場合もあるかと思いますが、その、同じ段落の複数行の上下方向の「行」の間隔を示す言葉が「行間」ということだろうと思われます。
この行間を調節するのによく使われるのが、CSSの「line-height」というプロパティです。
「CSS 行間」などのキーワードでググっていただければ、情報が得られるかと思います。
【CSS】line-heightで行間を調整する方法：おすすめの値は？
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。