段落ブロックについて
「段落」ブロックは、使用頻度が最も多いブロックです。
このブロックを使いこなすと、単なる文章の羅列でなく、
重要な文章にハイライトを当てたり(文字の色を変更など)、
文字にマーカーを引いたりなど、
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ページに合わせて、色や装飾を設定してみてください。
最後まで、ご覧いただき、ありがとうございます。