⚫︎
ポイント運用でゴールド投資

WordPressで改行する方法

スポンサーリンク

ブロックエディターでレイアウト

HTMLとCSSのちがい

プログラミング言語のHTMLとCSSは、Webページを構成する要素。

HTMLがコンテンツの構造を作るのに対し、CSSはコンテンツのデザインやレイアウトを指定。

HTMLの<br>や<p>タグを連続して文書のレイアウトにデザインを加えるのは、HTML本来の役割ではありません。

その代わりに文書の見た目をレイアウトする役割を担うCSSを使います。

Webページを構成する要素

HTML コンテンツの構造

CSS コンテンツのデザイン

段落と改行の使い分け

WordPressのブロックエディターは2種類。

直感的に操作できる「ビジュアルエディター」。

HTMLを直接打ち込む「コードエディター」。

投稿の編集画面の右上、オプションから選択可能。

ビジュアルエディターは書いた文章のデザインもすぐ確認できて便利。

改行したいときに用いるのがShift+Enterです。

Enter 段落(ブロック)を追加する
Shift+Enter 改行する

<p>タグと<br>タグの意味

<p>タグとはPragraphの意味。

<p>と</p>で囲んだ範囲のテキストを段落として指定。

<br>はBreakを意味し、改行するときに使用します。

Enter <p>テキスト</p>
Shift+Enter テキスト<br>

空白行の作り方

空白行を使うときの注意と対策

以前は&nbsp;というコードを<p>タグに挟んで空白行を表していました。

今はCSSを使って余白をデザインする方が自然であるとされています。

文章を読みやすくするために、改行や段落を使って空白行を作る方法は便利。

しかし、<br>タグや<p>タグを続けて打ち込むのは、HTMLコードを書くうえで推奨されていません。

連続しての使いすぎには注意が必要です。

スペーサーブロックでデザインする

<br>タグや<p>タグの連続を避けて空白行を作りデザイン性を高めるには、スペーサーというブロックが便利。

ブロック追加からスペーサー選ぶと、設定から自由に空白の高さを指定可能。

段落や画像の余白をレイアウトするときにも便利なブロックです。