【最新】TinyMCE Advancedの設定方法と使い方【記事編集もサックサク】

  • TinyMCE Advancedって何?使い方教えて!tinymce advanced 使い方
  • WordPress初心者で「HTML」とか「タグ」とかよくわかんない…。
  • 記事の文字装飾が全然できない!みんなどうやってるの?

こんなWordpress初心者の疑問や悩みに答える内容になっています。

この記事を読めば、WordPress初心者でも簡単にブログ記事の編集ができるようになります。

この記事で分かること

  • TinyMCE Advancedとは何か?その設定と使い方。
  • 編集ボタンの意味と使い方の例
  • 記事編集の際に知っておくと便利なこと

この記事を読み終われば、Wordpress初心者でもブログ上級者のような記事を書くことができるようになりますよ!

注意説明
ここではプラグイン「Classic Editer(クラシックエディター)」を導入していることを前提に解説していきます。

TinyMCE Advanced とは?

tinymce advanced 使い方

TinyMCE Advanced(タイニー・エムシーイー・アドヴァンスト)とは、

記事編集画面(ビジュアルエディター)の機能を拡張するプラグインのことです。

カタカナばかりで難しく感じるかもしれませんが、要は記事を書きやすくしてくれるプラグインということですね。

デフォルトの編集メニュー(Classic Editer)

tinymce advanced 使い方

TinyMCE Advanced導入後の編集メニュー(Classic Editer)

tinymce advanced 使い方

上記のように、記事編集画面の編集ボタンを自分好みにカスタマイズすることができます。

HTMLやタグの知識があれば不要なものも多いですが、WordPress初心者にとってはボタン一つで様々な操作が行えるようになるのでとても便利です。

ボタンの意味や使い方などを解説していくので、自分好みにカスタマイズして効率的に記事が書けるようになりましょう(^^)/

TinyMCE Advancedの設定方法

tinymce advanced 使い方

では、TinyMCE Advancedの設定方法を解説していきます。

プラグインをインストールしたことのない方は以下の記事を参考にしてください。
⇒WordPressおすすめプラグインとインストール方法

TinyMCE Advancedをインストール&有効化ができたら、

管理画面左メニューから「設定」にカーソルを合わせると「TinyMCE Advanced」という項目が追加されているのでクリックしましょう。

tinymce advanced 使い方

すると下記のような画面に移ります。

tinymce advanced 使い方

TinyMCE Advancedが英語になってる!日本語にするには?

稀にTinyMCE Advancedが日本語表記ではなく英語表記になっていることがあるようです。

それはWordPressのバージョンが古いのが原因ですので、WordPressのバージョンをアップデートしましょう。(管理画面のダッシュボードから簡単にできます)

また、アップデートする際はデータの破損の危険性もあるためバックアップを取ってから行うことをオススメします。
⇒Wordpressのバックアップを取る方法

TinyMCE Advancedの設定方法、使い方

tinymce advanced 使い方

では早速、TinyMCE Advancedの設定方法を解説していきます。

まずは上部のタブから「旧エディター(TinyMCE)」のタブをクリックします。

tinymce advanced 使い方

その後は下にある編集ボタンから、追加したいものを選んでドラッグ&ドロップでツールバーに追加するだけです。

上記のツールバーが記事編集画面で表示されることになります。

また、「いらない編集ボタン」があれば逆にツールバーから下にドラッグ&ドロップをして戻しましょう。

以下では、よく使われる編集ボタンの意味などを解説しますので、自分好みのツールバーにカスタマイズしていきましょう。

良く使われる編集ボタン

アイコン ツール名 どのように使うか
tinymce advanced 使い方 段落 見出し2<h2>、見出し3<h3>などの段落を設定する。
tinymce advanced 使い方 フォントサイズ 文字のフォントサイズの変更。
tinymce advanced 使い方 太字 文字を太字にする。※<strong>
tinymce advanced 使い方 テキスト色 文字色を変更する。
tinymce advanced 使い方 テキスト背景色 文字の背景に色を付ける。
tinymce advanced 使い方 イタリック 文字をイタリック体にする。
tinymce advanced 使い方 下線 文字にアンダーラインつける。
tinymce advanced 使い方 左寄せ 文字を左寄せにする。
tinymce advanced 使い方 中央揃え 文字をセンター寄せにする。
tinymce advanced 使い方 右寄せ 文字を右寄せにする。
tinymce advanced 使い方 両端揃え 文字の横幅を統一する。
tinymce advanced 使い方 ツールバー切り替え 編集ボタンを多数使用するときに、ツールバーを増やす。
tinymce advanced 使い方 モアタグの挿入 「続きを読む」を挿入したいときに使う。
tinymce advanced 使い方 リストタグ 「番号なし」リストを作るときに使う。
tinymce advanced 使い方 ナンバータグ 「番号付き」リストを作る時に使う。
tinymce advanced 使い方 引用 引用タグを挿入したい時に使う。
tinymce advanced 使い方 リンクの挿入/編集 文字にリンクを挿入したい時に使う。
tinymce advanced 使い方 リンクの削除 文字のリンクを外したい時に使う。
tinymce advanced 使い方 テーブル(表) テーブル(表)を作成したい時に使う。
tinymce advanced 使い方 画像の挿入/編集 画像の挿入、編集の時に使う。
tinymce advanced 使い方 動画を挿入/編集 YouTubeなどの動画コードを挿入する時に使う。
tinymce advanced 使い方 フルスクリーン Wordのように広々と記事編集ができる。
tinymce advanced 使い方 絵文字 絵文字を追加することができる。
画面下の方にある詳細設定のチェックボックスは基本的にはデフォルトのままでOKです。

編集ボタンの追加が完了したら、忘れずに右上の「変更を保存」をクリックしましょう。

tinymce advanced 使い方

WordPress初心者の方は上記の編集ボタンを追加したら試しに使っていきましょう。

記事を作成しているうちに「この編集ボタンはいらないかな」とか「この編集ボタンはよく使うな」と思ったら減らしたり、並べ替えたりすることで記事が書きやすくなります。

TinyMCE Advancedの使い方

tinymce advanced 使い方

TinyMCE Advancedの編集ボタンの使い方はだいたい一緒です。

編集したい文字を選択して編集ボタンをクリックするだけ

tinymce advanced 使い方

以下に代表的な編集ボタンを使った例を掲載しておきます。

代表的な編集ボタンの結果

tinymce advanced 使い方 tinymce advanced 使い方

ちなみにこれを「テキスト」で表示するとこのようになっています。

tinymce advanced 使い方

WordPress初心者で、HTMLやタグがわからない方は時々テキストをのぞいてみて

WordPress初心者
このタグを打てばこのように表示されるのか!

と学んでいくと記事編集の幅が広がりますよ(^^)/

TinyMCE Advancedの使い方まとめ

tinymce advanced 使い方

では最後に、TinyMCE Advancedについてまとめるとこのようになります。

TinyMCE Advancedの使い方まとめ

  • 記事の編集ボタンをカスタマイズできるので初心者にオススメ
  • 使っていくうちに必要なボタンだけ表示するようにすれば記事編集の効率UP
  • たまに「テキスト」を見てみて、HTMLやタグの使い方を覚える

TinyMCE Advancedは、WordPress初心者でも直感的に使えるプラグインなのでとても便利です。

いろいろ使ってみて、ツールバーを自分好みにカスタマイズしていきましょう!

【これだけ十分】初心者におすすめのWordPressプラグイン8選+α

それでは、よいWordpressライフをお送りください(^^)/

しょーい
気に入っていただけたらシェアお願いします!

当ブログ『shoiblog』では、ブログ、アフィリエイト、SEOを中心に毎日投稿しています。

Twitterもやっているので、フォローよろしくお願いします!

シェアしてね!