「TinyMCE Advanced」はWordPressの ビジュアルエディタでの投稿作業を圧倒的に便利にしてくれるプラグインです。
僕の中で「addQuicktag」と「TinyMCE Advanced」は本当に神プラグインだと思っていて、この2つを使わないのは完全に人生損していると断言できます。
今回はそんな「TinyMCE Advanced」の設定方法とおすすめの使い方をじっくりと解説していきたいと思います。
TinyMCE Advancedを導入
まずは新規プラグインで「TinyMCE Advanced」と検索して、TinyMCE Advancedをインストール＆有効化してください。
プラグインのインストール方法についてよく分からないという方はこちらの記事をご覧になってください。
TinyMCE Advancedの設定方法
それでは「TinyMCE Advanced」の設定方法について解説していきます。
まずはダッシュボードから「設定」→「TinyMCE Advanced」とクリックしてください。
エディターメニューの表示・非表示
設定画面に入ったらまずは以下の箇所にチェックが入っているのかを確認します。
チェックが外れていると、上記の赤枠の部分が非表示になります。
正直赤枠の部分はほとんど使うことはないのですが、そこまで邪魔ではないので一応チェックを入れていくことをオススメします。
アイコンの配置を最適化する（オススメあり）
必要なアイコンと必要ないアイコンを移動する
- 赤枠・・・追加しておくといいアイコン
- 青枠・・・外しても問題無いアイコン
ちなみに最終的な僕のオススメ配置は以下の画像のような感じです。
かなりいじっていますが、僕の中では最強に使いやすい配置になっています。
特にこだわりがなければ真似してみてください。
オプション設定
ここでは意外と知られていませんが、かなり便利な機能が隠されているので、全てチェックを入れておきましょう。
それぞれの項目について解説します。
リストスタイルオプション
リストタグの種類を増やしてくれる。
コンテキストメニュー
投稿画面で右クリックメニューが少し便利になる。
リンクの挿入なんかは意外と便利ですね。
代替リンクダイアログ
リンクの挿入が非常に便利になる。
- Url・・・挿入したいURLを入力
- Text to display・・・アンカーテキストを入力
- タイトル・・・リンクの上にマウスを置いた時に表示される文字を入力
- Rel・・・Nofollow属性を付けるかを選択←かなり便利
- Target・・・外タブにするのかどうかを選択
Nofollow属性はいちいちテキストコードの挿入が必要な作業だったので面倒だったのですが、こちらの機能を使えば簡単にNofollow属性を付けることができるようになりました。マジ感謝です。
フォントサイズ
フォントサイズの単位が「pt」から「px」になり、より細かい大きさを指定できるようになる。
-
- 従来
-
- 変更後
一応「12pt」=「16px」と言われていますが、単位の違いはあまり気にせずに、感覚的に文字の大きさを調整していくといいですね。
オプション設定の説明は以上になります。
高度なオプション
ここでは「段落タグの保持」にだけチェックを入れておきましょう。
CSSクラスメニューの作成
これは僕も使ったことがないのでよく分かっていないのですが、あらかじめCSSにコードを入力してある必要があるようなのです。無くても差し支えないものだと思いますので、スルーでOKです。
段落タグの保持
こちらは何気にかなり重要です。
記事投稿している最中に、WordPress上のテキストエディターとビジュアルエディターを行き来していると、コードが崩れてしまうことがあるのですが、こちらにチェックを入れておくことでその不具合を防ぐことが出来ます。
僕はこの機能を知らずに別なプラグインを使っていたことがあったのですが、「TinyMCE Advanced」にその機能が付いていることが分かったので、別なプラグインは使わなくてよくなりました。ラッキー。
画像元の貼り付けを有効にする
この機能も正直試してみたのですが、うまく使えなかったのでよく分かりません。
画像を直接投稿画面で挿入できるのであればかなり便利だと思ったのですが、FirefoxとSafariでしか使えないようですし、実際にSafariで試してみてイマイチ使えなかったので、こちらもスルーでOKです。
管理
ここでは「TinyMCE Advanced」の設定のインポートとエクスポートを行うことが出来ます。
つまり、他のWordPressサイトにも同じ設定を簡単に反映させることができるようになります。
何個もサイトを立ち上げるような人にとっては非常にありがたい設定ですね。
エクスポートとインポートの手順
１．まずは「管理」の中の「設定のエクスポート」をクリックします。
２．続いて、すべてを選択をクリックし、コードをコピーします。
３．次に設定を反映させたいWordPressブログのダッシュボードから同じように「TinyMCE Advanced」の設定に入り、「管理」の中の「インポート設定」をクリック。
４．先ほどのコードを赤枠の中に貼付けて「検証」をクリック。
検証ボタンの下に「No errors.」と表示されれば問題ないということなので、そのまま「インポート」をクリック。
すると設定が反映されるハズです。
ちなみに管理の下のチェックボックスは全てチェックを入れておけばOKです。
もしも設定をリセットしたいと思った場合は「デフォルトの設定を復元」をクリックすれば全て元通りに戻ります。
これで「TinyMCE Advanced」の設定は完了になります。
最後に「変更の保存」を忘れずにクリックしてください。
※僕と全く同じ設定にしたい場合は、下記のコードをインポートしてもらえれば同じになります。
|
1 |
{"settings":{"toolbar_1":"bold,forecolor,backcolor,underline,italic,blockquote,hr,strikethrough,bullist,numlist,link,unlink,table,fullscreen,undo,redo,wp_adv","toolbar_2":"formatselect,fontsizeselect,alignleft,aligncenter,alignright,alignjustify,outdent,indent,charmap,wp_more,wp_help","toolbar_3":"","toolbar_4":"","options":"advlist,contextmenu,advlink,menubar,fontsize_formats","plugins":"anchor,code,insertdatetime,nonbreaking,print,searchreplace,table,visualblocks,visualchars,advlist,link,contextmenu"},"admin_settings":{"options":"no_autop","disabled_plugins":"","disabled_editors":""}} |
まとめ
お疲れ様でした。
ここまでやっておくと本当に便利に使っていくことができます。
中でも特筆すべきは以下の3点です。
- ビジュアルエディターで使えるアイコンが増える
- ビジュアルとテキストを行き来した際の不具合がなくなる
- Nofollow属性が簡単に付けられる
意外とアイコンを増やすためにしか使っていない方も多いのですが、「TinyMCE Advanced」はこういった隠れ機能も満載なので、ぜひ使いこなしていきましょう。
↓↓メルマガでは最新情報をお届けしています↓↓
コメントを残す