段落、見出し、整形済みテキストを設定する

広告

ビジュアルエディタを使って記事の本文を作成する場合に、段落、見出し、整形済みテキストなどを文に設定する方法について解説します。

段落を設定する

段落、見出し、整形済みテキストの設定は次の位置にあるドロップダウンメニューで行います。

p8-1

ドロップダウンメニューをクリックすると、次のようなメニューが表示されます。選択可能なメニューは「段落」「見出し1」~「見出し6」「整形済みテキスト」です。

p8-2

それでは最初に「段落」についてです。入力した文章は特に指定しないと「段落」が設定されます。例えば次のようにビジュアルエディタにテキストを入力し、[Enter]キーを押してください。

p8-3

[Enter]キーを押すまで入力していた文章が「段落」となります。

p8-4

また同じように文章を入力し[Enter]キーを押すと、押すまで入力していた文章が次の「段落」となります。

p8-5

このようにビジュアルエディタで[Enter]キーを押すたびに段落が作られていきます。(同じ段落の中で単に改行したい場合には[Shift]+[Enter]を押します)。

なおテキストエディタに切り替えても段落にはタグが何も表示されていません。

p8-6

ただ実際に記事を投稿し、出力されたソースを確認してみると、段落は次のように記述されていることが分かります。

<p>水遊びが楽しい季節になりました。プールに行くのも楽しみです。</p>
<p>安全に注意して楽しく遊びたいですね。</p>

「段落」については明示的にツールバー上で「段落」を指定する必要はありませんが、例えば文章に対して「見出し」を一度設定したあとに段落に戻したい場合には「段落」をクリックして設定して下さい。

見出しを設定する

「見出し1」~「見出し6」はそれぞれ<h1>から<h6>に対応するものです。記事本文の中で見出しに該当する文章に対して設定します。例として次のように本文を入力しました。

p8-7

「見出し」を設定するには、設定したい文章のいずれかの場所にカーソルを置き、その後で設定したい「見出し」メニューをクリックします。今回は最初の文章にカーソルを置いてから、「見出し1」メニューをクリックしました。文章に「見出し1」が設定されます。

p8-8

p8-9

p8-10

「見出し1」を設定した場合は段落よりもフォントのサイズが大きく設定されました。

同じように2番目の文章にカーソルを置いてから「見出し2」をクリックしました。2番目の文章に「見出し2」が設定されます。

p8-11

p8-12

p8-13

「見出し2」を設定した場合は段落よりも少し大きいフォントのサイズが設定され、上の文章との間に多めのマージンが設定されるようです。

見出しを設定する場合、テキストエディタで次のように記述した場合と同じです。

<h1>夏の旅行計画</h1>
<h2>目的地</h2>

整形済みテキストを設定する

「整形済みテキスト」は空白や改行などを入力したまま表示したい場合に使用すると便利です。通常は複数の連続する空白は1つにまとめられ、改行は無視されますが、整形済みテキストが設定されている場合はそのまま表示されます。

例として次のように本文を入力しました。2番目の文章は[Shift]+[Enter]キーを使って文章の中で改行をしています。

p8-14

「整形済みテキスト」を設定するには、設定したい文章のいずれかの場所にカーソルを置き、その後で「整形済みテキスト」メニューをクリックします。今回は2番目の文章にカーソルを置いてから、「整形済みテキスト」メニューをクリックしました。文章に「整形済みテキスト」が設定されます。

p8-15

p8-16

p8-17

「整形済テキスト」を設定した場合は文章の背景がグレーに変わるようです。

整形済テキストを設定する場合、テキストエディタで次のように記述した場合と同じです。

<pre>
if (x = 10) then {
        x = x + 1;
}
</pre>

プレビューで確認してみると、整形済みテキストに設定された文章の中では、複数の連続する空白もそのまま表示されていました。

p8-18

----

ビジュアルエディタを使って文章に段落、見出し、整形済みテキストを設定する方法について解説しました。

WordPressの使い方の他の記事を見てみる

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)