基本的にHTMLで記述していけばWordPressでもどんなテキスト効果でも可能です。
ただ今回は、WordPressのエディタの標準機能で付いているテキスト効果の種類と付け方についてを紹介していきます。
また今回紹介する方法では、標準エディタのGutenbergを使用します。
テキスト効果の種類
WordPressの標準機能では以下のテキスト効果がワンクリックで簡単に可能です。
- 太字
- 斜体
- 下線
- 打ち消し線
- カラー
- ハイパーテキストリンク
下記は実際の見た目です。
各テキスト効果の付け方
太字（ボールド）
太字にしたい文字を選択して、上記の「B」のボタンを押せばOKです。「B」は「Bold」のイニシャルです。
ショートカットキー：「Command + B」
HTML要素：「strong」
<p><strong>HTMLの記述</strong></p>斜体（イタリック）
斜体にしたい文字を選択して、上記の「I」のボタンを押せばOKです。「I」は「Italic」のイニシャルです。
ショートカットキー：「Command + I」
HTML要素：「em」
<p><em>HTMLでの記述</em></p>下線（アンダーライン）
WordPressのブロックには無し。だがショートカットキーで可能。
ショートカットキー ：「Command + U」
HTML要素：無し（CSSで指定→ style=”text-decoration: underline;）
<p><span style="text-decoration: underline;">HTMLでの記述</span></p>打ち消し線
打ち消し線を付けたい文字を選択して、上記の「▼」のタブの「打ち消し」を押します。
HTML要素：「s」
<p><s>HTMLでの記述</s></p>カラー
右側の設定項目の「色設定」から背景色とテキストカラーを選択できます。
HTML要素：無し（CSSで指定でカラーコードを指定。詳しくは下記の記事）
ハイパーテキストリンク
リンクを付けたい文字を選択して、上記の🔗マークをクリックします。開いたテキストボックスにリンク先となるURLを入力します。その後↩︎をクリックするとハイパーリンクテキストになります。
ショートカット可能：URLをコピーしたらテキストを選択した状態でペースト。
HTML要素：「a href=”URL”」（詳しくは以下の記事）
<p><a href="https://kt-life.net">これはリンクです。</a></p>以上が「ワードプレスでテキスト効果を付ける方法（ショトカあり）」でした。
もちろんですが、これらのテキスト効果はHTMLで直接記述しても表現されます。またワンクリック機能がないテキスト効果もHTMLで直接記述すれば表現されます。
テキスト効果を適度に使い文章に強弱を付けることによって、ユーザーにどの部分が最も重要かを示す事ができ、読みやすい文章になるかと思います。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
