WEBマーケティング

【Gutenberg対応】TinyMCE Advancedの初期設定方法と使い方|WordPressプラグイン

固定ページ・投稿ページの編集は手の込んだカスタマイズをしようとすると、通常はどうしてもHTMLの知識が必要になってしまいます。

HTMLの記述はWordPressで初めてWEBサイトを作るような人にはなかなかハードルが高いでしょう。

そこで今回はページの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。

個人的には完全に必須プラグインになっているものですので、一度試してみてはいかがでしょうか。

初期設定方法

まずはインストールから初期設定方法を紹介します。

インストール方法

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。

TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに変わりますので、クリックします。

 

Block Editor(Gutenberg)の初期設定方法

インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。

設定項目をクリックすると以下のページが開きます。

TinyMCE Advancedプラグインの図解

Gutenbergのみを利用する場合は左側の「Block Editor」を選んでください。

もし旧エディターである「Classic Editor」を利用する場合ば右を選んでください。

※「Classic Editor」を利用するには「Classic Editorプラグイン」が必要となります。

 

Block Editor(Gutenberg)の設定方法

Block Editor(Gutenberg)タブには主に以下の設定項目があります。

TinyMCE Advancedプラグインのツールバー図解

  • Main toolbar
    記事執筆時に段落ブロック内で使用するツールバーの設定をします。
  • Alternative side toolbar
    画面右側のサイドツールバーの設定をします。
  • Unused buttons for the blocks toolbar
    使用しない機能をここに置きます。

設定はドラッグ&ドロップで直感的に配置することができます。
アンダーラインとマークを移動してみます。

TinyMCE Advancedプラグインのドラッグドロップの図解

以下のようになります。

TinyMCE Advancedプラグインのドラッグドロップの図解2

次にカラー関係の設定をすることができますが、特に邪魔になるものでもないので両方Yesで問題ないでしょう。

TinyMCE Advancedプラグインのカラー設定の図解

さらに下にクラシックブロックの設定がありますが、こちらは後述するクラシックエディターの設定とほぼ同じです。

ドラック&ドロップで設定できますので、「グーテンベルグ内で以前のクラシックエディターのように使いたい」という人は必ず設定しておきましょう。

TinyMCE Advancedプラグインのクラシックブロックの図解

 

Classic Editorの初期設定方法

Classic Editorプラグイン」使用時のクラシックエディターの設定方法です。

「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。

 

「設定」タブの各種機能

設定のタブでは各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。
TinyMCE Advancedプラグインの設定タブの図解

  • Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
    GutenbergのすべてのクラッシックブロックにおいてTinyMCE Advancedプラグインで設定したツールバーを一番上に表示させます。
  • リストスタイルオプション
    箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。
  • コンテキストメニュー
    編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。
  • 代替リンクダイアログ
    リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
    リンクを設定したあとならWordPressのリンク設定画面を開けます。
  • フォントサイズ
    pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。

↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、クラシックエディター利用時のビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。

設定が完了したら「変更を保存」をクリックして終了します。

使い方

Block Editor(Gutenberg)での使い方

適用するテキストをドラッグし、タブから機能を選択します。

先ほど追加した機能の中で、ここではアンダーラインを選んでいます。

TinyMCE Advancedプラグインの使い方の図解

以下のようにアンダーラインが入ります。

TinyMCE Advancedプラグインの使い方の図解2

Classic Editorでの使い方

WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。

「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。

「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。

適用するテキストをドラッグします。

ptの選択をクリックし、指定するサイズを選択します。

大きいサイズになります。

次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。

青を選択したら青色に変化しましたね。

青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。

青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。

当サイトのテーマ「AFFINGER5」だと機能満載になってます

当サイトで導入している「 WING(AFFINGER5) 」だと、TinyMCE Advancedを導入することで非常に多くの機能を簡単に使用することができます。

ものすごく機能が多いので、専門知識はないけどWEBサイトでいろんな機能を使いたいという人にはドンピシャなテーマです。

赤枠内がAFFINGER5独自の機能になります。

アドセンスコードを挿入したり、リンクカード・ボタン・ランキングを挿入するのも簡単にできるんですね。

スタイルタブでさらに細かいカスタマイズが可能になります。

キラキラなボタンも

簡単に作れてしまいます。

 

さらにスマホに表示しない領域や、クリックで開くボックスを挿入することも簡単にできるようになってしまいます。

+ クリックボックスです、クリックして下さい!

こんな感じで開きます。

普通に作ると非常に時間のかかる機能です。

まるもじです

戦略的なWEBサイトの運営に興味のある方は是非AFFINGER5を導入するのも検討してみてはいかがでしょうか。

>>WING(AFFINGER5)の詳細ページを見る

 

テーマによって「TinyMCE Advanced」を使って機能を増やしているものもありますので、使いやすいようにカスタマイズしてコンテンツに集中できる環境を構築しましょう。

WordPressのおすすめプラグインについてまとめていますので、参考にしてみてください。

戦略的テーマ「AFFINGER5」

当サイトのWordPressのテーマAFFINGER5です。

SEOや自由度含め、これほどの完成度のテーマは他にはありません。

発売から値上がりし続けてますが、早めに1つ買っておけば何サイトでも適用できるのでおすすめです。

戦略的テーマ「AFFINGER5」

AFFINGER5の公式ページを詳しく見る

 

人気記事BEST3

人が求人を出している様子、フリーランスの求人サイトの図解 1

最近はクラウドソーシングサービスが多いですが、正直なところ本気で独立を目指すのであれば向いていません。 というのも、クラウドソーシングサービスでは自分の時間を使って仕事を取らなければならないからです。 ...

これから活躍できるフリーランスの仕事の図解 2

「満員電車はもう嫌だ」 「上司の顔色を伺って、残業はもうしたくない」 「フリーランスに興味はあるけど、どんな仕事があるの?」 フリーランスで活躍する人が増えてきました。 この記事を読んでくださっている ...

wordpressの図解 3

WordPressのテーマは数が非常に多く、自身の事業に合うベストなものを探すだけでも大変な作業になってしまいます。 そこで今回は事業の目的別にWordPressのテーマを厳選して紹介しています。 テ ...

-WEBマーケティング

Copyright© フリーランスストラテジー , 2019 All Rights Reserved.