段落を使ったテキストの入力と書式設定

記事を作成する場合に基本となるテキストを記事に入力する方法です。ブロックエディタでテキストを挿入するには「段落」ブロックを使用します。ここではブロックエディタを使ってテキストを挿入する方法および入力したテキストに対する書式を設定する方法について解説します。

※ 段落ブロックの詳細な使い方は「段落ブロック」を参照されてください。

(Last modified: )

段落を追加してテキストを挿入する

ブロックエディタで記事にテキストを挿入するには「段落」ブロックを使用します。実際に試してみるために、新しい記事を作成しました。

段落を追加してテキストを挿入する(1)

新しい記事を作成すると、「段落」ブロックが一つ作成されています。

段落を追加してテキストを挿入する(2)

その為、記事を作成した直後にテキストを入力していく場合は、最初から作成されている「段落」ブロックを一度クリックして選択してからテキストを入力していってください。

段落を追加してテキストを挿入する(3)

段落を追加してテキストを挿入する(4)

「段落」ブロックでテキストを入力している時に、別の段落を作成するには [Enter] キーを押してください。新しい「段落」ブロックがすぐ下に作成されて選択された状態となりますので、続けてテキストを入力していくことができます。

段落を追加してテキストを挿入する(5)

段落を追加してテキストを挿入する(6)

ブロックエディタ上で見るとテキストエディタのようなところにテキストが全部入力されているように見えますが、一つ一つの段落は独立していてそれぞれが「段落」ブロックになっています。

段落を追加してテキストを挿入する(7)

段落をクリックすると、「段落」ブロックのツールバーオプションが表示されて太字やイタリックなどの書式の設定やリンクの設定、文字色の設定などを行うことができます。

段落を追加してテキストを挿入する(8)

なお「段落」ブロックの追加は画面左上の「+」アイコンをクリックしたあと、一般ブロックの中にある「段落」ブロックをクリックしても追加することができます。

段落を追加してテキストを挿入する(9)

段落を追加してテキストを挿入する(10)

段落を追加してテキストを挿入する(11)

テキストに太字や文字色などの書式を設定する

段落に入力したテキストに対して太字や文字色などの書式を設定することができます。「段落」ブロックのツールバーには「太字」と「イタリック」を設定するアイコンが表示されています。

テキストに太字や文字色などの書式を設定する(1)

またツールバーの「▽」アイコンをクリックすると、「取り消し線」や「文字色」を設定するためのメニューが表示されます。

テキストに太字や文字色などの書式を設定する(2)

例として「太字」と「文字色」の設定を行ってみます。最初に「太字」です。書式を設定したいテキストを選択してから「太字」アイコンをクリックしてください。

テキストに太字や文字色などの書式を設定する(3)

選択していたテキストに「太字」が設定されました。

テキストに太字や文字色などの書式を設定する(4)

今度は「文字色」を設定します。書式を設定したいテキストを選択してから「▽」アイコンをクリックし、表示されたメニューから「文字色」をクリックしてください。

テキストに太字や文字色などの書式を設定する(5)

設定する文字色をクリックしてください。

テキストに太字や文字色などの書式を設定する(6)

選択していたテキストに「文字色」が設定されました。

テキストに太字や文字色などの書式を設定する(7)

なお色を選択するときに「カスタムカラー」をクリックすると、任意の色を選択することができます。

テキストに太字や文字色などの書式を設定する(8)

テキストに太字や文字色などの書式を設定する(9)

他にも「取り消し線」を設定したり「インライン画像」を挿入することができます。詳しくは「段落ブロックのツールバーオプション」を参照されてください。

文字サイズと背景色を設定する

段落に入力されているテキストの文字サイズと背景色を設定することができます。この設定は段落全体に対する設定となります。設定はサイドバーで行います。

文字サイズと背景色を設定する(1)

最初に文字サイズの設定です。「テキスト設定」の中にある「プリセットサイズ」の下にあるドロップダウンメニューをクリックしてサイズを選択してください。今回は「大」を選択してみました。

文字サイズと背景色を設定する(2)

段落に入力されているテキストの文字サイズが変更されました。

文字サイズと背景色を設定する(3)

次に「背景色」の設定です。「色設定」の中にある「背景色」の下に表示される色の中から背景色に設定したい色をクリックしてください。

文字サイズと背景色を設定する(4)

段落の背景色が設定されました。

文字サイズと背景色を設定する(5)

背景色を変更すると自動的に文字が見えやすいような色に文字色が変更されます。ただ文字色を明示的に設定していた場合は、その部分だけは変更されません。

段落を削除する

記事に追加した段落を削除するには、「段落」ブロックを一度クリックして選択したあと、ツールバーオプションの中から「?」アイコンをクリックし、表示されたメニューの中から「ブロックを削除」をクリックしてください。

段落を削除する(1)

「段落」ブロックが削除されました。

段落を削除する(2)

-- --

ブロックエディタを使ってテキストを挿入する方法および入力したテキストに対する書式を設定する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。