2016年7月19日

TinyMCE Advancedの設定と使い方をマスターしよう

どうも!ブランドクリエイターの中江です。今回は「TinyMCE Advancedの設定と使い方をマスターしよう」というテーマでお話していきたいと思います。

WordPressは初期設定の状態だと、記事の編集ボタンが、このように非常に少ないです。例えば、文字の大きさを変えれなかったり、文字の背景に色を入れれなかったり、文字に下線を入れることができません。

tiny2

TinyMCE Advancedというプラグインを導入すると、このように記事の編集ボタンを増やすことができるので、かなり記事が編集しやすくなります。無料ブログ並みですね。

tiny3

今回は、このTinyMCE Advancedの導入から設定方法と使い方をご紹介していきたいと思います。

1.TinyMCE Advancedのインストール

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

WordPressの管理画面から「プラグイン」→「新規追加」をクリックして、右上の検索ボックスに「TinyMCE Advanced」と入力して検索してください。

tiny4

そうすると、この画面が出てくるので、「今すぐインストール」をクリックしましょう。

tiny5

次にこの画面が出てくるので、「プラグインを有効化」をクリックしましょう。

tiny6

これでTinyMCE Advancedのインストールは完了です。

2.TinyMCE Advancedの設定方法

では、インストールしたら次にTinyMCE Advancedの設定方法を見ていきたいと思います。

まずはWordPressの管理画面から、「設定」→「TinyMCE Advanced」と進んでいってください。すると、このようなボタンが表示されると思います。

tiny4

画面の味方としては、上のエリアにあるのが、今の記事の編集ボタンなので、「使用しないボタン」から上のエリアにボタンをドラッグ(左クリック長押しで、運ぶ)していくだけです。

全部追加する必要はなくて、オススメは「下線」「フォントサイズ」「背景色」「横ライン」の4つを追加するだけでも十分に編集は簡単になります。

追加したら、右上の「変更を保存」をクリックすると、このように編集ボタンを追加することができるようになっています。

tiny5

記事の編集画面を見たときにこのように「ボタンが少ない」と感じる時は、赤い枠で囲んでいる「ツールバー切り替え」をクリックしてください。

tiny6

そうすると、このようにボタンが表示されるようになります。

tiny5

これでTinyMCE Advancedの設定は終了なので、次は、実際にボタンの使い方を見ていきましょう。

3.TinyMCE Advancedの使い方

今回、使い方を紹介するのは、「フォントサイズ」「テキスト色」「背景色」「下線」「太字」「リンク」「段落」「引用」「リスト」「中央寄せ」「テーブル」「横ライン」「続きを読む」という、よく記事編集の際に使うボタンを紹介していきます。

3-1.文字のサイズを変える

記事の文字のサイズを変えるには、文字のサイズを変えたい文字を選択状態にした上で、「フォントサイズ」というボタンをクリックします。

tiny8

そうすると、文字のサイズを選べるようになるので、変えたい文字サイズを選びましょう。そうすれば、このように文字のサイズを変更することができます。

tiny9

3-2.文字の色を変える

次に文字の色を変更する方法を紹介していきます。

文字の色を変えるには色を変更したい文字を選択状態にした上で、「テキスト色」というボタンをクリックすると、カラーパレットが出てくるので、変更したい色を選択します。

tiny10

基本はこれでいいのですが、ここにはない色に変更したい場合は「カスタム」をクリックします。

そうすると、このようにカラーパレットが現れるので、左下の「◯」を移動させたり、右下のバーを上下させたりしながら、変更したい色を探しましょう。

例えば、今、この画面では、色は「黒」に設定されています。これはなぜかというと、右下のバーが赤い領域に設定されていて、左下の「◯」が黒い領域にあるからです。

tiny11

例えば、これを青にしたい時は、こう動かします。右下にあったバーを中間の青の領域に移動させて、左下にあった◯を青の領域に移動させることで、青になります。

そして、自分が変更したい色になれば、「OK」のボタンをクリックすると、変更することができます。

tiny12

そうすると、このように青文字に変更できます。

tiny13

3-3.文字の背景色を変更する

では、次に文字の背景色を変更していきましょう。これも文字の色を変える作業と、同様です。

文字の背景色を変えるには色を変更したい文字を選択状態にした上で、「テキスト色」というボタンをクリックすると、カラーパレットが出てくるので、変更したい色を選択します。

tiny14

そして、ない場合は、カスタムをクリックして、変更したいカラーを選んで、「OK」を押すと、このように背景を変更することができます。

tiny15

3-4.文字に下線を入れる

では、次に文字に下線を入れる方法を見ていきましょう。

これも同様に下線を入れたい文字を選択状態にした上で、「下線」というボタンをクリックしてください。

tiny18

そうすると、このように文字に下線を引くことができるようになります。

tiny19

3-5.文字を太字に変える

次に文字を太字に変える方法を見ていきましょう。

これも同様に、太字にしたい文字を選択状態にした上で、「太字」というボタンをクリックしてください。

tiny20

そうすると、このように文字を太字に変えることができます。

tiny21

3-6.文字にリンクを追加する

では、次に文字にリンクを追加する方法を見ていきたいと思います。

これも同様に、リンクを追加したい文字を選択状態にした上で、「リンクの挿入/編集」というボタンをクリックしてください。

tiny22

そうすると、このような表示が出てくるので、赤い枠で囲んでいる設定のボタンをクリックしましょう。

tiny23

そうすると、このような表示が出てくるので、「URL」のところには、追加したいリンク先のURLを入れて、リンクを新しいタブで開く場合は、チェックを入れましょう。

設定が終わったら、「リンク追加」というボタンをクリックしましょう。

tiny24

3-7.段落タグを入力する

段落タグはSEO対策において非常に重要な要素なので、ページを作成する際にはぜひ入れてもらいたいですね。

この辺のことは「SEO内部対策とは|検索上位に表示されるための3つの方法」という記事で話しているので、ぜひ、参考にしてみてください。

やり方は同様で、段落にしたい文字を選択状態にしたうえで、「段落」ボタンをクリックして、設定したい段落タグを選択してください。

tiny25

そうすると、このように段落を設定することができるようになります。

tiny27

3-8.引用タグを入れる

では、次に引用タグを入れていきます。引用タグは、他のサイトの記事や本などの資料の一部分を、自分のページに引用する場合などに使用します。

やり方は同様で、引用にしたい文字を選択状態にしたうえで、「引用」ボタンをクリックしてください。

tiny10

そうすると、このようにスライドされていると思います。このようにスライドされていたら、正しく引用タグを挿入することができています。

tiny11

3-9.リストを入れる

では、次にリストの挿入の仕方を見ていきます。リストは「番号なし」か「番号あり」の形式を選択することができます。このような形式のものですね。

tiny12

箇条書きで何か表記したい時に使うものになっています。これもやり方は同様で、リストにしたい文字を選択状態にしたうえで、「リスト」ボタンをクリックしてください。

左が番号なしで、右が番号ありで、デザインは「▼」から選ぶことができます。

tiny13

項目別に改行もしてください。改行することで、1つの項目が形成されます。

tiny14

3-10.文字や画像を中央揃えにする

では、次に文字や画像を中央揃えにする方法を見ていきたいと思います。

これもやり方は同様で、中央に寄せたい画像か文字を選択状態にしたうえで、「中央揃え」ボタンをクリックしてください。

tiny15

これを右寄せにする場合は中央揃えのボタンの右を、左寄せにする場合は中央揃えのボタンの左をクリックしてください。

このように表示されれば、正しく中央寄せをすることができています。

tiny16

3-11.テーブルを挿入する

では、次にテーブルを挿入する方法を見ていきたいと思います。テーブルとは、このような図のことです。

tiny22

テーブルを挿入するには「テーブル」というボタンの「▲」をクリックして、作成したいテーブルの行と列をマウスのカーソルで選んで、挿入してみてください。

tiny22

そして、表示されたテーブルの各項目にテキストを入力すると、テーブルを表示することができます。

tiny24

3-12.横ラインを入れる

では、次に文章の間と間に横ラインを入れる方法を見ていきます。横ラインを挿入すれば、このように文章と文章の間にラインを入れることができます。

tiny17

まずは、文章と文章の間にラインを入れたい箇所に改行を入れて、そして、「横ライン」のボタンをクリックしてください。

tiny16

そうすると、このように横ラインを挿入できていると思います。

tiny18

3-13.「続きを読む」タグを挿入する

では、最後に「続きを読む」ボタンを挿入する方法を見ていきたいと思います。

これはテンプレートの形式にもよるんですが、「続きを読む」というボタンを挿入すると、このようにブログ記事の一覧ページで、表示されるテキストの説明文を調整することができます。

例えば、今回だったら「どうも!ブランドクリエイターの中江です…お話していきたいと思います。」という文章の後に「続きを読む」というボタンを挿入しています。

tiny19

やり方は簡単で、ブログ記事一覧で表示したい説明文の領域の後ろに改行を入れて、そこで「続きを読む」タグを挿入してください。

tiny21

そうすると、このように「MORE」と表記されていると思います。

tiny20

TinyMCE Advancedの使い方は以上です。

今回、紹介したボタンの使い方を一通り習得しておけば、WordPressの記事の編集には困らないので、ぜひ、使い方も合わせてマスターしてみてくださいね。

では、今回は以上になります!お疲れ様でした^^

数十時間の集客が学べる動画を無料プレゼント!

今まで僕が積み重ねてきたブランド構築とWeb集客のノウハウを数十時間収録した動画を無料でプレゼントしています。是非あなたのビジネスにお役立てください。

いつ削除するかわからないので、興味がある方は、今のうちにゲットしてくださいね


コミュニティ集客クラブの詳細を見る

hp-banner

SNSでもご購読できます

The following two tabs change content below.
中江 翔吾
名前:中江翔吾。職業:ブランドクリエイター(デザイナー&コンサルタント)一流のデザイナーからグラフィックデザインを学び、フリーランスのデザイナーとして活動を開始。その後、インターネットマーケティングの力を活用し、安定した集客の仕組みと、ブランドを構築。営業は全くせずに仕事の依頼が常に2~3ヶ月待ち。現在は「CREATE A BRAND」をコンセプトに、デザインとマーケティングの力を使って、個人・企業の規模を問わずに、ブランド構築のサポートを提供している。
By 中江 翔吾 WordPressプラグイン Share:

One thought on “TinyMCE Advancedの設定と使い方をマスターしよう

コメントを残す

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

プロフィール
wp-side-pf

中江 翔吾 / Shogo Nakae
グラフィックデザイナー / Webデザイナー / コンサルタント
1991年3月生まれ。大阪府出身。

はじめまして!ブランドクリエイターの中江翔吾と申します。

「CREATE A BRAND」をコンセプトに、ブランド構築や集客を起こしていくためのデザイン制作(Web、グラフィック)とコンサルティングを提供しています。

このブログでは、Webマーケティングのことを基軸に、ブランド論やマインドセット、雑多なビジネスコラムなんかを配信していきます。

僕に興味を持っていただけた方は、TwitterやFacebookページをぜひフォローしてくださいね。

>>詳しいプロフィールはこちら<<

Twitter でフォロー