改行と 段落Pの違い Webサイトで文章を正しく表示する方法【記事作成の基本】

ワードプレスのビジュアルエディタ画面を使えば 難しいプログラミングコードを使うこともなく 簡単に投稿記事を作成できるのですが 本来、文章は 様々な <要素> によってブロック分けされています。

このブロックには何が書かれているのか。どのような意味を持っているのかなど
いくつかの " 要素 “プログラミング言語を正しく使用することで情報を正しく伝えることができます。

初心者で WordPressを始めた場合に このビジュアルエディタを使っていると
間違ったコードを使って表示されてしまっている！というケースがあります。

それが  " P要素 “段落ｐ の使いかたです。

記事を作成するにあたって　まず初めに知っておきたい <要素> 段落の使いかたについてまとめてみました。

段落とは？

段落 ＝ p 要素 の “ｐ “とは パラグラフ の P・略してピー とも言います。

プログラミング言語では ひとつの文章を 一つのブロックでまとめる必要があり
<p> ~ </p> のコードで囲んだ文章が 一つの段落となります。

ビジュアル画面でブロックを表示させて確認してみます。

ビジュアルエディタ画面の左上のBOXに 現在の要素が表示されており ここから 見出しなど指定したい項目を選択します。

その４つほど右に ブロックを表示させるボタンがあり ブロック分けされているのが分かるようになっています。

うっすらとした点線と小さな文字ですが、一つの文章のブロックであることが分かります。

間違い その１ " Enter " を使った改行

ビジュアル画面で 記事作成をした場合ですが、文章の区切りを付けるのに 改行を使っていないでしょうか？

パソコンの改行（Enter）キーで文章を作成していくと、文章が 別のブロックになってしまうのです!!
例えばこんな感じに…↓

お分かりいただけますか？
私たち日本人が読んだ場合、ブロック分けされていなくても 文章として読むことはできますが、
インターネット上では、何を伝えたい文章なのかが 分からなくなってしまうのです。

HTMLを かんたんに解説
HyperText Markup Language （ ハイパーテキスト マークアップ ランゲージ ）
を略して一般的には HTML と呼ばれています。

複数の文書を相互に関連付け、結びつけるという意味のハイパーテキスト
見出し・段落など ここに何が書かれているのか、Web上で文章構造などを認識するための形式言語がマークアップランゲージです。

Wikipedia – HyperText_Markup_Language  より抜粋

間違い その２. 余白の使いかた

次に、文章と文章の間を もう少し空けたいなぁ、なんて時。改行キーを連打して、余白を作っていませんか？

この方法を使うと テキストエディタ画面では &nbsp; と表示されます。

この方法は 間違った表示方法で 余白はできますが 余計なコードが
必要以上に入っているということは 検索エンジン的にも お勧めできません。ので
文章の行間・余白を正しく設定し、無駄な改行を減らすことが大切です。

これらの設定は CSSを使ったカスタマイズで 外観カスタマイズから簡単に設定できるものもあります。

CSSを使ってコードを記述する場合は 段落Ｐブロック内の行間は line-height
ブロックとブロックの境目の余白は margin で設定することができます。

合わせて読みたい記事はこちら↓
CSS カスタマイズ line-height ～行間を調整する ～【 WordPress 】
コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識

ビジュアルエディタ と テキストエディタ

ビジュアルエディタ画面で 改行キーを押したものを テキストエディタで見てみると
一段スペースが 空けられたような状態になっています。

反対に、テキストエディタ画面で記事作成した場合は 改行キーを押しても
スペースが空けられることなく 一段だけ下がるので 同じブロックのままになります。

テキストエディタを使用する方が ラクな場合もありますが、
ビジュアルエディタの方が 本番画面のイメージを確認しながら作成できるので
初めは ビジュアルエディタが ラクだと思います。

ビジュアル画面で作成する場合の改行のしかたは
Shiftキーを押しながら Enter キーを押すことで 同じブロックのまま改行することができます。

以上、改行と 段落Pの違い Webサイトで文章を正しく表示する方法 でした！