テキストの書式設定(フォントサイズ、文字色、配置、リンクなど)

文章を使ってページに追加したテキストに対して、色やフォントサイズを設定したりリンクを設定する方法について解説します。なお文章をページに追加する方法については「文章の追加」を参照して下さい。

(2022 年 04 月 13 日公開 / 2022 年 04 月 13 日更新)

太字/斜体/フォントサイズ/文字色

テキストに対して太字や色を設定します。いずれの場合も設定したいテキストを選択し、それからツールバー上のボタンをクリックして設定します。では実際に試してみます。まず設定したいテキストを選択します。

設定したい書式のボタンをクリックします。今回はツールバー上の「太字」ボタンをクリックしました。

選択されていた部分に太字が設定されます。

テキストに斜体を設定したい場合は「斜体」ボタンをクリックして下さい。

-- --

フォントサイズを設定したい場合、先ほどと同じように設定していテキストを選択してから下記のドロップダウンメニューをクリックして下さい。

フォントサイズの一覧が表示されます。設定したいフォントサイズをクリックして下さい。

選択されていた部分にフォントサイズが設定されます。

-- --

文字色を設定するには設定するテキストを選択してから「テキストカラー選択」ドロップダウンメニューをクリックして下さい。

色を選択するための画面が表示されます。文字色に設定したい色をクリックして下さい。

選択されていた部分に文字色が設定されます。

テキストの配置(左寄せ、中央、右寄せ、両端)

テキストをページの中でどのように配置するのか(水平方向)を指定することができます。全体ではなく行単位で指定できます。デフォルトでは左寄せになっています。

左寄せの場合、テキストが左側に寄って表示されます。

「中央」ボタンをクリックするとテキストは中央揃えで表示されます。

実際に試してみます。1番目の行にカーソルを合わせた後、ツールバー上の「中央」ボタンをクリックします。すると1番目の行は中央揃えで表示されます。

「右寄せ」ボタンをクリックするとテキストが右に寄って表示されます。

実際に試してみます。1番目の行にカーソルを合わせた後、ツールバー上の「右寄せ」ボタンをクリックします。すると1番目の行は右寄せで表示されます。

「両端」ボタンをクリックするとテキストが両端揃えで表示されます。

リスト表示(番号付き、番号なし)

複数の行をリストのように表示することができます。番号付きリストと番号なしリストが利用できます。リスト表示するには、まず対象となる複数の行を選択します。

番号付きリストとして表示するにはツールバー上の「番号付きリスト」ボタンをクリックします。

選択されていた行が番号付きのリストとして表示されます。(リスト表示をするとフォントサイズが大きめのサイズに設定されるようです。必要であればフォントサイズを変更して下さい)。

-- --

番号なしリストとして表示するにはツールバー上の「番号なしリスト」ボタンをクリックします。

選択されていた行が番号なしのリストとして表示されます。

リンクの設定(内部リンク、外部リンク)

テキストに対してリンクを設定することができます。リンクは同じサイト内の別のページ(内部リンク)と外部のサイトへのリンクが選択できます。リンクを設定するにはリンクを設定したいテキストを選択して下さい。

ツールバー上の「リンク」ボタンをクリックして下さい。

リンク先を設定する画面が表示されます。

同じサイト内の別のページへのリンクを設定する場合は「内部リンク」タブをクリックし、その下にあるドロップダウンメニューをクリックして下さい。

作成済みの他のページの一覧が表示されますので、リンクを設定したいページをクリックして下さい。

画面右側の「リンクを設定」と書かれた個所をクリックすればリンクの設定は完了です。

-- --

外部のサイトへリンクを設定する場合は「外部リンクかメールアドレス」タブをクリックし、下のテキストボックスに外部リンクであればURL、メールアドレスであれば user@example.com のようなメールアドレスを入力して下さい。

内部リンクの場合と同じように画面右側の「リンクを設定」と書かれた個所をクリックすればリンクの設定は完了です。

リンクが設定されたテキストには下線が表示されます。

-- --

なおテキストに設定したリンクを解除したい場合には、リンクが設定されているテキストにカーソルを合わせてからツールバー上の「リンクを削除」ボタンをクリックして下さい。テキストに設定されていたリンクが解除されます。

インデントの設定

特定の行をインデントして右側へ少しずらして表示することができます。まずインデントしたい行にマウスを合わせて下さい。(複数の行を同時にインデントする場合は複数の行を選択して下さい)。

ツールバー上の「インデント」ボタンをクリックします。

選択されていた行がインデントされて右側へ少しずれて表示されます。

インデントの場合はボタンを1回クリックする毎にインデントが行われます。先ほどの状態からもう一度「インデント」ボタンをクリックするとさらに右側へずれて表示されます。

-- --

インデントを解除するには解除したい行にマウスを合わせて下さい(複数の行をまとめて解除したい場合には複数の行を選択して下さい)。そしてツールバー上の「インデント解除」ボタンをクリックして下さい。

インデントが1段階解除されます。

インデントの解除もボタンを1回クリックするために1段階解除されます。先ほどの状態からもう一度インデント解除をクリックするとさらに1段階解除されて表示されます。

書式設定の解除

太字や斜体などのテキストに設定した書式を解除したい場合は、設定した時と同じボタンをクリックすると解除できます。例として太字と文字色を設定したものを解除してみます。

太字を解除したい場合には、解除したいテキストを選択してからツールバー上の「太字」ボタンをクリックして下さい。

選択していたテキストの太字が解除されました。

選択したテキストに行われた設定を全て解除したいしたい場合には、テキストを選択してからツールバー上の「設定解除」ボタンをクリックして下さい。

選択したテキストに行われた太字が解除され文字色もデフォルトの値に戻りました。

-- --

今回はツールバー上のボタンを使って書式などの設定を行いましたが、テキストのHTMLを直接編集することもできます。