TinyMCE Advancedの設定方法と使い方を解説!

ここではプラグインTinyMCE Advancedの設定方法や使い方について説明していきます。

TinyMCE Advancedを使いこなすことでWordPressブログの記事編集がすごく楽になりますよ!

特にWordPressブログをこれから作るという方は是非参考にしてみて下さい。

カツオ
カツオ

記事のポイントを述べておきますね↓

  • とりあえずツールバーの設定だけは絶対やろう。
  • 他は必要があればやる程度で十分。
カッパ君
カッパ君

という事でもっと詳細に説明していきますので、本文も読んでみて下さいね~!

TinyMCE Advancedは記事編集画面をカスタマイズするプラグイン。

TinyMCE Advanced

TinyMCE Advancedは端的に言うと記事編集画面をカスタマイズして使いやすくするプラグインです。

  • 記事編集画面のツールバーの各種ボタンの追加と削除
  • 箇条書きボタンをデラックスにする
  • ハイパーリンクボタンを調整する
  • テキストモードで<p><br>を表示する
  • 表の挿入についてカスタマイズする
  • etc…

というような事が出来ます。

ツールバーの設定

よく分からないという人もとりあえずツールバーの設定だけはやりましょう。

カツオ
カツオ

極論言うと、これでだけで大体OKです。

TinyMCE Advancedの設定はTinyMCE Advancedをインストールして有効化した後、「設定」→「TinyMCE Advanced」と選択し、設定画面に進みます。

ツールバーの設定

ツールバーの設定ではブロックエディタの場合の設定と、クラシックエディタの場合の設定の両方が出来ます。

基本的にはどちらも同じような操作方法で設定していきます。

  1. 設定画面の下部に「使用しないボタン」があるので、そこから使いたいボタンを上のツールバーにドラッグして並べ替える。
  2. 完成したら忘れずに「変更を保存」を押す。

ツールバーの設定は、TinyMCE Advancedの中で一番重要というか、これだけで事足りてしまう人も多いと思うので、パパッとやってしまいましょう。

これ以降の設定についてはデフォルトのままでもOKです。

より深く理解したい方は読んでみて下さい。

オプション

オプション

オプション設定についてはデフォルトのままでもあまり問題はありません。

ただ、必要に応じて変えるのも勿論OK。

「クラシックパラグラフ」や「クラシックブロック」の上部ツールバーにすべてのボタンを追加します。AddQuicktagやAdvanced Adsなどによって、追加されたボタンをツールバーに反映させる場合はこの項目にチェックを入れます。
基本的にはチェックを入れておくべきです。
リストスタイルオプションこれにチェックを入れると「番号なしリスト」「番号付きリスト」のバリエーションが増えるので、ぜひチェックを入れておきましょう。
コンテキストメニューチェックを入れると記事編集画面での右クリックメニューがTinyMCE Advanced仕様のものに置き換わります。
代替リンクダイアログチェックを入れると記事内にリンクを貼る際に「リンクを挿入」というボックスが一瞬で出てきて効率が上がります。
好みですが、結構おススメ。
フォントサイズチェックを入れるとフォントサイズの幅が広がります。

上級者向け設定

上級者向け設定

こちらは上級者向け設定という事で、デフォルトのままでも問題ありません。

カツオ
カツオ

僕はデフォルトのままで使用してます。

最初の2つはブロックエディタに関わる部分で、クラシックエディタ派の方はあまり関係ないですね。

こちらについても表で説明していきます。

クラシック版の段落ブロックを追加チェックを入れるとブロックエディタの編集画面でも、クラシックエディタの編集ツールバーが表示されます。
クラシック版の段落もしくはクラシックブロックをデフォルトのブロックにする (ハイブリッドモード)チェックを入れると、ブロックエディタで記事編集してる時にタイトル+Enterでクラシックブロックが出現するようになります。
クラシックブロックとクラシックエディター内のパラグラフタグを保持こちらにチェックを入れると、テキストエディタで<p><br>が表示されます。
ビジュアルエディタとテキストエディタを行き来する事が多い人はチェックを入れた方が便利かも。
CSS クラスメニューの作成こちらにチェックを入れて、自分でphpファイルを編集するとオリジナルのボタンがツールバーで使用できます。
超上級者向けの設定です。

テーブル用の高度な設定

テーブル用の高度な設定

こちらは表に関する設定項目です。

デフォルトのままでもあまり問題はありませんが、各項目について表形式で解説していきます↓

マウスのドラッグでのテーブル、行、列のサイズ変更を可能にするチェックを入れると、記事中の表の枠をマウスで簡単にサイズ調整できるようになります。
テーブル挿入時の HTML 枠線属性を1に設定記事内の表の枠線が表示されるようになります。
あまりチェックを入れる必要性はない、と感じています。
テーブルを挿入する際、マウスでドラッグして行と列の数を選択できるグリッドを表示下記画像(※)のように記事編集画面でマウスで、表の列と行の数を選択できるようになります。
テーブルを編集中にタブキーを押して次のセルに移動タブキーを押すと次のセルにカーソルが移動するようになるのでエクセル感覚で表の内容が入力できます。
テーブル属性のダイアログに詳細タブを表示下記画像(★)のように記事編集画面で「表のプロパティ」に「高度な設定」が追加されます。

下記画像(※)↓

下記画像(※)
下記画像(※)です。

下記画像(★)↓

下記画像(★)
下記画像(★)です。

管理

管理

「設定のインポートとエクスポート」は現在使用しているTinyMCE Advancedの設定を他のブログでも使用する為の機能です。

現在の設定を「エクスポート」で保存し、その設定を適用するブログのTinyMCE Advancedの「設定のインポート」で移していきます。

「TinyMCE エディターの機能強化を有効化:」は記事編集画面以外でもTinyMCE Advancedを適用させる設定です。

サイドバーのテキストなどがそれに当たります。

今回の内容は以上になります。

カッパ君
カッパ君

最後まで読んで頂きありがとうございました!

コメントはお気軽にどうぞ(承認制なので誹謗中傷は削除されます)

sixteen − 13 =