ブログ記事作成を簡単に!TinyMCE Advancedの設定と使い方を解説!

こちらの記事では、TinyMCE Advancedというプラグインの設定と使い方を紹介します。

TinyMCE Advancedとは、WordPressで記事を作成する時にフォントの色やサイズを変えるといった文章の見た目の設定がとても簡単になるプラグインです。

作業効率が格段にアップするプラグインですので、ぜひ導入しておきましょう。

ただしこちらのプラグインと相性の良くないテーマもありますので、公式マニュアルやネット検索してから導入されることをおすすめします。
私は現在The Thorというテーマを使っていますが、デフォルトで似た機能が搭載されているということで公式からオススメされていません。

TinyMCE Advancedの設定方法を動画で解説!

TinyMCE Advancedの設定方法を画像で解説!

 

TinyMCE Advancedを入れる前に”]Classic Editorというプラグインをまだ入れてない方はインストールして有効化しておいてください。

 

まず、WordPressのダッシュボードからTinyMCE Advancedプラグインをインストールして有効化します。

プラグインのインストールから有効化までを画像で解説したページはこちら→WordPressにプラグインをインストールし有効化する方法

 

WordPressダッシュボードの…「設定」→「TinyMCE Advanced」を順にクリック

よく使うであろう機能のボタンを、下から上へドラッグ&ドロップします。

フォトサ」や「」はデフォルトで上に入っていますが、「背景色」も必ず必要になってくると思います。

下の方へスクロールして、高度なオプションの…「段落タグの保持」にチェック。

こちらにチェックを入れることで、ビジュアルモードとテキストモードの切り替えを行った際でも、勝手に改行されたり空白が入ることを防止できます。

 

 変更を保存  をクリック。

 

これでTinyMCE Advancedの設定は終了です。
お疲れ様でした!

TinyMCE Advancedの使い方を解説

続いては、TinyMCE Advancedの使い方を解説します。

装飾を加えたいテキストをドラッグして選択しておいた状態で、ボタンをクリックすればテキストに装飾ができます。

テキストの色を変えたい場合など

変えたい部分をドラッグして選択。

 のボタンがを変更するボタンです。

もしどのボタンが何の機能か知りたい場合はボタンの上にマウスを持って行く(マウスオーバーする)と、上図のように吹き出しが出てボタンの機能を知ることができます。

 のボタンの 右のをクリックすると色パレットが出てくるので、好きな色を選択。

これでフォントの色を変えることができました。

 

他の機能についても同じ要領で、

  1. 装飾したい部分をドラッグして選択
  2. ボタンをクリック

すればテキストに装飾を加えることができます。

表(テーブル)を挿入したい場合

「テーブル」ボタンのをクリック「テーブル」をポイント

作りたい表に応じてマス目をドラッグ

 

上図の状態だと4列×3行のテーブルが出来上がります!

[jin-fusen3 text=”テーブルを応用してテキストボックスを作成する方法”]

Tiny MCE Advancedで簡単にテキストボックスを挿入する方法ドラッグするマス目を1つだけにすることで…

 

こんな感じ↓で簡単にテキストボックスを挿入することができます。

あいうえお

かきくけこ

使っているテンプレート(テーマ)によっては、正規のテキストボックスを挿入するよりもこちらの方が早くできることがあります。

私はJINユーザーなのですが、テキストボックスを使うのが面倒なのでこの方法にしています。

表(テーブル)を削除したい場合

テーブルのどこかをクリックした状態で…「表の削除」をクリック

 

これで、表を削除することができます。

 

スマホで見た時に表が画面からはみ出る問題を解消する方法はこちらにまとめました!

関連記事

ワードプレスで表(テーブル)を挿入した時、パソコンだときちんと画面にフィットしているのにスマホやタブレットなど他の端末から確認すると途中で切れてしまうことがあります。 どの端末から見ても画面に収まるように最[…]

リンクを挿入したい場合

リンクを挿入したい文字列をドラッグして選択
または
リンクを挿入したい画像をクリック

WordPressプラグインTiny MCE Advancedでリンク挿入する方法クリップのマークのボタンをクリック

外部リンクを貼る場合

WordPressプラグインTiny MCE Advancedでリンク挿入する方法

リンク挿入BOX内にURLを入力 → エンター

 

内部リンク(同一ドメイン内へのリンク)を貼る場合

WordPressプラグインTiny MCE Advancedでリンク挿入する方法

ドメインより後の部分(/以降の部分)を入力 → エンター

 

リンクを貼る際の時短ワザ

リンクを貼りたい箇所をドラッグして選択してから

WindowsCtrl + K
Maccommand + K

を押下するとリンク挿入BOXが出現しますので、後は適宜入力しエンターしてください。

 

リンクを削除する方法

リンクが挿入されている文字列のどこか(どこでもOKです)をクリック

WordPressプラグインTiny MCE Advancedでリンク挿入する方法クリップマークのボタンをクリック

 

これでリンクを削除できます。

さいごに

TinyMCE Advancedは、HTMLの知識がなくても体裁の整った記事を書くことができるのでとてもオススメなプラグインです。

この便利なプラグインをどんどん活用して、読みやすい記事を書いていきましょう。

 
\この記事のURLとタイトルをコピーする/