WordPressはビジュアルエディターを用いて、一般的なレンタルブログと同じように、日記感覚で記事を書いていくことができます。

しかし、標準のエディターでは必要最低限のボタンしかありませんので、もうちょっといろんなボタンが増やせたらいいなと思うことがあります。

今回解説したいプラグインはビジュアルエディターを強化するプラグインのTinyMCE Advancedです。

TinyMCE Advanced使用前と使用後の比較画像

簡単に導入ができますのでビジュアルエディターを使用してWordPressの記事を作成していらっしゃる方は是非導入を検討してみてください。

TinyMCE Advanced メニュー

プラグインのインストール

TinyMCE AdvancedはWordPressの公式リポジトリで公開されていますので、簡単に導入が可能です。

管理画面から簡単にインストールできますので、プラグインのインストール操作に慣れている方は飛ばして設定方法にお進みください。

ビジュアルエディターを強化するTinyMCE Advancedをインストールする手順の解説画像

管理画面から[プラグイン]>[新規追加]と進み、検索フォームに[TinyMCE Advanced]と入力し、[プラグインの検索]をクリックします。

 

TinyMCE Advancedの導入手順の解説画像です

TinyMCE関連のプラグインが多数出てきますが、私はTinyMCE Advancedを使っています。

[いますぐインストールを]クリックして、プラグインを有効化させてください。

インストールは以上で完了です。

設定方法

管理画面から[設定]>[TinyMCE Advanced]と進みます。

TinyMCE Advancedの使い方の解説画像

下に用意されている新しいボタンをマウスでドラッグし、灰色のスペースへとドロップさせると新たなボタンを追加することができます。

また、既に設置されているボタンの中に不要なボタンがあれば、マウスでドラッグ&ドロップで下のスペースへ戻すこともできます。

設置可能なボタン

  • 水平線
  • 全ツール表示切り替え
  • Blockquote
  • 均等割付
  • 切り取り
  • コピー
  • 貼り付け
  • 検索/置換
  • フォント
  • スタイル
  • コード整形
  • 表を挿入
  • 行のプロパティ
  • セルのプロパティ
  • 行を上に挿入
  • 行を下に挿入
  • 行を削除
  • 列を左に挿入
  • 列を右に挿入
  • 列を削除
  • セルの結合を解除
  • セルの結合
  • 表を削除
  • 引用
  • 挿入
  • 削除
  • 略語
  • 頭文字
  • 新規レイヤーの挿入
  • 全面へ移動
  • 背面へ移動
  • 絶対位置指定の切り替え
  • 水平線
  • HTMLソース編集
  • 制御文字の表示
  • 改行なしスペースの挿入
  • ガイドラインと非表示項目の表示切替
  • 日付の挿入
  • 時刻の挿入
  • アンカーの挿入/編集

更に細かい設定

画面の最下部付近の設定は、更に細かな設定を可能とするオプションです。

TinyMCE AdvancedのAdvance Optionの解説画像です

メニューの解説

Also enable

  • Advanced Image:チェックを入れると細かく画像の設定ができるようになる
  • Advanced List Option:チェックを入れるとリストタグの細かい設定ができるようになる
  • Context Menu:右クリックした時にTinyMCE Advancedの専用メニューが立ち上がる

私の設定は、Advanced ImageとAdvanced List Optionにチェックを入れて使っています。

Advanced Options

  • Advanced Link:リンクを張る際、細部まで設定可能になる
  • Import editor-style.css.:エディター内にテンプレートのCSSを読みこませる
  • Hide all CSS classes in the editor menus. :エディターメニュー内のCSSのドロップダウンメニューを出さなくする
  • Stop removing the <p> and <br /> tags when saving and show them in the HTML editor:勝手に<p>と<br />タグを削除しないようにする。

Advanced Linkはリンクを張る際に細かいnofollow属性なども選択できるようになります。

しかし、既存のコンテンツへリンク(過去記事にリンク)の機能が使えなくなりますので、私はチェックをいれていません。

nofollowを入れる際はHTMLエディターでいれています。

Import editor-style.cssはエディター内に各テンプレートのCSSを適用させ、実際の画面に近い雰囲気で更新ができます。

Stop removing the <p> and <br /> tags when saving and show them in the HTML editorはエンターキーを押しただけ<p>タグが、shift+enterを押した数だけ<br />が挿入されるようになります。(自動で削除されなくなる)

 

関連記事

WP Social Bookmarking Lightを導入しソーシャルボタンを設置する方法
WordPressにcbnet Ping Optimizerを導入しping送信を管理する方法
WordPressでRedirectionプラグインを使いURLをリダイレクトさせる方法
WordPressにContact Form 7メールフォームを導入する方法
WordPressの404エラーページにランダムで画像を表示させる方法
Twitter CardsをWordPressで設定し概要を表示させる方法
レビュー:WordPressで加速させる!ソーシャルメディア時代の[新]SEO戦略マニュアル
Yoastプラグインを使いセクションでG+と紐付け検索結果に著者情報アイコンを表示させる方法
Akismetを有効化してスパムコメントを防ぐ設定とAPIキーの取得方法
【初めてのWordPress】エックスサーバーにWPを簡単にインストールする方法