WPプラグイン「TinyMCE Advanced」のカスタマイズ手順

TinyMCE AdvancedマニュアルTOP③

この記事をご覧の方はオリジナルのドメイン取得やサーバー契約してWordPressをインストールされた方がほとんどでしょう。

 

WordPressを使ってこれから収益化のために早速、記事作成に意気込んでいる方もいると思いますがWordPressは初期状態では無料ブログでは当たり前の「文字サイズ」「文字色」「動画貼り付け」などのボタン機能はありません。

 

そこで、誰でも簡単にインストール&使用できる「TinyMCE Advanced」というプラグインを用いれば機能を拡張して自分の必要なボタンをツールバーに表示させておくことが可能に。

 

今回は、初心者の方にも分かりやすいよう「TinyMCE Advanced」のインストール方法・使用手順・注意点などをご紹介させて頂きます。

 

初心者ではない方は必要な章だけ参照して頂ければと思います。


TinyMCE Advancedのメリット・デメリット

メリット

TinyMCE Advancedのメリット

TinyMCE Advancedは、WordPressに搭載されている機能を拡張するプラグインの1つで誰でも無料でインストール&使用することができる便利なツール。

 

初心者の方やHTMLの知識がない方にとって、WordPressのビジュアルエディタ機能は初期設定の状態だと文字サイズ変更・文字色変更・表の挿入・Youtube動画コード挿入など行えませんが、TinyMCE Advancedを使うと簡単にボタン追加して直感的にブログ作成できるようになります。

 

また、ツールバーにボタンを追加する編集設定もボタンの追加・削除をドラッグ&ドロップで簡易に行えるので短時間で記事作成するためのオリジナルな環境作りをすることが可能です。

TinyMCE Advancedのデメリット

反対にデメリットとして挙げられるのが、WordPressのバージョンによって互換性が保証されない点。

 

写真はTinyMCE Advancedの商品説明文ですが、

tiny説明文

プラグイン自体がこまめにアップデートされているので、WordPressをどんどん更新していく人じゃないと安心して使うことができないでしょう。

 

通常はプラグインとの互換性がなくなると、使用したボタンなどが思うように反映されなかったり、他のプラグイン同士で干渉してしまうと記事作成にも支障をきたしてしまう可能性があります。

 

TinyMCE Advancedのカスタマイズ手順

 

プラグインのインストール手順と使用方法をご紹介します。

 

インストール手順

① 「ダッシュボード」→「プラグイン/新規追加」からキーワード検索欄に「TinyMCE Advanced」と入力し、インストール。
TinyMCE Advancedインストール手順①

 

② 「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」からTinyMCE Advancedを有効化しましょう。
TinyMCE Advancedインストール手順②

 

ツールバー編集

 

① 「ダッシュボード」→「設定」をクリック。
TinyMCE Advancedインストール手順③

 

② インストールされたプラグインの中から「TinyMCE Advanced」をクリック。
TinyMCE Advancedインストール手順④

 

③ ページをスクロールすると以下のようなツールバー編集画面があります。
TinyMCE Advancedインストール手順⑤

 

④ 赤線のエリアがビジュアルエディターで実際に表示されるツールバーメニューで、下のピンク線のエリアがツールバーに挿入追加できる候補ボタンのエリア。
TinyMCE Advancedインストール手順⑥

 

⑤ ボタンをツールバーメニューに挿入する場合は、追加したいボタンを「ドラッグ&ドロップ」でツールバーに移動。
TinyMCE Advancedインストール手順⑦

 

⑥ ツールバーメニューに新たなボタンが追加され、代わりに候補ボタンのエリアからはドラッグしたボタンが消えて空白が1つできます。
TinyMCE Advancedインストール手順⑧

 

⑦ 反対にツールバーメニューからボタンを削除する場合は、候補ボタンのエリア内に削除したいボタンを「ドラッグ&ドロップ」します。
TinyMCE Advancedインストール手順⑨

 

⑧ ツールバーメニューから削除したボタンが消えて、候補ボタンのエリアに削除したいボタンが移行されました。
TinyMCE Advancedインストール手順⑩

 

⑨ ボタンを「ドラッグ&ドロップ」したら忘れずに最後に「変更を保存」を行いましょう。
TinyMCE Advancedインストール手順⑪

 

実際に使ってみよう!

 

それでは、実際に使用してみる前に各ボタンの機能をおさらいしておきます。

ボタン名 機能
段落 見出し<h1>や見出し<h2>などの段落を指定する
フォントサイズ 文字のフォントを変更する
太字 文字の太さを変更する
テキスト色 文字色を変更する
テキスト背景色 文字の背景色を変更する
イタリック 文字をイタリック体に変更する
下線 文字にアンダーラインを付ける
左寄せ 文字を左寄せに変更する
右寄せ 文字を右寄せに変更する
中央寄せ 文字を中央寄せに変更する
両端揃え 文字の横幅を統一する
「続きを読む」タグ挿入 モアタグを記事中に挿入して紹介する
番号なしリスト 番号の付いていないリストタグを挿入
番号付きリスト 番号の付いているリストタグを挿入
引用 文献は引用タグを挿入して記事内で紹介する
インデントを減らす 文章をアウトデントしたい時に使用
インデントを増やす 文章をインデントしたい時に使用
リンクの挿入/編集 文字にリンクを埋め込む時に使用
テーブル(表) 記事内に簡易なテーブルタグを挿入する
画像の挿入/編集 画像の挿入や編集を行い、画像に余白を入れたり画像ピクセル数を入力して調整する
動画を挿入/編集 動画の挿入や編集を行い、主にYouTube動画に限られる
ツールバー切替 ツールバー専用のボタンで、追加するボタン数の上限を増やす時に使用

 

各ボタンの機能を把握したら、以下のように実際にビジュアルエディター画面で使用してみましょう。

 

① 本文に対象となる文章を入力し、文章を指定してツールボタンを押します。(段落の場合)
実際に使用してみる①

 

② 段落ボタンを押すと以下のように見出し1~6まで候補が表示されます。
実際に使用してみる②

 

③ 見出し2を選択すると、本文中の「週に3日働いて独立!」が見出し2に設定されました。
実際に使用してみる③

 

④ 見出し1から見出し6までを全て使用してみました。段落ごとに文章の大きさが異なります。
実際に使用してみる④

 

⑤ 1つ目は複数のボタン併用で「太字 + フォントサイズ14pt + 文字色変更(青)」。このように状況に合わせて複数のボタンを併用するとより強調された文章になります。
実際に使用してみる⑤

 

⑥ 次は「番号付きリスト」「左寄せ」「中央寄せ」「右寄せ」。
実際に使用してみる⑥

 

⑦ リンク貼り付けする場合はリンクを埋め込みたい文章を指定して、リンクボタンをクリックすると下図のようにURL指定の入力画面が現れます。
実際に使用してみる⑦

 

⑧ リンクURLを貼りつけると下図のように下線が付き文字色が変更されます。
実際に使用してみる⑧

 

⑨ 動画を挿入する場合は、「動画の挿入/編集」ボタンをクリックするとURLソースを入力する欄とブラウザ上で表示させるサイズ入力のポップアップが出現します。ソースには貼りつけたいURLをそのまま貼りつけて、サイズはパソコン・スマートフォンで見る場合はサイズが異なるので読者が読みやすいよう適切なサイズに指定してあげましょう。
実際に使用してみる⑩

 

⑩ ソースとサイズを入力すると簡単にYouTubeのリンク埋め込みが完了しました。
実際に使用してみる⑨

 

以上のようにとても感覚的で簡単に使うことができることがお分かり頂けたと思います。

 

初めは簡単な文字色の変更や背景色の変更などを行い、慣れてきたら複数のボタンを組み合わせてより記事で重要な部分をより強調させることが出来るようになりますので、実際にビジュアルエディターで試しながらお気に入りのボタンを組み合わせてみたり使い方を習熟していきましょう!

注意事項

TinyMCE Advancedを使っていく上でいくつか気を付けるべきポイントがあります。

上手く使用できない場合は参考にしてみて下さい。

ボタン効果を重複してしまう

ビジュアルエディターで文字・リスト・画像編集を行っていると1度目に挿入したボタン効果じゃなく、他のボタン効果に切り替えたいと思う事がよくあります。

 

この時、テキストエディタの中では1度目のボタンのショートコードと重複して2度目のボタンのショートコードが上書きされてしまう可能性があり、ショートコードが重複すると本当に使用したいボタン効果が発揮されない場合があります。

 

また、次の段落にもボタン効果が反映されてしまうとレイアウトが崩れて修正がとても厄介になる事も。

 

そこで対策としてボタン効果を修正する場合は1度しっかりと対象の文章を削除してからもう1度文章を作成する、もしくは慣れてきたらテキストエディタでボタンとショートコードの関係をセットで把握しておいて確認しながら利用することで整理しながら記事作成する事が可能になります。

 

表が分割される

TinyMCE Advancedでは簡単に枠や仕切りの数を指定して表を挿入することができます。

 

しかし、実際に表を挿入して表内に文字を入力していると改行や削除した際に表のレイアウトが崩れて表が分割されたり思うように作成できない事があります。

 

これは、表を挿入した際はテキストエディタを参照して欲しいのですがショートコード内に以下のようなコードが反映されます。

 

※表(2 × 2)の場合
文章は必ずショートコード内の「50%;”></td>」の「>」と「<」の真ん中に入力する。
注意点(表の挿入)①

 

表が「2 × 2」なので入力する場所がそれぞれ4か所あるのでそれぞれに文章を入力すると、

注意点(表の挿入)②

このように正しく表示されます。

 

表を使う際はテキストエディタも確認しながら作成するとレイアウト崩れが起きにくく確実に作成することができます。

TinyMCE Advancedを使って快適なライティングを実感しよう!

快適

TinyMCE Advancedを使用するとビジュアルエディターで文字色を変更したり文字の背景色を変更したりYouTube動画を貼り付けるなど直感的に無料ブログのように手軽で手の込んだ記事を作成することができます。

 

WordPressを使用している方は無料でインストール&使用することができるのでこの便利なツールを活用しない手はありません。

 

まだTinyMCE Advancedを利用していない方はすぐにインストールしてお気に入りのパターンを作っておくことで記事の作成時間を大幅に圧縮し、質の高い記事作成に欠かせないツールとして有効活用することをお勧めします。

ABOUTこの記事をかいた人

ブログ・投資・ビジネスをメインテーマにした俳句ブログ『Office Exitの俳句』編集者。ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。趣味は俳句。特技は俳句。仕事も俳句。NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。