本当は教えたくないお宝KW発見ツール >>

TinyMCE Advancedの設定と使い方|日本語化からカスタマイズ例まで

WordPressのエディター機能はデフォルトのままでも充分に便利ですが、TinyMCE Advancedプラグインを導入することで更に魅力的な記事作成が可能になります。

デフォルトのエディターでは操作できない

  • 表の挿入
  • 文字の検索置き換え
  • HTMLソースコードの直接挿入

などの作業が非常に容易になりますので、導入がお済みでない方は是非使ってみていただきたいです。

このページでは、そんなTinyMCE Advancedプラグインの設定と使い方をご紹介していきます。

お宝KW発見ツール

TinyMCE Advancedを日本語化するには

アフィ
アフィ

まず最初に、TinyMCE Advancedプラグインの日本語化についてお話しておきます。

以前はTinyMCE Advancedは英語表示となっていましたが、現在は日本語化ファイルを仕様せずともデフォルトで日本語になっています。

そのため、現在は普通にプラグインをインストールすれば元から日本語で使用できます。

TinyMCE Advancedの設定方法

ここからはTinyMCE Advancedプラグインの設定を行っていきましょう。

まずは、WordPressにTinyMCE Advancedをインストール&有効化してください。

TinyMCE Advanced

WordPressのプラグインのインストール方法|手動&FTPのやり方も解説
このページでは、WordPressのプラグインのインストール方法を紹介しています。 プラグインのインストールはWordPressを使っていく上で必須のスキルですので、是非この機会に色々なプラグインのインストール方法があることを覚えてお...

 

プラグインのインストール&有効化が完了したら、ダッシュボードの設定の中にあるTinyMCE Advancedをクリックします。

 

2つのタブが表示されますので、自分が使っているエディターを選択しましょう。

多くのユーザーがクラシックエディターを使っていますので、今回はクラシックエディターのカスタマイズを行っていきます。

Classic Editor(TinyMCE)をクリックしましょう。

エディター設定

使用しないボタンの中から、使用したいボタンをドラッグアンドドロップでメニュー内に持っていきます。

 

全てのボタンを使用する設定にすることもできますが、そうするとエディターが窮屈になり非常に使いにくいです。

後ほどおすすめのカスタマイズ例をご紹介していますので、そちらを参考に利用ボタンを決めると良いでしょう。

先にカスタマイズ例を見る

設定

設定項目では下記の5つの設定が行なえます。

基本的にデフォルトのままで問題ありませんが、必要であればこちらもカスタマイズすると良いでしょう。

  • Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
    Gutenberg(ブロックエディター)において、全てのブロックでTinyMCE Advancedプラグインで設定したツールバーを1番上に表示します
  • リストスタイルオプション
    番号なしリスト・番号付きリストを作るときに点や数字を先頭に挿入します
  • コンテキストメニュー
    右クリックにて表挿入などが行えるようにします
  • 代替リンクダイアログ
    リンク設定のボタンよりページ内リンクを作成します
  • フォントサイズ
    文字の大きさを設定できるようにします

高度なオプション

高度なオプションではKeep paragraph tags in the Classic block and the Classic Editorにチェックを入れておきましょう。

ここにチェックを入れることで、クラシックエディターを使用中にビジュアルエディターとテキストエディターを切り替えてもHTMLタグが自動で削除されなくなります。

 

それ以外はデフォルトで問題ありません。

ここまででTinyMCE Advancedプラグインの設定は完了ですので、最後に変更を保存をクリックしましょう。

TinyMCE Advancedのカスタマイズ例

アフィ
アフィ

TinyMCE Advancedでは、以下のボタンを利用可能にしておくのがおすすめです。

アイコンツール名用途
段落h2やh3見出しを利用するときに使います
フォントサイズ文字の大きさを変更するときに使います
スタイル※CocoonのみCocoonテーマの独自機能を使います
取り消し最後に行った作業を取り消します
やり直し取り消した作業を復元するときに使います
引用他サイトの文章などを引用して利用するときに使用します
番号なしリスト番号なしの箇条書きリストを作るときに使用します
番号付きリスト番号ありの箇条書きリストを作るときに使用します
左寄せ文字を左寄せ表示するときに使用します
中央寄せ文字を中央寄せ表示するときに使用します
リンクの挿入/編集文字にURLリンクを設定したいときに使用します
リンクの削除URLリンクを設定した文字のリンクを削除するときに使用します
打ち消し文字の上に横線を引くときに使用します
横ライン記事に横線を引くときに使用します
テーブル表を挿入するときに使用します
検索と置き換え特定の文字の検索や、検索した文字を別の文字と置き換えるときに使用します
ソースコードビジュアルエディターのままソースコードを挿入するときに使用します
太字SEO的に重要なキーワードを囲む際に使用します
テキスト色文字の色を変更するときに使用します
背景色文字の背景色を変更するときに使用します

TinyMCE Advancedの使い方

ここまでの手順でTinyMCE Advancedプラグインの設定が完了していますので、あとはいつもどおり新規投稿画面に移動していただければ、先程設定したメニューがエディター内に設置されています。

アフィ
アフィ

使い方はデフォルトで設定されていたものと全く同じですので、各メニューごとに説明する必要もありませんね。

TinyMCE Advancedでスタイルが表示されないときは

Cocoonテーマを利用しているユーザーがTinyMCE Advancedプラグインを導入した場合、スタイルというCocoonの独自メニューが消えてしまいます。

 

ですが、TinyMCE Advancedプラグイン設定画面内の使用しないボタンの中にきちんと格納されていますのでご安心ください。

先に紹介した手順でスタイルをメニュー内にドラッグ・アンド・ドロップすれば、また使えるようになります。

コメント