歌詞のような改行の多い文章は「整形済みテキスト」で記入
ワードプレスで文章を記入するブロックは段落ブロックになりますが、途中で改行を入れると、次の段落ブロックに移ってしまいますので、歌詞のような改行が多い文章を入力するには段落ブロックでは不都合です。
そこで、「整形済みテキスト」というブロックを使います。
整形済みテキストブロック追加
「+」ボタン（ブロックの追加）をクリックします。
よく使うブロックが表示されますので、無い場合は下の「すべて表示」をクリックします。
テキスト関連のブロックの中に「整形済みテキスト」がありますので、クリックします。
または、未記入の段落ブロックに「/」（半角スペース）を入力すると、ブロックが一覧表示されます。下の方にスクロールしていくと「整形済みテキスト」がありますので、クリックします。
段落ブロックと整形済みテキストブロックの違い
段落ブロックと整形済みテキストブロックは、改行するとそれぞれ下のようになります。
文字色や文字背景色、アンダーラインなどは、段落ブロックと同じように、編集画面上に表示されるブロック・文書ツールバーから変更できます。この後に記載しますが、フォントサイズはCSSで設定します。
CSSで編集
整形済みテキストブロックに枠を付けます。ブロックに枠を付ける方法についてはこちらにも記載しております。目的のブロックをクリックして編集状態にしてから編集画面右サイドバー下の「高度な設定」内、「追加CSSクラス」に半角英数字で名前を付けます。
「プレビュー」、「新しいタブでプレビュー」をクリックします。
プレビュー画面の上部、「カスタマイズ」をクリックします。
左サイドバー一番下の「追加CSS」をクリックします。
ボックス（ブロック囲み枠）「border」
CSSを記入していきます。waku02というのは編集画面の追加CSSクラスで付けた名前で、.(ドット)クラス名 { (なみかっこ) の書き出しから始まります。まずは青紫色の二重線を指定しました。コンテンツ領域いっぱいに枠が表示されますのでここから体裁を整えていきます。borderプロパティや線種、色の指定などもこちらで詳しく記載しております。
体裁を整えるためにはまず余白を指定します。余白には2種類あり、コンテンツ領域の端から枠線までの外側の余白と、領域内の要素から枠線までの内側の余白です。それぞれ「margin」(マージン)、「padding」(パディング)というプロパティを使います。（分かりやすくするために、上下に「区切り」という線のブロックを配置しました。）
外側の余白（マージン）「margin」
下の画像は、マージンを50pxに指定したものです。この指定方法だと上下左右とも50pxになります。単位はとりあえずpx(ピクセル)を使います。emやremという単位については後で説明します。
上下のマージンはそれほど必要ないという場合は、上下と左右で別の値を指定します。下の画像は、上下のマージンが10px、左右のマージンが50pxです。二つの値を半角スペースで区切って記入します。
また、上下左右を個別の値にしたいときは、margin-top、margin-bottom、margin-left、margin-rightのプロパティを使えば別々の値を指定することができます。
内側の余白（パディング）「padding」
次に内側の余白である「padding」です。20pxに指定しました。テキストの周りに余白ができます。
ボックスの幅「width」
この状態だと右側のパディングが広いので、右のマージンを大きくする方法もありますが、今度は整形済みテキストの囲み枠自体の幅を指定します。「width」プロパティを使い、テキストの横幅に合わせて数値を指定します。枠内にきれいに収まりました。（左右のマージンを50pxに指定しましたが、枠の幅を指定した場合、マージンの数値は左側に適用されます。）
ここまでは、margin,padding,width プロパティを使って囲み枠の方を調整する方法でした。
単位「em」「rem」
今度は、前述した単位についてです。px(ピクセル)という単位は最も一般的で分かりやすいのですが、一部分の数値を変えると、きれいに収まるように他の部分もそれに合わせて数値を変更しなければなりません。例えば下の画像のように、フォントサイズをlargeに指定すると、右が詰まり下にスクロールバーが表示されてしまいますので再度 width プロパティの値を調整しなければなりません。
そこで、相対単位である em や rem を使います。emは、そのブロックで指定したフォントサイズ（指定していなければその上位で指定したフォントサイズ）を基準にし、remは大元のhtmlで指定したフォントサイズを基準にします。いずれも指定していない場合は、ブラウザのデフォルトの16pxのフォントサイズが基準となります。
下の画像では、内側の余白（padding）を1em、ブロックの幅（width）を7.5emにしました。1emが、指定するフォントサイズ1文字分ということになります。ですので、フォントサイズを変更すればそれに応じて余白と幅が自動的に変わります。
HTMLという、ページを表示するために記述する言語の最初の部分にフォントサイズを指定して記述した場合、1remはそのサイズということになります。あまりその部分にフォントサイズを記述することはないかもしれません。ですので通常はブラウザの標準サイズである16pxが1remとなります。
外側の余白であるmarginをemで指定した場合、ボックス内の文字サイズを大きくするとボックス自体の表示位置が右にずれてしまいます。そこでmarginをremで指定します。
改行幅（行高さ）「line-height」
最後に整形済みテキストの改行幅（行高さ）を調整します。「line-height」プロパティを使います。値は、「em」「％」など単位を付けるか、もしくは数値のみで記入します。１＝1em＝100％となりますので、数値のみでいいと思います。
整形済みテキストブロックの追加と、CSSによる編集については以上です。
