WordPressのエディタ機能は非常に優秀で便利。
専門知識無しで文字をカンタンに装飾することができます。
- 見出し
- 箇条書きリスト
- 太字
- 文字色
通常であれば難しいHTML言語が必要な文字装飾がボタン一つで作れます。
あまりにもカンタンなのでゴテゴテと文字を装飾してしまいがちなのですが、装飾はあくまで脇役。
最小限のポイントを強調する程度にとどめて、あくまでコンテンツを中心にバランスを取ることをオススメします。
文字を装飾する方法
文字装飾は「新規投稿」または既存コンテンツの「編集」から行います。
ビジュアルエディタ、テキストエディタどちらでも文字装飾は可能ですが、ビジュアルエディタの方が見やすく分かりやすいのでオススメです。
エディタの本入力ボックスの上部にあるのが「ツールバー」。 テキストをワンタッチで様々な形に装飾することができるボタンの集まりです。
使い方は全て同じ。
- 装飾したい文字列を選択して反転表示
- ツールバーのボタンをクリックして適用
（※例は太字）
指定した場所に、装飾が反映されます。
ツールバーの装飾ボタンの種類
| ボタン | 機能 | HTMl/CSS |
|---|---|---|
 |
太文字 – 文字を強調文字にします | <strong> |
 |
斜体 – 文字を斜体にします | <em> |
 |
打ち消し線 – 文字に打ち消し線を入れます | <del> |
 |
箇条書き（リスト） – 箇条書きリストを作ります | <ul><li> |
 |
箇条書き（番号） – 番号付きの箇条書きリストを作ります | <ol><li> |
 |
引用 – 引用マークを付けます | <blockquote> |
 |
横ライン – 横いっぱいの区切り線を引きます | <hr /> |
 |
左寄せ – 文章を左寄せにします | text-align:left |
 |
中央寄せ – 文章を中央寄せにします | text-align:centr |
 |
右寄せ – 文章を右寄せにします | text-align:right |
 |
リンク – テキストにリンクを入れます | <a> |
 |
リンクを消去 – リンクを消去します | |
 |
「続きを読む」を挿入 – 「moreタグ」を挿入します | <!—more—> |
 |
ツールバーの切り替え – ツールバーの表示を切り替えます | |
 |
見出し – 文章を見出しに変えます | <h1>-<h6> |
 |
下線 – 文字に下線を引きます | text-decoration:underline |
 |
両端揃え – 文字の両端を揃えます（日本語ではうまく機能しない事が多い） | text-ailgn:justify |
 |
文字色 – 文字の色を変更します | color:# |
 |
テキストとしてペースト – コピーした際に付随している文字装飾情報を破棄して貼り付けます | |
 |
書式設定をクリア – 装飾情報をクリアします | |
 |
特殊文字 – 特殊文字を挿入する際に使います | |
 |
インデントを減らす – 左側の余白を減らします | padding-left |
 |
インデントを増やす – 左側の余白を増やします | padding-left |
 |
取り消し – 直前に行った動作を取り消します | |
 |
やり直し – 取り消した動作を元に戻します |
コンテンツサイトに必要な文字装飾とは？
たくさんの装飾ボタンがありますが、全てを使う必要はありません。
コンテンツマーケティングに使うテキスト装飾は限られています。
以下の12個の装飾を覚えておくだけで、9割以上はカバーできます。
また、★が3つ以上の装飾で8割以上をカバーできます。
| ボタン | 機能 | 使用頻度 |
|---|---|---|
| |
太文字 – 文字を強調文字にします | ★★★★☆ |
| |
箇条書き（リスト） – 箇条書きリストを作ります(ul li) | ★★★★☆ |
| |
箇条書き（番号） – 番号付きの箇条書きリストを作ります(ol li) | ★★★☆☆ |
| |
引用 – 引用マークを付けます(blockquote) | ★☆☆☆☆ |
| |
中央寄せ – 文章を中央寄せにします(text-align:centr;) | ★★☆☆☆ |
| |
リンク – テキストにリンクを入れます(a) | ★★★☆☆ |
| |
リンクを消去 – リンクを消去します | ★☆☆☆☆ |
| |
「続きを読む」を挿入 – 「moreタグ」を挿入します(–more–) | ★★☆☆☆ |
| |
見出し – 文章を見出しに変えます(h1-h6) | ★★★★☆ |
| |
下線 – 文字に下線を引きます(text-decoration:underline;) | ★☆☆☆☆ |
| |
文字色 – 文字の色を変更します(color) | ★☆☆☆☆ |
| |
テキストとしてペースト – コピーした際に付随している文字装飾情報を破棄して貼り付けます | ★☆☆☆☆ |
コンテンツサイトでは派手な装飾は必要ありません。
- シンプル
- 読みやすい
- ポイントだけを強調
に注意しておくと、玄人っぽいサイトになります。
逆に、バランスの悪い装飾をゴテゴテ付けてしまうと、素人っぽさが出てしまってコンテンツの価値を下げてしまいます。
意図しない装飾で困ったときは？
コンテンツの編集を繰り返していると、まれに思い通りの装飾ができなくなることがあります。
HTMLタグが重複したり入れ子になってしまって、エディタが装飾を正しく認識できなくなっているのが原因です。
対処方法としては、
- 「テキストエディタ」に切り替えて該当部分を削除
- 該当部分を選択して、「書式設定をクリア」ボタンをクリック
| ボタン | 機能 | HTML/CSS |
|---|---|---|
| |
書式設定をクリア – 装飾情報をクリアします |
「テキストエディタ」ではHTMLソースコードを間違って消してしまうことがあるので、
まずは、「書式設定をクリア」を試してみることをオススメします。
