記事投稿画面を使いやすくする「TinyMCE Advanced」の使い方

WordPressの記事投稿機能を拡張する「TinyMCE Advanced」は、HTMLを知らなくても無料ブログを書くのとほぼ同じ状態にするためのプラグインです。
HTMLを記事作成の度に毎回書くのは面倒なので、ぜひ導入して記事作成の効率化を図りましょう。

TinyMCE Advancedを導入するメリット

「TinyMCE Advanced」を導入することで記事作成がラクになる

「TinyMCE Advanced」を導入する最大のメリットは、記事の作成が簡単になることです。
WordPressではHTMLによるテキスト作成だけでなく、ビジュアルエディタという無料ブログのように記事作成をすることができます。

しかし、ビジュアルエディタの標準装備では編集機能が貧弱です。「TinyMCE Advanced」はビジュアルエディタを強化できるプラグインで、標準装備ではなかった編集ボタンを増やすことができます。
編集ボタンが加わることで、指定した操作をクリック1つで実行することが可能です。

これらの編集ボタンはHTML(テキストモード)にて書くこともできますが、毎回の記事作成で作るには非常に面倒です。
その面倒な作業を「TinyMCE Advanced」の導入によって簡略化できるので、毎日の更新でも記事作成が苦になりません。

見た目も良くなるので、良質なコンテンツになる

「TinyMCE Advanced」を導入しない状態のビジュアルエディタは、お世辞にも良質な記事を書くのは難しいです。
何も編集の入っていない記事は非常に読みづらい記事でもあるので、読者もなかなか付きません。

例えば標準のビジュアルエディタのままでは、以下の編集が難しいです

・表の挿入、編集
・画像の周りの余白操作

これらの操作は、今では記事コンテンツを作る上では必須の装備になってきます。
反対に言えば、これらの編集がある程度できるとコンテンツの質がグッと上がるので、ぜひ「TinyMCE Advanced」を導入して設定しておきましょう。

TinyMCE Advancedの導入・設定方法

「TinyMCE Advanced」を自分のWordPressにインストールしていない場合は、まずはインストールしましょう。

TinyMCE Advancedのインストール

WordPress内のプラグイン管理画面から直接インストールできます。
また、プラグイン公式サイトからインストールすることも可能です。

TinyMCE Advanced
https://ja.wordpress.org/plugins/tinymce-advanced/

編集ボタンをカスタマイズしよう

「TinyMCE Advanced」を導入した後は、ビジュアルエディタ内に編集ボタンを追加していきましょう。

TinyMCE Advancedのカスタマイズ

編集と言っても方法は簡単です。追加したいボタンを下のカテゴリー群から選び、該当するメニューにドラッグするだけで大丈夫です。

不要なボタンがあるときは、上の追加している部分から下のカテゴリー群へドラッグすることで削除できます。

TinyMCE Advancedの設定方法

こちらは、編集ボタンの一例です。迷ったときはこちらの配置を試してみてください。
その中で自分にとって必要なもの・不必要なものをカスタマイズしていくと理想の配置がわかってきます。

忘れてはいけないのは、編集ボタンをいじった後は「Save Changes」で設定の保存をしておくこと。こちらのボタンを最後に押さないと、せっかくの配置換えもすべて消えてしまいます。

また、下記の表は編集ボタンの種類と効果がまとめられてあります。どのボタンがどのような効果がわからないときは参考にしてみてください。

TinyMCE Advancedのボタンの解説

TinyMCE Advancedのボタンの解説

TinyMCE Advancedのボタンの解説

Advanced Optionsを最後に見ておく

編集ボタンの配置換えと共に、「TinyMCE Advanced」内にある「Advanced Options」にもチェックを入れておきましょう。

チェックを入れるのは、画像にある2つだけで大丈夫です。

TinyMCE Advancedのチェック箇所

こちら1つ目のチェックボックスは、ビジュアルエディタで書いていたものをHTMLモードに切り替えたときに生じる不具合を防いでくれる機能です。

2つ目のチェックボックスは、フォントサイズの単位をピクセルに変更するものです。こちらは表示させたい媒体などが明確である場合は、無理にチェックを入れておく必要はりません。

以上の部分を変更しておけば、ビジュアルエディタにおける操作に困ることはないでしょう。

TinyMCE Advancedで使える編集ボタンの操作方法

ここからは、インストール後に活用したい便利&良質な記事を作ることができる編集ボタンについてご紹介します!

段落(見出しタグ)

記事の見栄えと共に、SEO的にも非常に重要な部分になってくるのが段落です。

インターネットの記事を見ていると、かならず大きな見出しと共に、文章が1つのまとまりになっています。このカテゴライズをするのが段落(見出しタグ)と呼ばれるものになります。

見出しの使い分け

段落をきちんと作りながら文章を作ることで、検索エンジンからきちんとした記事であると理解され、検索したときにきちんとページが表示されるようになります。

段落の使い分け

段落の編集ボタンは、やみくもに使ってはいけません。きちんと順番を考える必要があります。

見出しは2→3→4ときちんと順番で使うことで、初めて検索エンジンにも認識してもらうことができます。見出しタグ3で「炊飯器の使い方」のタイトルを作ったとき、「炊飯器の使い方」を詳しく説明したいのであれば見出しタグ4でさらに段落を分けていきます。

「炊飯器」というキーワードが同じでも、「炊飯器を使ったレシピ」を同じ記事で書きたいのであれば、新たに見出し3を作ったので大丈夫です。

表を参考にしながら、段落の作り方を身に付けておきましょう。

インデント(字下げ)

インデントとは、字の位置を下げたいときに使う編集ボタンです。

2

改行や行間を調整することで、記事として見やすいものにするときに使います。使う場合は、インデントしたいテキストをドラッグして「インデントを増やす」の編集ボタンを押すだけで大丈夫です。

位置が気に入らないときは、インデントを増やした部分を同じようにドラッグし、今度は「インデントを減らす」を押すと解除されます。

リンク

TinyMCE Advancedを導入することで、テキスト内にリンクを作ることができます。ページ内の内部リンクは、SEO的にも重要な項目となってくるので、使用頻度が高いボタンと言えます。

リンクの挿入方法

リンクを貼りたい場合は、貼りたいテキストをドラッグします。

リンクの挿入方法

ドラッグしてから「リンクの挿入 / 編集」ボタンを押すと、リンク先を入力できる画面が出てきます。自分が入れたいリンク先をコピペで大丈夫ですので、貼りつけておきましょう。これだけで、テキストにリンクを貼りつけることができます。

こちらの編集ボタンでは、実際にテキストをクリックしたときのリンク先の表示の仕方を指定できます。
外部サイトの場合はリンクは新しいタブで表示されたほうが読み手は便利さを感じるので、「リンクを新しいタブで開く」というチェックボックスにもチェックを入れておきましょう。

画像の周りに余白を入れる

TinyMCE Advancedをインストールする上で大きなメリットの1つである、余白の調整です。余白を調整することで、記事の精度が上がります。

画像の余白の調整

余白を調整する場合は、ビジュアルエディタ内に貼りつけてある画像を一度クリックした上で、編集ツール内の画像ボタンを押しましょう。

画像の余白の調整
 
画像ボタンを押すと、上記のような編集画面が出てきます。その画面の「詳細」をクリックすると、余白を自分で決められる画面になります。こちらで指定したい余白の数字を入れるだけで大丈夫です。

あまり余白があり過ぎても違和感ある記事となるため、プレビューで確認しながら微調整を行いましょう。

YouTube動画を記事内に挿入してみる

TinyMCE Advancedをインストールしておけば、ビジュアルエディタ内で簡単にYouTube動画を挿入することができます。

YouTubeの挿入方法

まずは、YouTube動画で貼りつけたい動画画面を出します。各動画には「共有」ボタンがあるので、そちらをクリックします。すると、さらに「埋め込みコード」というものが出てきます。

YouTubeの挿入方法

この「埋め込みコード」をWordPress内で使うので、コピペをしておきます。

YouTubeの挿入方法

次に、WordPress内で作っておいた動画を挿入したい記事を開きます。その記事の動画を挿入したい部分をクリックし、ポインタを合せておきます。合わせた後、編集タブ内にある「挿入」の「動画を挿入」をクリックします。

YouTubeの挿入方法

「動画を挿入」をクリックすると、上記のような画面が出てきます。こちらの「埋め込む」をクリックし、先ほどYouTubeで取得した「埋め込みコード」を貼りつけます。

YouTubeの挿入方法

上記の画面のようになると、YouTube動画を挿入することに成功しています。管理画面では動画画面は出ていませんが、プレビューなどで見ることができます。

画面の大きさなどが気に入らないときは、手動で編集できますので試しにやってみましょう。

まとめ

今回は「TinyMCE Advanced」を導入することで、ビジュアルエディタを強化する方法についてご紹介しました。
TinyMCE Advancedを使うことで、簡単かつ質のいい記事へ昇華することができます。ぜひ参考にしてください。

あなたのWEB集客力をアップさせるメールマガジン

独立起業したばかり、副業(起業準備中)のコーチ、コンサルタント、士業、セラピストといった方がWEBで集客できるようになるメールマガジンを無料配信しています。

●ホームページやブログ、ソーシャルメディアで集客できるようになりたい
●顧客に頭を下げなくても売上が上がる仕組みを作りたい
●客単価を上げて「高額商品」を販売したい
●売上が2倍、3倍になるビジネスモデルの設計方法を知りたい

このような方はぜひメールマガジンを読んでください。
完全無料のプレゼントも用意しています。

ご登録は以下よりどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA