段落ブロックについて

「段落」ブロックは、使用頻度が最も多いブロックです。
このブロックを使いこなすと、単なる文章の羅列でなく、
重要な文章にハイライトを当てたり(文字の色を変更など)、
文字にマーカーを引いたりなど、
Webページの訪問者に特に見てもらいたい部分を強調することができます。

何気なく使っているのですが、
キーボード操作でエンターキーを押すと、ブロックが挿入されます。
このブロックがすでに「段落」ブロックとして、画面に挿入されています。

そのため、「段落」ブロックの使い方については、
特に意識せずに使われている方も多いのではないでしょうか。
下の画像では、「段落」ブロックが4つ挿入されています。

画像:「段落」ブロックの挿入状態

「段落」ブロックでは、空白の状態でも「段落」ブロックとして挿入されています。

また、この空白状態の「段落」ブロックから他のブロックに変更することができます。
画面上に「ブロックを選択するには「/」を入力」と薄く書いてあるように、
英数半角の「/」(スラッシュ)を入力後、変更したいブロック名を入れると絞り込みが可能です。

仮に、日本語入力の状態でも「・」を入力後、
英数半角の「/」にスペースキーで変換してエンターキーを入力すると「/」を入力できます。
わざわざ日本語入力の状態から英数半角に切り替えてから「/」を入力しなくてもよいです。
この操作方法は、できるだけキーボードで操作したい場合に便利な方法です。

「段落」ブロック内で改行する

「段落」ブロックを入力後、ブロックを確定するためにそのままエンターキーを押すと、
新しい「段落」ブロックが挿入されます。

文章ごとに新しい「段落」ブロックが挿入され、文章と文章の間隔が開いてしまいます。
そこで、「段落」ブロック内で改行をする方法について解説します。

画像:改行されている「段落」ブロックの状態

「段落」ブロック内で改行するには、「Shift+Enter」です。

普通に「Enter」を押すのではなく、「Shift」キーを押しながら「Enter」を押します。
たったこれだけです。

もし可能であれば、左手の指(特に左手小指)で「Shift」キーを押しながら、
右手の指(特に右手小指)で「Enter」を押す操作方法に慣れると、
キーボード操作がスムーズに進みます。

上の画像(画像:改行されている「段落」ブロック状態)では、
「文章②」と「文章③」の文字が一つの「段落」ブロック内にあり、
同じブロック内で改行されている状態です。

この「Shift+Enter」による同じブロック内での改行は、他のブロックで同様の操作になります。
「リスト」ブロックでも、一つのリスト内で改行する場合も「Shift+Enter」の操作を行います。
「吹き出し」ブロックでも「見出し」ブロックでも同じ操作方法です。
単純な操作方法ですが、よく使う操作方法なので、ぜひ指使いにも慣れてもらえたらと思います。

文字の位置を変更、文字の色を変更など

「段落」ブロックで入力した文章に、色々と装飾を加えることができます。
例えば・・・

などがあります。
これらの操作は、「リスト」ブロックや「見出し」ブロックなど、
文字を使うブロックでも同じ操作になりますので、ぜひ使えるようになってみてください。

1⃣ 文字を左寄せ・中央寄せ・右寄せにする

一つ目の、文字の位置を、右寄せ・中央寄せ・左寄せにする方法について、
下の画像を参考にしながら説明します。

まず、変更したい文章(あるいは文字)をドラッグして指定します。
次に、上部にある「左寄せ」のボタンをクリックします(初期設定は左寄せになっています)。
すると、「左寄せ」を、「中央寄せ」や「右寄せ」に変更するために、
このボタンをクリックして選択します。

画像:編集するためのボタンの位置①

「左寄せ」のボタンをクリックすると、
「テキスト左寄せ」、
「テキスト中央寄せ」、
「テキスト右寄せ」を
選択する画面が表示されます。この中から設定したいボタンをクリックしてください。

画像:テキストの位置を設定する編集②画面

中央寄せにすると・・・下の画像のようになり、画面の真ん中に位置します。

画像:中央寄せの状態

右寄せにすると・・・下の画像のようになり、画面の右側に位置します。

画像:右寄せの状態

2⃣ 文字の色を変更する

まずは、装飾したい文字をドラッグし反転させて範囲指定します。

次に、この状態で、右寄せ・中央寄せ・左寄せのボタンの並びにある、
下の画像の②の部分のボタンをクリックします。

すると編集画面が表示されます。このリストの中で「ハイライト」を選択します。

画像:文字に色をつけるための編集画面を表示

「ハイライト」をクリックすると、下の画像のように、色を指定する編集画面が表示されます。
はじめから装飾できる色は、編集画面の下部に表示されています。

もし、この中に装飾したい色が無い場合は、
格子模様の部分(色を選択する画面)をクリックします(下の画像に詳細を説明)。

格子模様の部分をクリックすると、色を選択できる編集画面が表示され、
四角の部分に色見本が表示されます。

この中に設定したい色が無いときは、四角の下部にある虹色のバーをマウスで移動させ、
四角の中の全体の色が変更されます。全体を虹色のバーで変更し、
詳細を四角の範囲でクリックすると、その色が指定されます。

もし、その色がお気に入りだったり、Webページで繰り返し使う色の場合は、
16進数で表示されている「#〇〇〇〇〇〇」の「#+6文字」の英数字をメモ書きしておくとよいです。

次回以降に、16進数の部分で入力するでき、色の変更をすると同様の16進数を入力すると、同じ色を指定できます。

画像:文字(文章)の色を選択する画面

3⃣ 文字にマーカーを引く

文字にマーカーを引くのも、文字の色を変更する操作と同じような操作方法になります。

色を変更する操作では「ハイライト」を選択しましたが、マーカーを引くには「蛍光マーカー」を選択します。

画像:マーカーを引くための編集画面を表示

マーカーの色は、文字の色を変更する時と同じように、色を選択する画面が表示されます。
すでに用意されている装飾の色もありますが、この中の色がシックリこない場合は、
現在指定している色の部分をクリックして、設定したい色を選択できます。

この時も、Webページ全体のバランスを考えて、マーカーの色をそろえたい場合は、
「カスタム」と表示されている下に表示されている「#〇〇〇〇〇〇」(英数字の16進数)を
覚えておくと便利です。

下の画像の例では「#FFFD68」が16進数の色になり、
この英数字を各マーカー部分の色に入力してそろえることができます。

画像:色を選択する画面

このような操作で、文字にマーカーを引くことができます。
下のマーカーはオレンジ色のマーカーを引いた状態です。

画像:文字にマーカーを引いた状態

4⃣ 文字に下線を引く

文字に下線を引くのも、文字の色を変更や文字にマーカーを引く操作と同じです。

下線を引きたい文字(文章)をドラッグして反転させ範囲指定します(①)。
次に上部のボタンをクリックして(②)編集画面を表示させます(③)。
編集画面のリストの中に「下線」がありますので、こちらをクリックします(④)。

画像:下線をを引くための編集画面を表示

このような操作で、選択した文字に下線を引くことができます。
マーカーよりもシンプルな表示になっています。

画像:文字に下線を引いた状態

文字の装飾や位置の変更する操作方法は、
「リスト」ブロックの文字や「見出し」ブロックの文字でも同じような操作方法です。

色や装飾は文字や文章を強調したい場合に使います。
Webページ全体が色だらけ・装飾だらけだと、
どの部分が協調したいのか(重要な部分なのか)が分からなくなるので、
できるだけ避けた方がよいWebページもあります。
制作するWebページに合わせて、色や装飾を設定してみてください。

最後まで、ご覧いただき、ありがとうございます。