プラグイン

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

この記事の内容

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

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

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

田村カツオ
田村カツオ
記事のポイントを述べます↓

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

この記事を読むことでWordPressブログの記事編集の効率がUPするでしょう!

※下記記事ではWordPressブログにおススメなプラグインをまとめましたので参考にしてみて下さい。

https://tamurakatsuo.com/wp-plugin-osusume/

WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介!

カッパ君
カッパ君
内容に入っていきます!

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

TinyMCE Advanced

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

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

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

ツールバーの設定

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

田村カツオ
田村カツオ
これでだけで大体OKです。

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

ツールバーの設定

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

カッパ君
カッパ君
使用する方だけ設定すればOK。

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

  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を適用させる設定です。

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

ABOUT ME
田村カツオ
副業お坊さんブロガー。YouTubeとTwitterもよろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。

5 × 3 =