WordPress

WordPressの文字を装飾するためのプラグインTinyMCE Advancedの使い方

TinyMCE Advancedとは?

ビジネスでお金を生み出す日下部です。(^^)
ブログで、あなたの稼ぎになる情報を発信しています。

 

文字の装飾を1クリックで可能にするTinyMCE Advancedがオススメだぞ

 

WordPressエディタを使って、文字の装飾をカンタン拡張できるのが、TinyMCE Advancedというプラグインです。

下の画像は、ワードプレスエディタのスクリーンショットになります。

赤枠の部分は、デフォルトで用意されている装飾機能です。

この他、機能を追加したい場合に、ワードプレスのプラグインである「TinyMCE Advanced」がオススメです。

 

TinyMCE Advancedでは、こんなことができマッスル!!

・打ち消し →  打ち消し

・背景色  →  背景色

・下線   →  下線

・上付き  →  上付き2

・フォントサイズ → フォントサイズ

・・・etc

 

他にも下の画像のボタンを追加すれば機能を使うことが可能になります。

※画像をクリックして拡大

 

ボタンを追加すれば、文字の装飾がワンクリックで可能になります。

設定方法は、とてもかんたんなのです。プラグインをインストールして早速設定していきましょう。

 

ボタン名称内容(用途)
太字文字を太文字にする
イタリック文字を斜めにする
下線文字の下にラインを引く
引用他人の文章を引用する
背景色文字に背景色を付ける  ※カラーの選択も可
テキスト色文字の色を変える
横ライン記事に横線を引いて境界をはっきりさせる
Bulleted list箇条書き(デフォルト・白丸・黒丸・四角)
番号付きリスト箇条書き(箇条書きに番号をふる)
続きを読む→記事の続きを読むボタンを付ける
ツールバー切り替え配置したボタンの表示・非表示
※必ず一段目の右端に配置してください
左寄せテキストを左に寄せる
中央揃えテキストを中央に揃える
右寄せテキストを右に寄せる
両端揃えページの両はしをそろえる
リンクの挿入/編集テキストにURLを設定する
リンクの削除設定したURLを削除する
テーブル記事内に表を挿入作成する
フルスクリーン記事の執筆に集中する
インデントを減らすインデント(字下げ)を削除する
インデントを増やすインデント(字下げ)を調整する
段落見出しタグの設定
フォントサイズ文字の大きさを変更
取り消し直前の操作を取り消す
やり直し取り消した操作をもう一度元に戻す

TinyMCE Advancedのインストール

まずプラグインのインストールをしていきましょう。

ワードプレスでプラグインのインストールをはじめてするということであれば、こちらの記事を参考にしてください。

 

プラグインのインストール方法を図解と動画で初心者にわかりやすく解説【WordPress】

 

プラグインのインストール方法は、まずワードプレスの管理画面にログインします。

管理画面の左にメニュー項目がありますので、その中のプラグインを選択して新規追加より行ってください。

 

新規追加をクリックして画面が切替ると左上にプラグインの検索窓があります。

そこに「TinyMCE Advanced」とプラグイン名を入力します。

 

目的のプラグインが見つかったらインストールして有効化にしてください。

TinyMCE Advancedの設定

■WordPressエディタに拡張機能の追加

ワードプレスの管理画面から設定を確認してみましょう。

インストールが完了していると、設定のところにTinyMCE Advancedが表示されますので、クリックしてください。

 

エディターの設定に画面が切り替わったら、追加したい拡張機能をドラッグ&ドロップで上のバーのところまで移動させます。

ボタンは何個でも移動させても良いのですが、あまり多すぎても雑多になり、使うときに見つけるのが大変になります。

 

よく使う最低限の拡張機能を追加して、あまり使用しないものは無理に追加しなくてもいいでしょう。

また追加した拡張機能を辞めたくなった場合は、逆にバーの方からドラッグ&ドロップをして元に戻すだけです。

 

目的の機能を追加したら、右にある「変更を保存」を押して保存してください。

 

記事投稿エディタを確認してみましょう。

 

先ほど追加した拡張機能が新たに表示されているのが確認できますよね?

このようにして自分がよく使う拡張機能を追加していきましょう。

TinyMCE Advancedのその他の設定

エディタの設定の画面をそのまま下にスクロールしていくと、設定、高度なオプション、管理を設定する項目が出てきます。

追加で設定をしたいものがあればチェックマークを入れるようにしてください。

 

ここからは、それぞれがどのような機能を果たすのかを確認していきます。

【設定】

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

追加リストオプションの有効化: 順序付きリストの先頭記号に英大文字や小文字、順序なしリストの先頭記号に黒丸や四角を使用するなど。

  • 順序なしリスト
  • 先頭番号に記号
  • 白丸

このように文章の前に数字や丸をつけてリスト化にする追加機能です。

 

ブラウザーのコンテキストメニュー (右クリックメニュー) を置換

 

ワードプレスエディタの記事を書く部分で、右クリックを押してください。

そうすると、以下の画像のようなウィンドウが表示されるようになります。

 

 

ツールバーのリンクボタンまたはリンクメニュー項目のクリックで TinyMCE リンクダイアログを開く

 

ツールバーのリンクボタンとは、この部分のことです。

 

鎖のようなマークをクリックすると通常はこちらのウィンドウが開きます。

文字にURLを挿入してくれるウィンドウです。

 

代替リンクダイアログにチェックマークを付けると、こちらが表示されます。

  • URL・・・リンク先のURLをここに挿入します。
  • リンク文字列・・・リンクを貼りたい文字を選択すると自動表示されます。
  • タイトル・・・リンクをマウスオーバーした際に表示される文字の設定。
  • Rel・・・Nofollow属性の選択。
  • リンクターゲット・・・クリックしたときに新しいタブでウィンドウを開くようにする。

 

Replace the size setting available for fonts with:

8px、10px、12px、14px、16px、20px、24px、28px、32px、36px、48px、60px、72px、96px.

 

チェックマークを付けると、フォントサイズの変更をカンタンにできるようになります。

目立たせたい部分は少し大きめの文字にしたり、文字の大きさを変えるだけでブログの読みやすさが変わります。

まとめ

TinyMCE Advancedプラグインは、文字の装飾に便利です。

設定をすれば、記事が素早く書けるところもインストールをオススメする理由です。

 

デフォルトの設定のままだと、目立たせるために文字の大きさを変更したかったり、強調するために帯を付けたい場合は、HTMLタグが必要です。

記事を投稿したあとに、その作業をすると、ちょっと面倒だったりしますよね?

 

そんな問題を解消してくれる便利なプラグインです。

ワードプレスエディタで記事を書くのであれば、必ずインストールをオススメするプラグインの一つです。

ぜひ試してみてください。

 

こちらの記事で他のプラグインのオススメしています。

https://gaku78.com/category/wordpress/

ABOUT ME
Qusakabe
趣味:筋トレ、ゴルフ、麻雀、ネット、息子(2)・娘(0)と遊ぶこと。 12時間以上拘束されるのに残業代も一切でない超どブラック会社を2社経験。 「会社ってこんなものなのか・・?」っと疑問を抱き、「これだけ頑張れるなら自分で起業してもそこそこやっていけるだろう」と感じたことから起業を決意。 現在は、法人7期目の代表取締役を継続中。 ウェブで稼ぐための情報を発信しています。