言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

WordPressプラグイン

「TinyMCE Advanced」の便利な使い方と設定方法

投稿日:2018年11月25日 更新日:

<この記事を読むのに必要な時間は約 8 分です>

ブログを運営している人には、「TinyMCE Advanced」というプラグインを使用している人が多いのではないでしょうか。

私も以前から使っていたのですが、ビジュアルエディタで使用するボタンをカスタマイズする程度で、まったく使用していなかった便利な機能がいくつかあることに気付きました。

そこで、ここでは「TinyMCE Advanced」の便利な使い方とその設定方法をまとめたいと思います。

 

「TinyMCE Advanced」の便利な使い方とその設定方法

それでは、以下に「TinyMCE Advanced」の便利な使い方と設定方法を説明します。

 

エディター設定を表示する方法

ここではプラグインのインストールに関する手順は省略しています。

「TinyMCE Advanced」の設定を行うには、まず「エディター設定」画面を表示します。

WordPress管理メニューの「設定」⇒「TinyMCE Advanced」をクリックします。

WordPressの管理メニューから「TinyMCE Advanced」のエディター設定を表示する時の操作

 

エディターメニュー・ボタンの配置をカスタマイズする

「エディター設定」画面が表示されたら、まずはエディターメニューの表示とボタンの配置についての設定を行います。

「TinyMCE Advanced」のエディター設定画面

この画面では投稿画面のビジュアルエディタで使用するボタンをカスタマイズすることが可能です。

文字の装飾や文章の体裁を整えるのに使うボタンを選んでボタンをドラッグアンドドロップすることで、エディタに追加したり不要なものを表示しないようにしたりすることができます。

記事の作成には「下線」「背景色」「スタイル」「打ち消し」といったものを使用する機会が多いですが、「検索置換」や「アンカー」もあると便利です。

たとえば「テキストエディター」と「テキストエディタ」が混ざってしまった時に、「検索置換」を使うと簡単にどちらか片方に統一することが可能です。

また「アンカー」ボタンを使うと、ページ内リンクを簡単に設置することができます。

 

設定

次に、「設定」で以下の項目から必要なものにチェックを入れて、ビジュアルエディタをさらに使いやすくすることができます。

「TinyMCE Advanced」の設定項目

リストスタイルオプション:アンオーダードリスト(順不同リスト)やオーダードリスト(順序付きリスト)のデザインに黒丸や数字だけではなく、英数字や白丸などを追加する

コンテキストメニュー:投稿画面のビジュアルエディタで右クリックした時に「TinyMCE Advanced」独自の右クリックメニューを表示する

代替リンクダイアログ:ビジュアルエディタでリンクボタンをクリックした時に「TinyMCE Advanced」のリンクダイアログを表示する

フォントサイズ:フォントサイズを「8px~96px」で選択できるようにする

 

アンオーダードリストのデザインを選択する

上記の「リストスタイルオプション」にチェックを入れた場合には、アンオーダードリストを追加するボタンの右側に「▲」が表示されます。

そして、この部分をクリックしてリストのデザインを「デフォルト」「白丸」「黒丸」「四角」から選択することが可能です。
アンオーダードリストのデザインを選択する時の表示

ここで「白丸」「黒丸」「四角」を選んだ場合には、それぞれ以下のように表示されます。

アンオーダードリストを「白丸」「黒丸」「四角」で表示した時の画面

 

 

オーダードリストのデザインを選択する

また、「リストスタイルオプション」にチェックを入れるとオーダードリストが以下の項目から選択できるようになります。

「TinyMCE Advanced」でカスタマイズした時にオーダードリストで選択できるデザインの種類

それぞれのオーダードリストの表示は以下のようになります。

オーダードリストをギリシャ文字やラテン文字で表示した時の状態

数字だけではなくさまざまな表示の仕方ができるようになるので、ただの数字で1~順に並べるのではなくギリシャ数字を使いたい時に役立ちます。

 

右クリックメニューを変更する

また「設定」⇒「コンテキストメニュー」にチェックを入れた場合には、ビジュアルエディタで右クリックをすると以下のようなメニューが表示されます。
「TinyMCE Advanced」でカスタマイズした時に表示される右クリックメニュー

メニューのボタンをクリックしなくても、このメニューからリンクの設定や表の挿入などをすることが可能です。

 

「nofollow」の有無を選択できるリンクダイアログを表示する

また「代替リンクダイアログ」にチェックを入れると、以下のようにビジュアルエディタでリンクボタンをクリックした時に、「nofollow」の有無を選択できる項目が追加されたリンクダイアログを表示することができます。

「TinyMCE Advanced」でカスタマイズした場合のリンクの挿入画面

 

高度なオプション

次に、「高度なオプション」では以下の設定を行うことができます。
「TinyMCE Advanced」の高度なオプション

CSSクラスメニューの作成:editor-style.cssを読み込んで、ビジュアルエディタを実際のサイトと同じような表示にする

段落タグの保持:テキストエディタの自動補完機能を停止して、通常は削除される「<p>」「<br/ >」タグを表示する

画像元の貼り付けを有効にする:画像を直接エディタに貼り付ける

必要な項目を選択したら、画面右上もしくは右下にある「設定を保存」をクリックします。

 

管理(設定のエクスポート・インポート)

次に「管理」では、そのサイトでカスタマイズした「TinyMCE Advanced」設定をエクスポートもしくはインポートすることができます。

「TinyMCE Advanced」の管理画面

複数のサイトを運営していて、同じ設定を適用したい時にエクスポートやインポート機能を使うと設定を効率化することが可能です。

 

エクスポート手順

設定のエクスポートは以下の手順で行うことができます。

まず、「管理」の「設定のエクスポート」ボタンをクリックします。

そして以下の画面が表示されたら、枠の中に表示されている文字を全選択してコピーします。

「TinyMCE Advanced」の設定をエクスポートする時の画面表示

エクスポートは以上で完了です。

必要に応じてコピーした文をメモ帳などに貼り付けて保存しておきます。

 

インポート手順

次に、上記の手順でエクスポートした設定を別のサイトの「TinyMCE Advanced」にインポートするには、同じようにエディター設定の「管理」を表示し、「インポート設定」をクリックします。

そして、以下の画面でエクスポート時にコピーしたテキストを貼り付けて「インポート」をクリックします。

「TinyMCE Advanced」の設定をインポートする時の画面表示

ちなみに、左下の「検証」をクリックすると貼り付けた内容を検証することができます。特にエラーがなければ以下のように表示されます。

「TinyMCE Advanced」の設定をインポートする時に検証ボタンを押下した時の状態

まとめ

以上、「TinyMCE Advanced」の便利な使い方と設定方法をまとめました。

このプラグインは、WordPressのビジュアルエディタで記事の編集に使うボタンをカスタマイズすることができます。

またそれ以外にも、リストのデザインを複数から選択できるようにしたり、簡単にnofollowを付けたリンクの設置ができるようになったりと、設定の仕方によって記事の作成を効率化することが可能です。

さまざまな便利な機能があるので、もしまだ使用していない人は試してみることをおすすめします。

-WordPressプラグイン

Copyright© Kotoログ , 2019 All Rights Reserved.