テキストの書式を設定する(太字/イタリック/打消し/文字の色)
ビジュアルエディタを使い、本文に入力したテキストに対して太字/斜体などの装飾、そして文字の色の設定を行う方法について解説します。なお下線やフォントサイズなどをビジュアルエディタで行いたい場合はTinyMCE Advancedプラグインなどを利用されてみて下さい(「TinyMCE Advancedプラグインの使い方」)。
太字/イタリック/打ち消しを設定する
最初にテキストの装飾です。太字、イタリック、打ち消しの設定ができます。
太字
「太字」アイコンをクリックすると、選択された部分のテキストが太字になります。
テキストエディタで次のように記述した場合と同じです。
<strong>家族旅行</strong>
イタリック
「イタリック」アイコンをクリックすると、選択された部分のテキストが斜体(イタリック)になります。(ただし斜体になったのは半角英数字のみで日本語は斜体になりませんでした)。
テキストエディタで次のように記述した場合と同じです。
<em>I’m so excited. 楽しみだ。</em>
打ち消し
「打ち消し」アイコンをクリックすると、選択された部分のテキストに打ち消し線が表示されます。
テキストエディタで次のように記述した場合と同じです。
<del>天気予報によれば</del>
文字色を設定する
次に文字色です。テキストの色の設定ができます。
色を設定したい部分を選択し、「テキスト色」アイコンをクリックして下さい。色を選択する画面が表示されますので色を選択して下さい。選択したテキストに色が設定されます。
テキストエディタで次のように記述した場合と同じです。
<span style="color: #ff0000;">家族旅行</span>
なお色を選択する時に「カスタム...」をクリックすると次のような画面が表示されてより細かい色の選択が可能となります。
----
記事の本文として入力したテキストに対して書式を設定する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。