【WordPressプラグイン】エディタカスタマイズで文字の装飾

【Wordpressプラグイン】エディタカスタマイズで文字の装飾

Wordpressインストール時のエディタでは、思うような文字の装飾ができないです。

この記事では、WordPressプラグイン「TinyMCE Advanced」を使ったエディタのカスタマイズで文字を装飾をする方法についてご紹介していきますね!

【Wordpressプラグイン】エディタカスタマイズで文字の装飾

通常のWordpressエディタと「TinyMCE Advanced」導入後のエディタの比較

TinyMCE Advancedの設定方法2

上の画像で比較してもらえれば、一目瞭然ですよね!

Wordpressの通常エディタでは、必要最低限の装飾パーツしかありません。僕の場合は形から入るタイプの人間なので、自分のブログに愛着がもてるように多少デザインやカスタマイズにはこだわっています。

とはいっても、文字の装飾は至ってシンプルですが。。
ブログライティングで、僕が重視しているのはわかりやすい記事を訪問者さまに提供する事。

そのためには、あまりごちゃごちゃ装飾しすぎないようには気を付けています。僕が文字の装飾で徹底していることは、

  1. 一番強調したい所に太字を使う。
  2. 重要なポイントは赤文字を使う。
  3. さらに重要なポイントは黄色の背景を使う。
  4. 番号つきリストや番号なしリストをできるだけ使う。

このくらいですよ。色にもきちんとこだわりがあって、他の色はほとんど使用していません。これは、単純に文字が読みやすいからです。また、上記の様に番号付リストを使用してあげると、伝えたい事が簡潔化できるのでおすすめですね!

では早速、Wordpressプラグイン「TinyMCE Advanced」を使ったエディタのカスタマイズで文字を装飾をする方法についてご紹介していきます!

WordPressプラグイン「TinyMCE Advanced」のインストール方法

  1. 「プラグイン」⇒「新規追加」を押下します。
  2. 右上の検索ボックスで「TinyMCE Advanced」を入力して検索します。
  3. 「TinyMCE Advanced」が見つかりましたら、「今すぐインストール」を押下します。
  4. インストール後、「プラグインを有効化」を押下します。

「TinyMCE Advanced」の設定方法

1.Wordpressメニュー画面

TinyMCE Advancedの設定方法1

『設定』→「TinyMCE Advanced」を押下します。

2.TinyMCE Advanced設定画面1

TinyMCE Advancedの設定方法3

  1. Enable the editor menu」にチェックを入れます。
    ※上図の様に、「ファイル」、「編集」、「挿入」などのメニュー項目が表示されるのでとても便利です。
  2. 「Unused Buttons」に表示されているボタンは現在使用していないボタンです。使いたいボタンを上図の様に、「ドラッグ&ドロップ」で移動します。
  3. 「Also enable:」のチェックはお好みで入れてください。
    ※Link(replaces the insert/Edit Link dialog)はチェック入れることで、「no follow」を設定する事が出来るのですが、既存記事へのリンク項目が自動表示できないので、内部リンクの作成が非常に不便になってしまうので、おすすめしていません。

3.TinyMCE Advanced設定画面2

TinyMCE Advancedの設定方法4

上記の設定が終わりましたら、「Save Changes」を押下します。

4.TinyMCE Advanced設定画面3

TinyMCE Advancedの設定方法5

「Advanced Option」や、「Administration」は特に変更する必要ありません。

5.記事の編集画面1

TinyMCE Advancedの設定方法6

TinyMCE Advanced設定後、赤枠で囲った「ツールバー切り替え」を押下します。

6.記事の編集画面2

TinyMCE Advancedの設定方法7

ツールバーの切り替えを行うと、先ほど設定したエディタが表示されます。

以上です。

その他、Wordpress必須プラグインや後々役に立つおすすめプラグインについては下記の記事でまとめてありますので、是非参考にしてください。
WordPress初期設定の必須プラグインとおすすめプラグイン

まとめ

この記事では、Wordpressプラグイン「TinyMCE Advanced」を使ったエディタのカスタマイズで文字を装飾をする方法についてご紹介してきましたが、いかがでしたでしょうか?

記事の装飾に、それほど凝る必要性はないのですが、背景色などの設定はWordpress標準のエディタには搭載されていません。

また、テーブル(表)を視覚的に作る事ができるはパーツは便利ではありますが、あまりに列を増やしすぎてしまうと、PC画面ではよいですがスマホ画面では、逆に読みにくくなってしまいます。

ですので、もしテーブル(表)を使う際には、多くても列は2列ぐらいがいいでしょう。スマホユーザーを一番に意識した記事構成にしていきましょうね。

コメントを残す