WordPressブログを活用していくにあたって、TinyMCE Advancedというプラグインは必要不可欠な存在です。
WordPressブログの記事投稿画面では、
- 記事の背景色の設定
- 打ち消し線
- 表の作成
といった装飾機能が備わっていません。
他にもブログ記事を作成する時に、何かと装飾の制限を受けてしまいます。
TinyMCE Advancedを使うと、上記のような文字装飾がワンタッチでできるようになり
あなたの記事にバリエーションをもたらしてくれます。
この記事では「TinyMCE Advanced」の活用方法について詳しくお伝えしますので、最後までご覧ください。
目次
TinyMCE Advancedの設定方法
TinyMCE Advancedを設定する前は記事エディタ画面はこのようになっています。
この部分に自分が使いたい装飾機能を追加していきます。
インストールと有効化
まずは以下の「TinyMCE Advanced」をインストールし、有効化してください。
WordPressプラグインのインストール方法は以下の記事を参考にしてください。
有効化まで完了させておいてください。
使いたい装飾機能を追加する
次に使いたい装飾機能を追加します。
サイドメニューの「設定」→「TinyMCE Advanced」で設定画面を開くことができます。
この設定画面では、以下のように「使用しないボタン」の欄から活用したいアイコンを選択し、ドラッグ&ドロップでエディタに追加することができます。
以下では、TinyMCE Advancedで設定できる項目の一覧を紹介しています。
確認した上で追加してください。
| アイコンと名称 | 用途 |
 | 文章を中央で揃えます |
 | 文字をイタリック体（斜体）にします。 |
 | 文章を左に寄せます |
 | 太字にします |
 | 「続きを読む」タグを追加します |
 | 文字に打ち消し線を追加します |
 | テキストの色の変更 |
 | 見出しタグを追加します。SEO面を考慮して、必ず挿入しましょう。 |
 | 文字の下に下線を追加します |
 | 文字のサイズを変更します |
 | 文字のフォントを変更します |
 | 「見出し」や「装飾」などの基本機能が装備されています |
 | 一行の文章を均等に配置します |
 | 文章を右に寄せます |
 | 選択範囲を切り取ります |
 | 設定したエディタアイコンをすべて表示します |
 | 動画の挿入、表示方法の変更 |
 | ページ内の特定の場所へのリンクを貼ります |
 | 横線を引きます |
 | 文章の始まりの位置を右側にずらします |
 | インデントを削除します |
 | 番号付きのリストを作ります。以下事例
|
 | リストを作ります。以下事例
|
 | ドラッグしているコンテンツをコピーします。 |
 | クリップボードにコピーしているコンテンツを貼り付けます |
 | 引用タグを使えます。引用した文章は引用タグで囲むようにしてください |
 | Xの２乗などを表記する時に使います 。 |
 | 文字の下に小数字を作る時に活用します |
 | 装飾をクリアします |
 | 一つ前に戻ります |
 | 取り消しした後に、一つ進みます |
 | リンクを挿入します |
 | 日時を挿入します |
 | 文字の背景色を変更できます |
 | 記事の内容を印刷します |
 | ワードなどの外部テキストツールから貼り付ける時に、余計なhtmlタグのペーストを防ぎます。 |
 | 記事内の特的の文字を指定し、すべてを新しい文章に入れ替えることができます。 |
 | 画像を挿入します |
 | ∝ などの特殊な文字を挿入します。 |
 | 追加したリンクを削除します。 |
 | 顔文字を追加します |
 | 記事エディタをフルスクリーンにします |
 | テキストエディタを開きます |
 | 非表示になっている特殊文字を表示します。 |
 | 記事エディタの行を随時表示します |
 | 半角スペースを追加します |
 | 以降「次のページを読む」先のページにします |
 | 文字列を右からにします |
 | 文字列を左からにします |
 | アイコンボタンを押さなくても、装飾ツールが使えるショートカットキーがわかります |
 | 表を挿入します |
※赤色のアイコンは、本格的にビジネスブログを立ち上げるという人には入れておいてほしいアイコンになります。
次に行うのが、「設定」と「高度なオプション」の部分になります。
WordPressでは記事を作成する時のエディタ画面で「ビジュアル / テキスト」を入れ替えることができますが、この表示を繰り返すと余計なタグが挿入されることがあります。
そうすると、修正作業がめんどくさくなります。
なので、上記の「段落タグの保持」にチェックを入れておきます。
また、より幅広いフォントサイズを活用するために「フォントサイズ」にもチェックを入れておきます。
チェックが終わったら「変更を保存」しておきましょう。
ブログ記事の装飾事例
実際に、ブログに記事を書くときに、どのようにして装飾しているのか
実際の事例を交えながらお伝えしていきます。
文字の装飾・配置
まずは文字の装飾と配置です。
記事の投稿画面で、装飾や配置を変えたい文字列を選択します。
そして、任意のアイコンを選択し、装飾を行います。
今回は「文字の太さ」「背景色」「文字のサイズ」を変更しました。
さらに「中央寄せ」もほどこします。
このように文字の装飾と配置の変更を行なっていきます。
見出しタグ
次に見出しタグの操作の仕方です。
見出しタグは「段落」というアイコンの中に収まっています
見出しタグは検索結果で上位表示するために欠かせないタグになるので必ず設定するようにしましょう。
リストタグの挿入
次にリストタグです。
リストタグは以下のように、複数の行をリスト化（まとめる）することができます。
- リスト1
- リスト2
- リスト3
使い方はリスト化したい行を全て選択し、「番号なしリスト」もしくは「番号付きリスト」をクリックするだけです。
これだけでリストが作れます。
引用タグの挿入
引用タグも検索結果での上位表示を目指すなら適切に入れておく必要があります。
引用タグの使い方は、外部から引用した文章を選択し「引用」をクリックするだけです。
ちゃんと引用タグが設定されると、以下のように斜体になり、右にずれます。
表の挿入
最後に表の挿入です。
表の挿入に関しては、以下の記事で詳しく解説しますのでぜひご覧ください。
まとめ
以上がTinyMCE Advancedの設定方法とと使い方の解説になります。
一度設定が完了してしまえば、あとは記事を書き続けるだけなので、早めに設定しておきましょう！
