エディターの設定方法と使い方-TinyMCE Advanced-

エディターの設定方法

ここでは、エディターに追加機能を設定する方法について解説します。
サイトの管理画面から→【設定】→【TinyMCE Advanced】を選択してエディター設定画面で「Classic Editor(TinyMCE)」をクリックした後、下図のように、追加したい編集ボタンを選んで、上のツールバーにドラッグ&ドロップしよう。

使いたい機能を選んでドラッグ＆ドロップして自分だけのオリジナルエディターを作ることが出来ます。

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

これらを全て設定すると以下のようになります。

使用したいボタンが設定できたら、下にスクロールしてみてください。

チェックボックスの項目が多数あると思いますが、基本的にデフォルトのままで大丈夫です。
デフォルトの状態でも十分にTinyMCE Advancedエディタを使う際困ることは基本的には無いと思います。

最後に「変更を保存」を押せば完了です。

※「ツールバー切り替え」ボタンは、一段目の右端に置かなければうまく機能しないので注意。

エディタの使い方

当エディタはカスタマイズ性が高いことから直感的に使えるものが多いですが
よく使うと思われる作業内容について使い方を下記で解説致します。

• ビジュアルエディタとテキストエディタの切り替え方法
• 段落（見出し）やフォント・文字を変更する方法
• 文字揃えの変更方法
• モアタグの挿入方法
• リストタグの挿入方法
• 引用タグの挿入方法
• リンクの挿入方法
• YouTube動画の挿入方法
• 画像の回り余白を挿入する方法

１　ビジュアルエディタとテキストエディタの切り替え方法

WordPressの投稿や固定ページの新規追加画面で、下記の赤枠で囲ったタブをクリックすると、
ビジュアルエディタとテキストエディタを切り替えることができます。

テキストエディタで記事（コンテンツ）を作るにはHTMLの知識が必要となります。
そのため、一般の方はビジュアルエディタが使いやすいと思いますので記事を書かれる場合には
タブが「ビジュアル」になっているか確認するようにしてください。

注：TinyMCE Advancedで追加した編集ボタンが表示されない時
編集ボタンが一列だけしか表示されない場合は右端の「ツールバー切り替え」ボタンをクリックしてください。
すると、編集ボタンが表示されるようになります。

2 　段落（見出し）やフォント・文字を変更する方法

ここでは基本的に文章をドラッグして選択した後に、任意のボタンを選ぶことで変更することが出来ます。

まずは段落（見出し）の設定から

例えば「見出し２」を設定したら、 次のようにビジュアルエディタ上でも分かるように表示が変わります。

他にも
・文字のフォントサイズの変更
・太字文字
・イタリック体文字
・アンダーライン
・色付き文字
・背景色付き文字

の設定も同様に、ドラッグで選択し任意のボタンを押すことで可能です。
設定した箇所はビジュアルエディタ上で簡単に確認することができます。

あまり文字を装飾しすぎてしまうと、逆に読みにくいページになってしまうので、装飾は必要最小限にしてみましょう。

3　文字揃えの変更方法

次に文字揃えの変更方法を解説致します。
文字揃えとは、文字を左詰め（デフォルト）・真ん中寄せ・右詰め・両端詰めのどの形式で表示するかを選ぶものです。
設定方法は以下の通りです。

基本は、左詰め（デフォルト）しか使わないと思いますが、右詰めや両端詰めも時々使うことがあるかと思います。
例えば、右詰めは、以下のように引用した文章のソースを表示する時に便利です。

また、両端詰めは文中に英語を使う時に、見やすさを整える時に便利です。（下図参照）

4　モアタグの挿入方法

当投稿機能を使って記事を書くと、その記事が自動的にトップページにも表示されます。（※制作させて頂いたサイトによります）
例えば、制作したサイトによって変わってきますがトップページに１０個の記事の全文が表示される場合もあります。
そのままではトップページの縦サイズが異様に長くなってしまい、訪問してくれたユーザーに対する利便性を大きく損なってしまことになります。

そこで使うのがモアタグです。
モアタグを使うと、挿入した箇所に自動的に「続きを読む」というボタンが追加され、トップページに表示される記事の分量を縮小することができます。

設定方法はは記事を書く際に任意の場所に一段分のスペースを空けて、そこにカーソルを合わせた状態でモアタグのアイコンを押してみてください。

すると、挿入した場所に下図のように「– – – – – MORE – – – – – 」と表示されます。

5　リストタグの挿入方法

リストタグとは、テキストを箇条書きで表示したい時に使うタグで、使用すると下図のように表示されます。

リストタグの利便性は非常に高く、AorakiStudioでも記事中で頻繁に使っています。

なぜなら、リストタグを使うことによって重要なポイントを簡潔にユーザーに伝えることができるからです。
この記事の中でも、リストタグを使っている箇所があります。

では、リストタグの設定方法を見ていきましょう。
箇条書きで表示したい箇所を、ドラッグで選択しメニューからリストタグアイコンを選択してみてください。

選択すると、下図のようにビジュアルエディタ上でも箇条書きで表示されます。

6　引用タグの挿入方法

引用タグは、他のサイトや書籍などから引用してきたテキストに対して使うタグです。

引用文を使う場合は、この引用タグとともに引用元へリンクをつけることでGoogleも、その意図を理解してくれるようになるります。
また、引用タグを使用することでユーザーに対してもどの範囲が引用されているかがわかるので親切な印象を与えやすいです。

設定方法は引用文を選択し、引用タグボタンを押してみてください。

設定した箇所は以下のように、インデント（文章の先頭に空白を入れる事）されたような形で表示されます。　

7　リンクの挿入方法

リンクの挿入は最も頻繁に使う機能の一つです。
リンクを挿入したい文章をドラッグで選択して、リンク挿入ボタンを押してください。

すると、下記のようにリンクの編集メニューが表示されます。下図の通り、リンクしたいページのURLを入力しましょう。
また、リンク先のページを別ウインドウで開きたい場合は、下のチェックボックスにチェックを入れましょう。

リンクを挿入すると、挿入したテキストは下図のように青文字で表示されます。

リンクはSEO内部対策や、googleの自動ロボットであるクローラーの巡回を促すためにも重要なものなので、使えるようにしておくと便利です。

8　YouTube動画の挿入方法

動画の挿入/編集する機能もあります。
ただし、現実的に動画ファイルを記事上に掲載することは、レンタルサーバーのデータ転送量の制限をすぐに超えたり、複数の動画を掲載していくとすぐにファイルサイズ容量の上限に達してしまうためオススメできません。

そこでおススメなのが TinyMCE Advanced の動画の挿入/編集機能を利用して YouTube の動画コードを埋め込む方法です。
こちらを使用すればサイト自体の表示速度が遅くなることを極限までセーブした上で動画を使用できるため便利です。

9　画像の回りに余白を挿入する方法

画像を左寄せ、または右寄せに挿入した時、余白があるだけで記事が読みやすくなります。
まず、記事中の右寄せにした画像を選択して、画像の挿入/編集のアイコンを押してみましょう。

すると下図の画面がポップアップされるので上部にある「高度な設定」タブをクリックします。
すると「上下余白」、「左右余白」と入力欄があるのでピクセル数を入力します。

入力が完了したら「OK」を押してください。

あまり余白があり過ぎるとおかしくなるのでプレビューで確認しながら調整して使ってみましょう。

まとめ

このように投稿画面のエディターを編集することで、普段の新着情報やお知らせを書きやすくなり制作したホームページをより有効的に活用することが出来ます。
SEOを意識した新着情報やお知らせを書くことでご自身で行っている事業の集客のための入り口をたくさん増やしていきましょう。
お困りのことがある場合にはAorakiStudioまでお問い合わせください。