バズ部

  • icon株式会社ルーシー
  • 東京都港区新橋5-10-5 PMO新橋II 8階
  • 記事を探す
    • まず見て頂きたいページ
      • バズ部式マーケティングの進め方
      • コンテンツマーケティング101
      • SEO初心者向けマニュアル
      • バズ部メンバーの知見集
      • WordPress初心者向けガイド
    • 記事
      • 全ての記事を見る
      • SEO
        • SEOの基礎
        • SEO内部対策
        • コンテンツSEO
        • サーチコンソール
        • 高度なSEO
      • コンテンツマーケティング
        • 1.コンテンツマーケティングとは?
        • 2.コンテンツマーケティングをやるべきなのか
        • 3.あなたのブランドストーリーは何か?
        • 4.コンテンツマーケティング設計が全てだ
        • 5.必ず必要な社内体制と体制づくり
        • 6.まずは、小さな一歩を大切にしよう
        • 7.コンテンツ制作のコツを知ろう
        • 8.多くの人が陥る失敗を知っておこう
        • 9.顧客が「まだ気づいていないこと」に気づけるか
        • 10.素早く着実にコンバージョンにつなげよう
        • 11.正しく効果測定して成果を引き上げよう
        • 12.精度を上げてもっともっと成果を飛躍させよう
      • オウンドメディア
      • WordPress
        • wordpressウィジェット
        • wordpressテーマ
        • wordpressプラグイン
        • wordpressの基本操作
        • wordpressの導入と準備
        • wordpressの設定方法
        • ブログマーケティング
      • ソーシャルメディア
        • Facebook
      • ランディングページ
        • キャッチコピー
        • コピーライティング
      • メルマガ
      • EC
      • インタビュー
      • アーカイブ
    • 監修者/ライター一覧
      • 松澤 大輔
      • 木村 竜児
      • 野口 陽司
  • サービス一覧
    • サービスページ
      • コンテンツマーケティング立ち上げ&運用支援
      • SEO記事制作代行
      • キーワード設計代行
      • WEBサイト制作
      • 研修サービス
      • bazubu-shiki
      • ライティングツール「Pencii」
    • 資料請求
      • コンテンツマーケティング立ち上げ&運用支援サービス資料
      • SEO記事制作代行サービス資料
      • キーワード設計代行サービス資料
      • バズ部紹介資料
  • 支援実績
  • お役立ち資料
    • お役立ち資料一覧
      • 広告費を1/10にして売上を倍増させる全手法
      • バズ部が運営する月間20万PV超サイト11の生データ集
      • 良質なコンテンツを作成するための20のコツ
      • 最高のオウンドメディア支援会社を選ぶために行うべき7つの質問
      • バズ部紹介資料
      • バズ部公式メールマガジン
  • セミナー
  • 運営者情報

ご相談・お問い合わせ

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

icon icon

icon
  • icon
  • icon
  • icon

05/22木8:00〜9:00

【5/22開催】バズ部の記事制作代行 商品説明会

  • オンライン
    1. バズ部 /
    2. WordPress /
    3. wordpress プラグイン /
    4. TinyMCE Advanced の設定方法と使い方
  • 最終更新日 2019.05.08

TinyMCE Advanced の設定方法と使い方

WordPressの投稿機能(ビジュアルエディタ)は、デフォルトの状態では次の操作ができない。

  • 表の挿入、または編集
  • YouTube 動画コードの挿入
  • 画像の回りに余白を挿入

など、コンテンツの読みやすさを高めるための操作ができないと、HTMLでタグを直打ちしなければならなくなる。これでは、せっかくコンテンツマーケティングを始めたばかりの初心者には大変である。

そこで、今回ご紹介するのが「 TinyMCE Advanced 」というプラグインだ。
それでは早速、TinyMCE Advanced の設定方法と使い方をご紹介していこう。

注:プラグインを初めてインストールする場合
インストール方法は、『WordPressプラグインのインストールと停止・削除・更新の方法』を参考にしよう

また、私たちバズ部は12年で400社以上のメディア支援を行い、

  • 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
  • 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい
⇒25サイトの成功事例インタビューはこちら

ebook
ebook

目次

  • 1. TinyMCE Advancedとは
  • 2. TinyMCE Advancedの設定画面へのアクセス方法
  • 3. TinyMCE Advanced の設定方法
  • 4. TinyMCE Advanced エディタの使い方
    • 4-1. ビジュアルエディタとテキストエディタの切り替え方法
    • 4-2. 段落(見出し)やフォント・文字を変更する方法
    • 4-3. 文字揃えの変更方法
    • 4-4. モアタグの挿入方法
    • 4-5. リストタグの挿入方法
    • 4-6. 引用タグの挿入方法
    • 4-7. リンクの挿入方法
    • 4-8. 表(テーブル)の挿入方法
    • 4-9. YouTube動画の挿入方法
    • 4-10. 画像の回りに余白を挿入する方法
  • まとめ

1. TinyMCE Advancedとは

TinyMCE Advancedとは、WordPressのビジュアルエディタの機能を拡張することができるプラグインのことだ。

下図のように記事投稿の際に投稿画面の編集ボタンの種類を増すことができる。HTMLやタグの知識がない方でも、無料ブログと同じ感覚で記事を設定できるようになる。

TinyMCE Advanced

成功したオウンドメディアの要因を学ぶ

  • Article Image 1Article Image 1

    累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

    1

  • Article Image 2Article Image 2

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    2

  • Article Image 3Article Image 3

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    3


2. TinyMCE Advancedの設定画面へのアクセス方法

インストールすると、管理画面左の「設定」のメニューの中に、” TinyMCE Advanced ” という項目が追加されるのでクリックしよう。

管理画面

すると、下図のように設定画面にアクセスすることができる。

エディター設定

英語の表記も多いがこのページで解説している通りに設定して頂ければ問題ないので安心して欲しい。


3. TinyMCE Advanced の設定方法

ここでは、TinyMCE Advancedを使ってビジュアルエディタでの編集ボタンの追加方法を見ていく。

エディター設定画面で「Classic Editor(TinyMCE)」をクリックした後、下図のように、追加したい編集ボタンを選んで、上のツールバーにドラッグ&ドロップしよう。

エディター設定

バズ部や弊社クライアント様のサイトでは以下のボタンを使用している。あなたも、これらのボタンを追加しておけば問題ないだろう。

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

 

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

設定画面

使用したいボタンが設定できたら、下にスクロールしよう。

チェックボックスの項目があるが基本的にデフォルトのままで大丈夫だ。
なぜなら、デフォルトの状態でも十分にTinyMCE Advancedエディタを使うことができるからだ。

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

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


4. TinyMCE Advanced エディタの使い方

TinyMCE Advanced のエディタは使い勝手が良いので、直感的に使えるものだが、念のため以下の使い方を説明しておく。

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

これらの操作は比較的よく使うものであり、これらだけ抑えておけば十分だ。それでは早速説明しよう。

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

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

WordPress

当然、テキストエディタでコンテンツを作るにはHTMLの知識が必要だが、ビジュアルエディタを使えば、初心者の方でも問題なくコンテンツを作ることができるのでビジュアルエディタを使おう。

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

ツールバー切り替え

4-2. 段落(見出し)やフォント・文字を変更する方法

ここでは基本的に文章をドラッグして選択した後に、任意のボタンを選べば良い。

まずは段落(見出し)の設定から見ていこう。

WordPress 管理画面

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

WordPress 管理画面

WEBライティングにおいても、見出しタグの設定は非常に重要なので覚えておこう。
他にも
文字のフォントサイズの変更
太字文字
イタリック体文字
アンダーライン
色付き文字
背景色付き文字

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

WordPress 管理画面

あまり文字を装飾しすぎてしまうと、逆に読みにくいページになってしまうので、装飾は必要最小限にしよう。参考までに、バズ部では見出しタグ以外の文字装飾はほとんど使っていない。

4-3. 文字揃えの変更方法

次に文字揃えの変更方法をご紹介する。文字揃えとは、文字を左詰め(デフォルト)・真ん中寄せ・右詰め・両端詰めのどの形式で表示するかを選ぶものだ。設定方法は以下の通りだ。

WordPress 管理画面

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

例

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

例

4-4. モアタグの挿入方法

WordPressの投稿機能を使って記事を書くと、その記事が自動的にトップページにも表示される。例えば、WordPressのテーマによって違ってくるがトップページに10個の記事の全文が表示される場合もある。

そのままではトップページの縦サイズが異様に長くなってしまい、訪問者に対する利便性を大きく損なってしまう。

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

モアタグ

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

WordPress 管理画面

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

完成画面

4-5. リストタグの挿入方法

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

リストタグ

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

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

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

リストタグ

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

WordPress 管理画面

4-6. 引用タグの挿入方法

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

例

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

設定方法は引用文を選択し、引用タグボタンを押そう。

引用タグ

設定した箇所は以下のように、インデントされたような形で表示される。 

WordPress 管理画面

4-7. リンクの挿入方法

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

リンク

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

リンク

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

WordPress 管理画面

リンクはSEO内部対策や、クローラーの巡回を促すためにも重要なものなので、しっかりと勉強しておこう。

余裕があれば、『被リンクの構築法と注意点』も読んでおいて欲しい。

4-8. 表(テーブル)の挿入方法

TinyMCE Advanced を使って表(テーブル)を作成することができる。基本的な使い方について、詳しくは『WordPress の投稿に表を挿入する方法』を参考にして欲しい。

ただし、おまけの機能みたいなもので、簡単な表を作る分には便利だが、表のデザインなどにこだわりたい場合は、どうしてもHTMLとCSSの知識が必要となる。ここでは初心者の方でもHTMLの知識なしに出来る方法を解説しているため、HTMLやCSSの詳細については割愛する。

4-9. YouTube動画の挿入方法

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

そこでおススメなのが TinyMCE Advanced の動画の挿入/編集機能を利用して YouTube の動画コードを埋め込む方法だ。

詳しくは『初心者でも簡単!WordPressに動画をアップロードする方法』を参考に設定してみよう。

4-10. 画像の回りに余白を挿入する方法

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

WordPress 管理画面

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

画像の編集

入力が完了したら「OK」を押そう。

WordPress 管理画面

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


まとめ

TinyMCE Advancedの設定方法から使い方まで紹介してきた。
もう一度振り返ってみよう。
TinyMCE Advancedの設定方法
TinyMCE Advancedの使い方

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

使っていけば徐々に慣れてくると思う。記事作成を進めている時に、何か詰まったことがあったらこのページをもう一度読んで確認しよう。

カテゴリー wordpress プラグイン

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

未読

参考にしていただきたい事例

liskulのtopページ

リスティング広告

1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

  • SOLDOUT
  • ソウルドアウト株式会社様

学校 コンテンツマーケティング

学校・教育

1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

  • 神田外語学院
  • 神田外語学院 様
アバター
  • 著者 : バズ部編集部

ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

  • 会社概要
  • 採用情報
  • セミナー
  • サービス紹介
  • 記事一覧

icon

株式会社ルーシー東京都港区新橋5-10-5 PMO新橋II 8階

ABOUT US

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • 紹介メディア

© Copyright 2025 バズ部. All rights reserved.