テキストの書式設定(文字サイズ、太字、色、など)

エディタが「通常表示」になっている場合、用意されているツールバーのボタンを使って色々な書式を設定することができます。ここではエディタに入力したテキストに対して文字サイズを変更したり太字や斜体の設定、文字色や背景色を変更する方法について解説します。

(Last modified: )

文字サイズの変更

最初に文字サイズの変更を行ってみます。新しい記事の作成画面を表示して下さい。

p1-1

例として次のようにエディタに入力してみます。

p1-2

文字サイズを変更するには、対象となる文字を選択します。下記では「動物園」のところを選択しています。

p1-3

使用するツールバーのボタンは次のところです。クリックして下さい。

p1-4

文字サイズとして設定可能な6つのメニューが表示されます。この中から設定したいサイズのメニューをクリックして下さい。今回は「XL」をクリックしてみました。

p1-5

選択されていたテキストの部分の文字サイズが変更になりました。

p1-6

今度は別のテキストを選択してから文字サイズとして「XS」をクリックしてみます。

p1-7

選択されていたテキストの部分の文字サイズが変更になりました。

p1-8

このように対象となるテキストを選択して文字サイズを変更することができます。

太字/斜体/下線/打ち消し線の設定

次にテキストの装飾です。太字、斜体、下線、打ち消し線の設定ができます。使用するツールバーのボタンは次の4つです。

p1-9

文字サイズの変更と同じように対象となるテキストを選択します。下記では「動物園」のところを選択しています。そしてまず「太字」をクリックしてみると、選択されていたテキストが太字になります。

p1-10

p1-11

次に「斜体」をクリックしてみると、選択されていたテキストが斜体になります。

p1-12

p1-13

次に「下線」をクリックしてみると、選択されていたテキストに下線が表示されます。

p1-14

p1-15

最後に「打ち消し線」をクリックしてみると、選択されていたテキストに打ち消し線が表示されます。

p1-16

p1-17

テキストの色とテキストの背景色(マーカー)の設定

次にテキストの色と背景色の設定です。使用するツールバーのボタンは次の2つです。

p1-18

今回も同じようにテキストを選択します。下記では「動物園」のところを選択しています。そしてまず「文字色」をクリックして下さい。

p1-19

文字色を選択するための次のような色の一覧画面が表示されます。

p1-20

今回は緑色をクリックしてみました。すると選択していたテキストの文字色が緑色になります。

p1-21

p1-22

-- --

同じようにテキストを選択してから「マーカー」をクリックすると背景色を選択するための色の一覧画面が表示されます。

p1-23

p1-24

今回は桃色をクリックしてみました。すると選択していたテキストの背景色が桃色になります。

p1-25

p1-26

-- --

なお文字色の場合も背景色の場合も同じですが、あらかじめ用意されている色の一覧の中に色がない場合にはより細かく色を指定することができます。色の選択画面で「カスタム」をクリックして下さい。

p1-27

次のような画面が表示されますので、設定したい色をクリックするかHTMLカラーコードを直接テキストボックスに入力して色を設定して下さい。

p1-28

-- --

ツールバーを使って設定可能な書式の中で、テキストに関するものについて解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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