WordPressプラグイン

文字装飾プラグイン「TinyMCE Advanced」使い方・設定手順

tinymce advanced 使い方 設定

ワードプレス上で作業し始めて、記事を書いてみたら赤文字青文字マーカーを使いたいのにどうやればいいのか分からないという方必見です。

今回は、文字装飾を可能にするプラグイン「TinyMCE Advanced」の使い方や設定方法について詳しくご紹介していきます。

  • 箇条書きのところは青文字
  • 単語で目立たせたいところは赤文字や下線
  • あとは本当に強調した文章にはマーカー

といったこれは私の中の取り決めですが、あなたもこんな形で文字装飾を行っていこうとこのページにたどり着いたはず。

実際、文字装飾する事で、文章にメリハリが出てより読みやすい文章にする効果をもたらしたりもしますよね。

そんな今回は、文字装飾を今すぐに可能にするプラグイン「TinyMCE Advanced」の設定方法について詳しく解説していきますので、最後までしっかりとご覧ください。

岡田康平
岡田康平
こんにちは、岡田康平です。

なぜ私が在宅ワークで、家族全員が楽しめるこんなライフスタイルを送れているのか?

期間限定で、私が自由なライフスタイルを手に入れた方法について特別公開しているので、是非見ていってくださいね。

文字装飾プラグイン「TinyMCE Advanced」の機能とは?

ワードプレスの初期の機能では細かい設定が出来ず、表の作成とか、フォントサイズの変更が簡単にできれば楽なのに…と感じていた方も多いはず。

他にも、例えば、

  • YouTube動画の挿入
  • テーブルタグの挿入や編集
  • 文字の大きさや色などの細かい装飾
  • 画像の回り余白を挿入

だったり、これらをプラグインなしでやろうと思うとHTMLの知識が必要だったりもします。

ただ文章を書き連ねていくだけであれば問題はなくても、検索して訪問してくれるユーザーにとって読みやすいコンテンツを作成していくためにも文字装飾や表や図って必要不可欠ですよね。

とはいえ、HTMLの知識を付けるのは簡単ではないですし、始めたばかりの初心者の方には難しいと感じる方も多いですよね。

しかし、そんな知識なしにそれらを実現してくれるのがプラグイン「TinyMCE Advanced」になります。

このプラグインを入れると、表作成や文字サイズを編集ボタンをクリックするだけで行えるようになるなど、記事を作成する時に時短になる機能がたくさん使えるようになります。

 

メリット

例えば、重要で目立たせたい文字を大きく表示しようとすると、初期のワードプレスの場合、テキストタブに切り替えてHTMLを編集する必要があります。

そんな事しないから必要ないと思った方もいるかもしれませんが、ただ単純に“改行”でさえHTMLが関わっています。

記事を書いてる時に改行をすると、<p>、<br />といったHTMLの言語を使って改行が行われています。

ですが、ワードプレスの初期の状態で改行をしていると改行が消されてしまう場合があるようですね。

これは、余白部分を消してブログの容量を小さくしようとする働きが原因のようです。

ただ、改行したいところでできないとなればストレスですし、ダラダラと文章が続いていたのでは読むのが大変です。

そんな使い辛いところも自動で改善してくれる上に、自分が使う機能だけをピックアップしてボタンを設置できるので、あるだけで便利です。

さらに時間短縮・作業効率UPにもつながってきますので、初心者アフィリエイターの方には特にオススメです!

 

文字装飾プラグイン「TinyMCE Advanced」設定方法

tinymce advanced 使い方 設定
  1. ワードプレス管理画面の左下「プラグイン」をクリック
  2. 「新規追加」をクリック
  3. 右上に表示される検索窓に「TinyMCE Advanced」を入力し検索
  4. 「今すぐインストールボタン」をクリック
  5. インストール完了後そのまま「有効化」をクリック

これでインストール・有効化は完了になります。

ここから設定を行っていく事になりますので、詳しい設定方法について下記でご紹介していきます!

 

自分用にカスタマイズする方法

続いて細かい設定方法に入っていきます。

実際にご自身がよく使う機能をボタンにするのがオススメ。

必要ないボタンまで入れてしまうと増えすぎて使いこなせなくなってしまうので、実際に利用して様子を見ながら増やしたり減らしたりを調節してみてください。

記事を作成していくと、自分がどれをよく使うのかという所が見えてくると思います。

まずは、設定画面を開きましょう。

有効化が完了したら左サイドバーメニューの一覧の「設定」から「TinyMCE Advanced」を選んでクリックします。

 

編集ボタンの追加・設定方法

実際のボタンの設置方法は、「使用しないボタン」の項目から利用したいものをドラッグ&ドロップで上の空欄に設置するだけの作業です!

とても簡単ですね!

 

【よく使用する機能一覧】

アイコン ツール名 用途
tinymce advanced 使い方 設定 段落 <h2>や<h3>などの見出しタグを設定する時に使用。インデックス効果を高めるWEBライティングのために必須
tinymce advanced 使い方 設定 フォントサイズ 文字のフォントサイズを変更する時に使用
tinymce advanced 使い方 設定 太字 文字を太字にして目立たせたい時に使用
tinymce advanced 使い方 設定 テキスト色 文字色を変更したい時に使用
tinymce advanced 使い方 設定 テキスト背景色 文字の背景に色を付けたい時に使用
tinymce advanced 使い方 設定 下線 文字にアンダーラインを付けたい時に使用
tinymce advanced 使い方 設定 左寄せ 文字を左寄せにしたい時に使用
tinymce advanced 使い方 設定 中央揃え 文字をセンター寄せにしたい時に使用
tinymce advanced 使い方 設定 右寄せ 文字を右寄せにしたい時に使用する。
tinymce advanced 使い方 設定 「続きを読む」タグを挿入 モアタグを挿入したい時に使用
tinymce advanced 使い方 設定 番号なしリスト リストタグを挿入したい時に使用
tinymce advanced 使い方 設定 番号付きリスト ナンバータグを挿入したい時に使用
tinymce advanced 使い方 設定 引用 引用タグを挿入したい時に使用
tinymce advanced 使い方 設定 インデントを減らす 文章をアウトデントしたい時に使用
tinymce advanced 使い方 設定 インデントを増やす 文章をインデントしたい時に使用
tinymce advanced 使い方 設定 リンクの挿入/編集 文字にリンクを挿入したい時に使用
tinymce advanced 使い方 設定 リンクの削除 文字のリンクを外したい時に使用
tinymce advanced 使い方 設定 テーブル(表) テーブルタグを作成したい時に使用
tinymce advanced 使い方 設定 画像の挿入/編集 画像の挿入、編集の時に使用。実際には画像に余白を入れたり、画像サイズのピクセル数を入力して調整する時に便利。
tinymce advanced 使い方 設定 動画を挿入/編集 動画を挿入する時に使用。実際にはYouTubeの動画コードを挿入する時に利用すると便利な機能。

これらの追加が推奨されていますが、青字で表記したものが実際私自身が多用しているものになります。

ちなみに、ドラッグ&ドロップする余白が足りなくなった場合には、

tinymce advanced 使い方 設定 ツールバー切り替え

こちらを使用して、ツールバーを増やしましょう。

あまり増えすぎても使いづらくなってしまうと思いますので、色々試して利用しないものは削除しましょう。

いつでも設定から変更が可能です。

一番上にある「エディターメニューを有効化する」にチェックを付けると、ボタンの上にファイルや挿入といったメニューバーを表示させる事が可能です。

ここからも機能を利用することができますので、ボタンとメニューで機能を使い分けるのもいいと思います。

 

オプション機能の設定

ボタン追加を行った後、そのまま下がっていくと詳細設定の項目があります。

  1. リストスタイルオプション:箇条書きをするときに使うリストタグが増える
  2. コンテキストメニュー:投稿画面で右クリックするとリンクやテーブル(表)が挿入できるメニューが表示されるようになる
  3. 振替リンクダイアログ:リンクを入れるときに非常に便利な機能が追加される
  4. フォントサイズ:フォントサイズを変更できる範囲が広がる

基本的になくても問題がないものが多いですが、①と④は使う事があるのでチェックを付けておくのがオススメです。

あったら便利な機能なので、全部にチェックを付けても問題はありませんよ。

 

高度なオプションの設定

こちらは変更せずに初期値のままでも問題はありません。

ただ、真ん中の段落タグの保持は、テキストエディターとビジュアルエディターを切り替えている時に、勝手にタグが追加されたりするのを防いでくれますのでチェックを付けておくといいと思います!

 

管理項目について

最後の管理項目は、他のwordpressブログに同じTinyMCE Advancedの設定を反映させるものです。

もし他のブログサイトで同じ設定をしたい場合にもう一度する必要がなくなります。

特にそのような予定もなく未定であれば初期値のままでOKです。

画面右下にある「変更を保存」を押して「TinyMCE Advanced」の設定は完了となります。

項目はたくさんありましたが、あまり難しくはありませんでしたよね。

あとは実際に利用してみて、調節してご自身の使いやすいカスタマイズを見つけてみてくださいね。

 

文字装飾プラグイン「TinyMCE Advanced」使い方について

tinymce advanced 使い方 設定

では追加した機能をどんな風に使うのか、使うとどんな表記になるのかご紹介をしていきます。

ここまでご紹介した中にもいくつか利用していますが見つけられましたか?笑

では私が良く使う、便利な機能をピックアップしてご紹介します。

 

フォントサイズ

文字を入力したら、入力した文字をドラッグした状態でフォントサイズを選んで変更します。

ワールドカップ ワールドカップ ワールドカップ

このように小さくも大きくも文字サイズも自由自在になります。

文字が大きいと目立ちますよね!そこに目が行くと思います!

記事を書く中でも有効に使ってみてくださいね。

 

テキスト色

こちらもフォントサイズ同様に、入力した文字をドラッグして好きな色を選ぶだけです。

大迫半端ないって! 大迫半端ないって!

良く使うのはこの2色ですね。見づらい色は避けるようにして目立たせたい部分に使用するようにしています。

 

番号なし・付きリスト

これは箇条書きの時に最初に選択すると、「・」が付きますので、その続きに入力をしましょう。

それ以降は改行するごとに一つずつ増えていきますので、クリックするのは最初だけで大丈夫です。

  • 長友佑都
  • 吉田麻也
  • 香川真司
  • 長谷部誠
  • 大迫勇也
  1. 長友佑都
  2. 吉田麻也
  3. 香川真司
  4. 長谷部誠
  5. 大迫勇也

番号付きと番号なしで使い分ける事ができますね。

個人的には、フォントサイズや色の変更よりも多く使っている機能かもしれません。

皆さんも色々利用してお気に入りの機能を見つけてみてくださいね。

記事の見やすさも格段にアップすると思います。

 

『文字装飾 プラグイン TinyMCE Advanced 使い方』まとめ

tinymce advanced 使い方 設定

今回は、文字装飾プラグイン「TinyMCE Advanced」の使い方や設定方法について詳しくご紹介してきましたがいかがでしたか?

このプラグインを使う事で、見やすさもかなり変わりますし、どうやってまとめようかと思った事もリストや表を使えば簡単にできます。

また、ただの白地に黒字だった記事に、メリハリがつける事ができたりもします。

実際、あなたもインターネットを利用していて、見やすいサイトだな、見づらいサイトだな、と感じた経験があったりしますよね。

そんな時、その見やすいサイトはどんな工夫がされているのか、文字装飾の法則を導き出す事によって、あなたのブログもよりクオリティーが上がってくるので、是非研究してみてくださいね。

2児のパパが自由になった方法を
メールマガジンで公開中!!


 

(※1)登録直後に自動返信メールにて限定プレゼントをお届けしています。
(※2)お預かりしたメールアドレスなどのプライバシー情報は厳守致します。
(※3)いつでもメール内の解除リンクから解除出来ます。