投稿のストレス軽減!TinyMCE Advanced設定方法と具体的な使い方3選

  • このエントリーをはてなブックマークに追加

ワードプレスの投稿をする時、初期設定のビジュアルエディターのままでは無料ブログと比べたら何の機能もなくて驚くかもしれません。ワードプレスの投稿をする時、初期設定のビジュアルエディターのままでは無料ブログと比べたら何の機能もなくて驚くかもしれません。

実際にブログ記事では色んな表現方法をするはずです。

「ここ、文字を大きくしたい。」
「フォントに色をつけて強調したい。」
「表をいれて見やすくしたい。」

というように、記事そのもののをユーザーに理解してもらうために色々装飾をしたりしたくなるはずです。

しかし、初期設定のままだと・・・

 

 

 

 

「え?こんだけ?」とツッコミをいれたくなるほどシンプルです。

フォントカラーさえ変えられない(汗)

シンプルイズベストとは言うものの、記事は読みやすくシンプルにしたほうがいいですが、エディターがここまでシンプルだと何もできないので逆に困ります。

そこでワードプレスを使っているユーザーが最も活用しているのが、ビジュアルエディターを拡張するプラグイン「TinyMCE Advanced」です。

このプラグインは、文字を大きくしたり、表を挿入することもできるのは勿論のこと・・・絵文字まで!はどうでもいいですが、自らカスタマイズすることが可能です。

更に他の投稿関連のプラグインも、最も人気のこのプラグインとの相性を考えられて作られているのでワードプレスを使うのならば絶対にインストールしておきたいプラグインです。

そこで、ここではTinyMCE Advancedのインストールからオススメの設定方法・・・そして使い方までをステップバイステップで網羅的に解説をしていきたいと思います。

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

インストールの仕方がわからないのであるのなあば、プラグインのインストール・有効化・停止・削除の記事で図解で解説しております。(有効化してもプラグインが動かない理由も解説しております。)

一応、間違えて違うプラグインをインストールしてしまうといけないので、下記の画像ならば大丈夫です。

インストールしたら「有効化」するのをお忘れなく。では、さっそく設定していきましょう。

 

1.TinyMCE Advancedの基本初設定

まず、管理画面の左側のメニューにある設定をクリックすると、TinyMCE Advancedが出てきますのでクリックしてください。

クリックをすると下記の画面が表示されるはずです。

このページはTinyMCE Advancedの設定画面と同時に現在投稿画面で表示される編集アイコンが並んでいるのですが・・・TinyMCE Advancedをインストールするだけで、ビジュアルエディターの項目はこれまでの倍以上に増えるのがわかるはずです。

デフォルトの時と比べても、かなり増えていますよね。

で、これで終了!でもいいのですが、このプラグインの凄いところは色々カスタマイズができるところです。

1-1.アイコン(ボタン)を追加・削除

初期設定のままでもいいですが、色々編集できる機能のアイコンを選択して追加したり削除のしたりすることができます。

まずは追加の仕方について・・・

ですが基本的に追加できるのは以下の赤枠のアイコンです。

基本的にはこれ以外のアイコンはありませんが、他のプラグインとの連動もできたりするのでその場合は他のプラグインを探してもいいです。

では、実際に追加をしていきましょう。

今回は特にブログ記事を装飾をする上で必要だと思うものをピックアップしますが、まずは文章を強調する時に使えるマーキーを例題として追加をしてみましょう。

TinyMCE Advancedの場合のマーキーの表記は「背景色」です。

※マーキーとは?教科書とかでテストにでるところを蛍光ペンで強調して覚えるところを目立つように書いたことがあると思うのですが、まさにその機能です。ここの文章を強調したい!という時に使います。(詳しくは脳科学からわかる読みやすいブログのフォントカラー3つのルールをご覧になってください。)

 

 

 

探してみたらあるはずです。

そして、強調タグとして使える「下線」

 

 

 

この2つは結構使う頻度が多いかなと思いますので実際に追加していきましょう。

やることは簡単でドラッグ&ドロップでできます。

削除したい場合はエディターないのアイコンを関係ないところにドラッグ&ドロップをすれば消えるはずです。

追加したいボタンを選んでドラッグをしツールバーにドロップをするだけで追加をすることができます。

1-2.アイコンの並べ替え

ついでにメニューボタンの並び替えをしてもいいでしょう。

フォント関係(カラー・マーキー・サイズ)をまとめたりとかですね。

よく使うボタンをツールバーの二段目に使う頻度の高いボタンのとなりに配置しておくと作業効率も上がるので、並び変えることをお勧めしています。

並べ変えの時も、配置を変えたいボタンを選択して、配置したい場所にドラッグ&ドロップします。
一応、参考になるのかどうかはわかりませんが、下記がこのブログのビジュアルエディーターです。

このように自分が使いやすい配置にできたのならば、とりあえずの基本的な設定はこれでオッケーなのでデフォルトのままでもいいでしょう。

変更を保存のボタンをクリックすれば設定を終了します。
これにて、基本的な設定は完了です。

1-3.その他の設定項目について

TinyMCE Advancedでは、これだけの設定だけでなく他にも色んな細かい設定をすることも可能です。
よければここも設定してもいいかもしれません。一応、ここではこのブログで設定している項目とその理由も解説していきます。

1-3-1.設定

□リストスタイルオプション

番号付きリストや番号なしリストの項目が増えます。これはいれておいて損はないのでチェックしておきましょう。

□コンテキストメニュー

これは投稿画面で右クリックした時の項目がワードプレスの投稿時に必要なメニューに変えるか変えないかの設定です。基本的にはチェックする必要はありません。

□代替リンクダイアログ

この欄にチェックをいれるとリンクを貼る際の設定を簡易的なものではなく詳細まで設定を一発ですることができるようになります。ブログ記事内のみにリンクを貼ることが多い場合はチェックしなくてもいいですが、外部のサイトの紹介を結構頻繁にする場合はチェックをいれたほうがいいと思います。(このブログではチェックを入れています。)

□フォントサイズ

TinyMCE Advancedのフォントサイズの指定は見て貰えばわかると思いますが、ptになっています。このptというのは出版物で使われるフォントサイズの指定の仕方なのですが・・・。しかし、ワードプレスの設定では大体の場合はpx指定なので、チェックをいれておいたほうがいいと思います。

1-3-2.高度なオプション

□段落タグの保持

記事投稿画面をする時、ビジュアルエディターやテキストエディターを交互に行き来することがあります。その移動をする中でなぜかコードがくずれてしまうことがあるのですが、ここにチェックをいれておくと不具合をけいげん軽減することができますのでチェックを入れておくことをオススメします。

□画像元の貼り付けを有効にする

これは言葉の通り、画像の下にリンクを貼ることができるのですが、この機能はテンプレートによっては表示されたりされなかったり、ブラウザによっては表示されないという問題がおこったりすることが多いのでチェックしないほうがいいのかと。

1-3-3.管理

 

 

 

 

 

 

□設定のインポートとエクスポート

例えば、あなたがブログを複数やっていてビジュアルエディターの設定を他の自分が運営しているブログに反映させたい時などに使える機能です。やり方は簡単で「この設定を使いたい」というほうをエクスポートをし、そのファイルを他のブログでインポートをすればできます。

□メインエディター
□wo-adminの他のエディター
□サイトのフロントエンドエディター

これらはもともと全部チェックをいれておいて問題もないのでチェックをいれておきましょう。

2.TinyMCE Advancedビジュアルエディターの使い方

通常のワードプレスのビジュアルエディターはシンプルすぎて使い方とか説明する必要はないのですが、TinyMCE Advancedをインストールするとできる事が増える分だけ使い方も複雑化します。

主にわけると、

・アイコン欄(赤枠)
・テキスト欄(オレンジ枠)

にエリアがわかれていますが、アイコンの数もテキスト欄からの編集もできるので結構最初は難しいと感じるかもしれません。そこで、ここではビジュアルエディターでの代表的な使い方を解説していきましょう。

2-1.ビジュアルエディターのアイコンの意味

まずは、ビジュアルエディターのアイコンの意味とタグをご紹介していきましょう。ある程度ブログをやったことがあったり特に昔のワードに触り慣れている人はスルーしても大丈夫かなと思います。

意味がわからないアイコンがあるのならそれだけチェックしておけばいいでしょう。

  太字 指定した範囲のテキストを太いテキストに変えてくれます。
  下線 選択範囲のテキストにアンダーライン(下線)を引きます。
  イタリック 指定したテキストが斜めになります。
  テキスト色 指定した範囲のテキストのフォントカラーを変えることができます。
  背景色 指定した範囲のテキストの背景に色をつけるマーキーをつけることができます。
  引用 引用をするときに使います。(SEOを考えた際は引用元を紹介することもお忘れなく)
  左寄せ 選択した範囲・区切りタグ(P)のテキストや画像などを左側に寄せることができます。
  中央揃え 選択した範囲・区切りタグ(P)のテキストや画像などを中央に揃えることができます。
  右寄せ 選択した範囲・区切りタグ(P)のテキストや画像などを右側に寄せることができます。
  リンクの挿入 選択した範囲のテキスト・画像にリンクを挿入することができます。
  リンクの削除 一度つけたリンクを一発で削除し元の状態に戻すことができます。
  インデントを減らす 増やしたインデントを減らすことができます。
  インデントを増やす 段落の書き出し位置を設定できます。

見てもわからない場合はとにかく実際に使ってみて試して「あぁ!こういうことなんだ!」と体験学習をしていけばいいです。

ただ、引用タグ(インデント)は引用する時に使うタグなのでボックスとしては使うとSEOに影響をするのでそこだけは注意してくれればいいかなと思います。

2-2.続きを読むタグ(moreタグ)の挿入

このタグは大体の場合、ブログの投稿一覧で「ここまで表示をする」と区切りをつけるタグでブログのテンプレートによって必要になる場合があります。

ほとんどのブログでは100文字表示をさせてそれ以降は一覧には表示しない。

というような設定をテンプレートで最初からされているので必要ないですが、バズ部さんのxeory とかは、このタグを入れないとカテゴリ一覧などのページに全記事が表示されてしまうのです。

そういったテンプレートの場合にこの続きを読むタグを挿入します。

やり方は簡単です。まず、続きを読むタグを入れたい(ここまでは読んでほしい導入部分)を選択してから

「挿入>続きを読む」タグを挿入

をクリックしてください。すると・・・

 

 

 

 

 

 

 

 

上記のように点線とmoreとはいります。これで点線の上の部分を表示しますという指示を出すことになります。

2-3.テーブルの挿入と設定の方法

コンテンツ内容をわかりやすく説明する際には、図や表を使うと文字よりも感覚的に伝わりやすくなりますが、TinyMCE Advancedでは表(テーブル)をいれることができます。

ただ、結構使いにくいので個人的には後で紹介するテーブル簡単にいれることができるプラグインを使ったほうがいいかなと思いますが、一応紹介しておきます。

まず、挿入>テーブルを選択します。

テーブルをクリックし、テーブルを挿入にマウスを合わせて、お好みの列と行を選んでクリックをすると挿入されます。

□(四角)の部分をクリックしながら大きさを調整することができます。この表のところに文字を挿入できます。

線に色を付けたい場合や背景色をつけたい場合は・・・・

テーブルからセル→セルのプロパティーをクリックすると変更ができます。

そして、これだけの準備ができたら投稿に挿入をしていきましょう。すると記事を入力する欄に画像が挿入されます。(背景色は範囲を設定しましょう。)

このように表が出来上がります。そして更にやってほしいのがそのままだと表が大きすぎてスマホで表示しきれない場合が多いので、テーブル→票のプロパティから・・・

 

幅をパーセント表示をしてください。これは100%にしていますが90%とかでもいいです。とにかく最後に「%」を入れることを忘れないようにしましょう。あと、配置などは基本的には中央にしておくのがベターです。

これだけできれば表は作ることができるはずなので、十二分です。表はコンテンツをわかりやすく説明することができるツールなので是非活用してください。

主に使うのはこの2つだと思うので紹介しました。その他のの項目はアイコンにもあると思うので省略しておきます。

3.TinyMCE Advancedをパワーアップするプラグイン

このビジュアルエディターのプラグインはかなりの人が使っているので、他の投稿を効率化するプラグインを作ってる人たちも誤作動がおこらないようになっています。

そのため、他のプラグインを導入すればもっと使いやす苦なる場合もあります。

例えば、先ほどのチラッとテーブルのプラグインがあると言いましたが、そういったプラグインとも相性は抜群なので必要ならばどんどん導入していきましょう。

ここでは、特にブログを本気でやる人にとっては有効に使えるだろうなと思える投稿用のプラグインを3つほど紹介したいと思います。

3-1.カラーパレットを拡張するプラグイン

これはデフォルトの設定をでTinyMCE Advancedのビジュアルモードでも一緒で僕自身がすごい嫌だなと思ったことなんですが、「指定の色を保存することができない」のです。

今現在も方法論を探ってはいるのですが、フォントカラーを変えたい場合にもとも設定をされている色を使いたくない場合などに毎回色を探して指定をすると作業効率が悪くなるのが嫌でした。

そこで何かプラグインないかなと調べたらありました。カラーパレットに色を保存するプラグインが・・・その名もTinyMCE Color Pickerです。

これをいれると指定した色を保存することができます。

ただ、弱点は色を指定してからボタンを押さないと反映されないというちょっとした二度手間になってしまうところですが・・・(汗)僕の場合はWindowsLIVEWiterが使える状態なのでいいですがない場合はこのプラグインをインストールしてみてください。

3-2.CSSを反映させるプラグイン

ワードプレスでは、自分自身でCSSを使ってデザインをいれることができます。例えばボックスとかボタンとかをHTMLコードをいれるだけで反映させることができるのですが、そういった設定はビジュアルエディターではなくテキストエディターでタグを手打ちでいれないといけません。

<div class”pashiri”>最高のいい男は全財産を貢ぐことができる男である。</div>

というように・・・しかし、これは結構面倒なのでビジュアルエディターでできるようにしてくれるのが、AddQuicktagというプラグインです。

これを導入すれば、ボックスで囲いたい場所を選択して選択をするだけでボックスをいれることができるという設定をすることができるようになりますのでCSSでボックスやボタンなどを作っている方は導入をしたほうがいいです。

3-3.表(テーブル)を作成するプラグイン

そして、最後にテーブルをいれるプラグインがTable Pressです。テーブルのプラグインは結構あるのですが、レスポンシブ対応しているテーブルを挿入できるプラグインは現在は知る限りではこのプラグインしかありません。

レスポンシブ対応をしていないプラグインを使うとスマホで閲覧をするとテーブルの部分がPCと同じ大きさの表が表示されてしまってユーザービリティーを低下させてしまうのでテーブルをいれる際はTable Pressのようなレスポンシブ対応をしたプラグインをいれていきましょう。

最後に

さて、いかがでしたでしょうか?TinyMCE AdvancedはWordPressを活用している人の多くが導入しているプラグインで非常に高性能です。

導入することによってかなり記事投稿を効率化できストレスなく投稿ができるようになるでしょう。あなた次第で他のプラグインと組み合わせてもいいですし、あなたなりに活用してください。

たかが投稿ですがそのストレスを軽減することができればこれまでよりも書くことに集中することができるようになるはずです。

  • このエントリーをはてなブックマークに追加
Comment form