ヨガスクールの中の人が教える、ブログのつくり方

AFFINGER5

TinyMCE Advancedの設定方法|記事装飾がちょっと便利になるプラグイン

2020-10-14

アイキャッチ

本日はWordPressで記事を書くのに便利なプラグインを紹介します。

それがビジュアルエディタ機能を使いやすくする「TinyMCE Advanced」です。

ポイントをまとめるとこんな感じ。

 

TinyMCE Advanced とは

  • ボタンが増え、クリック1つで簡単装飾
  • 好きなボタンだけを取捨選択でき、ボタン配置まで好みにカスタマイズ
  • 設定が超簡単

 

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

WordPressブログをこれから始めようと思っている方や、ブログを立ち上げたばかりの方は、ぜひ参考にしてみてください。

✓記事の内容

  • TinyMCE Advancedとは?記事装飾が便利になるプラグイン
  • TinyMCE Advancedのインストール方法【たったの4クリック】
  • TinyMCE Advancedの設定方法【おすすめ設定も公開】
  • TinyMCE Advanced エディタの使い方

 

TinyMCE Advancedとは?記事装飾が便利になるプラグイン

TinyMCE Advanced

まずは「TinyMCE Advanced」についての解説です。

「TinyMCE Advanced」とは、簡単に説明すると「記事を書くのが便利になるプラグイン」です。

 

WordPressの標準設定でもボタン一つで太字にしたり、文字に色を付けたりと、装飾のためのボタンが予め用意されています。

▼ 標準設定の編集メニュー

tinymce-advanced編集画面(導入前)

 

でも「もう少し装飾ボタンを増やせるといいな」

 

そんな希望を叶えてくれるのが「TinyMCE Advanced」です。
うこじ

 

導入前後でこんなに変わります。

▼「TinyMCE Advanced」をインスト―ルした後の編集メニュー

tinymce-advanced編集画面(導入後)

 

「TinyMCE Advanced」を入れることで、HTMLの知識やプログラミングの知識がなくてもブログ記事に装飾パターンを簡単に増やすことができるようになります

 

WordPressの標準設定には表(テーブル)の作成機能がないけど、TinyMCE Advancedをインストールすれば簡単に作成できるよ。
うこじ

 

TinyMCE Advancedのインストール方法【たったの4クリック】

それでは「TinyMCE Advanced」をインストールしていきましょう。

手順は下記のとおりです。

  1. WordPressプラグインにアクセス
  2. 検索窓よりTinyMCE Advancedを入力
  3. TinyMCE Advancedをインストール
  4. TinyMCE Advancedを有効化

順番に解説します。

 

step
1
WordPressプラグインにアクセス

《プラグイン》から《新規追加》をクリック

 

step
2
検索窓よりTinyMCE Advancedを入力

右上の《プラグインの検索》窓に「TinyMCE Advanced」と入力し検索。

《プラグインの検索》窓に「TinyMCE Advanced」と入力

 

step
3
TinyMCE Advancedをインストールする

「TinyMCE Advanced」の《今すぐインストール》をクリック。

《今すぐインストール》をクリック

 

step
4
TinyMCE Advancedを有効化する

インストールが完了したら《有効化》をクリック。

インストールが完了したら《有効化》をクリック

以上でインストール~有効化は終わり。

 

無料ブログをやったことのある方は「Classic Editor」がおすすめ

2018年12月にWordPressにもちょっとした変化がありました。

それは「WordPress5.0」のリリースです。

 

5.0以降のWordPressではテキストエディタに「Gutenberg(グーテンベルグ)」というものが採用されています。

「Gutenberg(グーテンベルグ)」の特徴を言葉で説明すると、ブロック形式で入力して作成していくものになります。

でも、無料ブログやMicrosoftのwordを使用したことがある人にとっては、ちょっとイメージが捉えづらく、とっつきにくいんです。

 

そんなときは「Classic Editor」というプラグインを入れて、テキストエディタを旧環境にすることもできます。

Classic Editor

 

インストール方法は簡単。

こちらも4クリックで完了できます。

  1. WordPressプラグインにアクセス
  2. 検索窓よりClassic Editorを入力
  3. Classic Editorをインストール
  4. Classic Editorを有効化

順番に解説します。

 

step
1
《プラグイン》の《新規追加》をクリック。

《プラグイン》から《新規追加》をクリック

《プラグイン》の《新規追加》をクリック

 

step
2
右上の《プラグインの検索》窓に「Classic Editor」と入力し検索。

《プラグインの検索》窓に「Classic Editor」と入力

《プラグインの検索》窓に「Classic Editor」と入力

 

step
3
「Classic Editor」の《今すぐインストール》をクリック。

《今すぐインストール》をクリック

《今すぐインストール》をクリック

 

step
4
インストールが完了したら《有効化》をクリック。

《有効化》をクリック

《有効化》をクリック

 

以上でインストール完了です。

 

TinyMCE Advancedの設定方法【おすすめ設定も公開】

これよりTinyMCE Advancedの設定方法について解説します。

TinyMCE Advancedをインストールすると《設定》から《Advanced Editor Tools》が選べるようになっています。

 

step
1
《旧エディター》をクリック

《旧エディター》をクリックします。

 

step
2
チェックを確認

「エディターメニューを有効化する」にチェックが付いていることを確認します。

 

step
3
希望のボタンをドラッグ&ドロップ

下部の「使用しないボタン」の中から、追加したいボタンを「エディターメニュー」にドラッグ&ドロップして追加します。

希望のボタンをドラッグ&ドロップ

 

step
4
不要なボタンをドラッグ&ドロップ

反対に削除したいものはドラッグ&ドロップで「使用しないボタン」の中に戻します。

不要なボタンをドラッグ&ドロップ

 

ここは使いやすいように自由に設定してもらってOKです。

ちなみに、私の場合は下記2点を「使用しないボタン」から追加しました。

使用しないボタン

  • 下線
  • 取り消し線

 

step
5
オプションを設定

その他の設定は下記のとおりです。

オプション

  • クラシックパラグラフ」や「クラシックブロック」の上部ツールバーにすべてのボタンを追加します。
  • リストスタイルオプション
  • フォントサイズ

上記3つにチェックします。

 

step
6
上級者向け設定

その他の設定は下記のとおりです。

上級者向け設定

  • クラシック版の段落ブロックを追加
  • クラシックブロックとクラシックエディタ内のバラフタグを保持

上記2つにチェックします。

 

それ以外はデフォルトのままで大丈夫。

本ブログの設定は、全体的にはこんな感じです。

 

最後に「変更を保存」して完了です。

 

まとめ:TinyMCE Advanced で作業効率改善

いかがでしたでしょうか。

今回は、WordPressの記事作成を便利に変えるプラグイン「TinyMCE Advanced」を紹介をしました。

機能ボタンが増えることで、クリック1つでできる装飾などが超簡単に行えるようになりました。

皆さんもぜひ試してみてください。

 

本日は内容は以上となります。

本記事が誰かのブログライフの助けになれればうれしいです。

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER5
-, , ,

Copyright © ucozi.com , All Rights Reserved.