• このエントリーをはてなブックマークに追加

TinyMCE Advancedの使い方|表テーブルの挿入や枠線、背景色の変更方法

どうも。葉です。

記事を書く際に、テキストのフォントサイズを変えたり、表を挿入することは、誰しもが当たり前に使う機能です。

無料ブログを使っている方なら、この程度の作業であれば簡単にできてしまうでしょう。

しかし、残念なことにWordPressでこれらの作業を行うには、HTMLの知識が必要になります。しかも、今からHTMLを学ぶには時間がかかり大変です。

そこで、この記事では、WordPressブログでもボタンをクリックするだけで簡単に、

  • テキストのフォントサイズを変更する
  • テキストの背景色を変更する
  • 表を挿入する
  • etc

などをできるようにするプラグイン「TinyMCE Advanced」の設定や使い方について解説していきます。

1.TinyMCE Advancedでできること

「TinyMCE Advanced」を導入することで、記事投稿画面のエディタに、任意の編集ボタンを追加することができます。

TinyMCE Advancedでできること1

追加できるボタンの例としては

  • テキストのフォントサイズを変更するボタン
  • テキストの背景色を変更するボタン
  • 簡単に表を挿入するボタン
  • 簡単に動画を挿入するボタン
  • etc

などがあります。下図に追加できるボタンの一覧になります。ぱっと見ただけでもたくさんの便利ボタンを追加できることがわかりますね。

TinyMCE Advancedでできること2

これらのボタンを記事作成画面のエディターに追加することで、記事作成の効率化をはかれます。

「TinyMCE Advanced」は、誰にでもおすすめできるプラグインです。特にHTMLの知識がない人にとっては、必須のプラグインになるので、このタイミングで導入しておきましょう。

2.TinyMCE Advancedのインストール

ここからは、プラグイン「TinyMCE Advanced」のインストール手順を解説していきます。

まず、WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

TinyMCE Advancedのインストール手順1

プラグインの検索窓に「TinyMCE Advanced」と入力します。するとWordPressが、「TinyMCE Advanced」を検索してくれます。

そこで、「TinyMCE Advanced」の「今すぐインストール」をクリックします。

TinyMCE Advancedのインストール手順2

「有効化」をクリックします。

TinyMCE Advancedのインストール手順3

プラグイン一覧で、「TinyMCE Advanced」の背景が青くなっていれば、有効化されています。

TinyMCE Advancedのインストール手順4

以上で、プラグイン「TinyMCE Advanced」のインストール・有効化は完了です。

3.TinyMCE Advancedの設定(ボタン追加)

次に、「TinyMCE Advanced」を使ってエディタに編集ボタンを追加していきます。

まず、WordPress管理画面の左メニューより「設定→TinyMCE Advanced」をクリックします。

TinyMCE Advancedの設定1

すると次の画面に移動するので、「エディターメニューを有効化する。」にチェックが入っていることを確認します。

3-1.編集ボタンを追加・削除

そして、ドラッグ&ドロップで編集ボタンを追加したり、削除したりします。

TinyMCE Advancedの設定2

下図の赤枠で囲ったボタンはWordPressで記事を書く際には、必須といっても良いボタンです。どのボタンを追加したらよいのかわからない人は、下図の赤枠で囲まれたボタンを追加してください。

TinyMCE Advancedの設定3

慣れてきたら、編集ボタンを独自にカスタマイズしていきましょう。

3-2.設定

少し下にスクロールすると設定という項目が出てきます。

ここでは、「リストスタイルオプション、代替リンクダイアログ、フォントサイズ」にチェックを入れましょう。

TinyMCE Advancedの設定4

それぞれについて解説します。

リストスタイルオプション

リストスタイルオプションにチェックを入れることで、リスト表示した際のデザインを複数のものから選択できます。

TinyMCE Advancedの設定5

参考までに、デザインを変更したリスト表示を見てみましょう。

番号なしリスト-通常
  • リスト1
  • リスト2
  • リスト3
番号なしリスト-白丸

  • リスト1
  • リスト2
  • リスト3
番号付きリスト

  1. リスト1
  2. リスト2
  3. リスト3
番号付きリスト-ラテン文字大文字

  1. リスト1
  2. リスト2
  3. リスト3

コンテキストメニュー

WordPressの記事編集部分で右クリックした時に表示されるメニューを変更します。

チェックなし

TinyMCE Advancedの設定6

チェックあり

TinyMCE Advancedの設定7

代替リンクダイアログ

代替リンクダイアログにチェックを入れることで、リンクに対して

  • タイトル
  • nofollowタグ
  • _blankタグ

を簡単に設定できます。

チェックなし

TinyMCE Advancedの設定8

チェックあり

TinyMCE Advancedの設定9

フォントサイズ

チェックを入れると、より多くのフォントサイズを選択できます。チェックありとチェックなしで指定できるフォントサイズを比較してみましょう。

チェックなし

8px 10px 12px 14px 18px 24px 36px

チェックあり

8px 10px 12px 14px 16px 20px 24px 28px 32px 36px 48px 60px

3-3.高度なオプション※興味がある人のみ

更に下にスクロールすると「高度なオプション」という項目が出てきます。

TinyMCE Advancedの設定10

ここでは、「段落タグの保持」について解説します。段落タグの保持にチェックを入れると<p>タグ(段落)や<br/>タグ(改行)が省略されずに表示されます。

下図を参考に、実際に表示にどのような違いがあるのかを比べてみてください。

段落タグの保持にチェックなし

TinyMCE Advancedの設定11

段落タグの保持にチェックあり

TinyMCE Advancedの設定12

設定が終わったら、「変更を保存」をクリックします。

TinyMCE Advancedの設定13

以上で、プラグイン「TinyMCE Advanced」の設定は完了です。

4.TinyMCE Advancedで表を挿入

「TinyMCE Advanced」で追加したボタンは、ほとんどのものが直感的に使用できます。ですが、表に関しては、解説しておいたほうが良い部分もあるのでここでお話させていただきます。

まず、WordPress管理画面の左メニューより「投稿→新規追加」をクリックします。

TinyMCE Advancedの使い方1

次に、エディタ内の「テーブルのアイコン」をクリックします。次に、「テーブルを挿入→テーブルの行数、列数を指定」し、クリックするします。

TinyMCE Advancedの使い方2

すると次のように表が挿入されます。

TinyMCE Advancedの使い方3

このままでは、1つ1つのセルが小さすぎるので、ドラッグ&ドロップで表を大きくします。

TinyMCE Advancedの使い方4

これで、表の挿入は、完了です。それぞれのセルに任意の言葉や数字を入力してください。

4-1.表全体のデザインを変更してみる

このままでも、問題はないのですが、少し表のデザインを変更してみましょう。

まずは、表の1行目すべてを選択します。その状態のまま「表のプロパティ」をクリックします。

TinyMCE Advancedの使い方5

すると、表のプロパティ画面に移動するのでそれぞれの項目について設定していきます。

表のプロパティ(一般)

TinyMCE Advancedの使い方6

各項目の機能については次の表にまとめました。

①幅 表全体の横幅
②高さ 表全体の高さ
③枠線 一番外側の枠線の太さ
④配置 表の位置:「左」「中央」「右」から選択
表のプロパティ(詳細)

TinyMCE Advancedの使い方7

各項目の機能については次の表にまとめました。

①枠線の色 表の一番外側の枠線の色を変更
②背景色 表全体の背景色を変更

上図のように、色を指定して「OK」をクリックします。

TinyMCE Advancedの使い方8

上図との設定で記事を公開すると、表は下図のデザインに変更されました。

TinyMCE Advancedの使い方9

4-2.特定のセルのデザインを変更してみる

次は、特定のセルのみのデザインを変更してみます。

まずは、デザインを変更したいセルを選択します。そして、エディタ内の「テーブルのアイコン」をクリック、「セル→セルのプロパティ」をクリックします。

TinyMCE Advancedの使い方10

すると、セルのプロパティ画面に移動するのでそれぞれの項目について設定していきます。

セルのプロパティ(一般)

TinyMCE Advancedの使い方11

各項目の機能について次の表にまとめました。

①幅 セルの横幅を指定します。
②高さ セルの高さを指定します。
③セルの種類

セルの種類を次の2つから選択します。

  • セル
  • ヘッダーセル

今回は、選択したセルが1行目なので、ヘッダーセルを選択しました。

セルのプロパティ(詳細)

TinyMCE Advancedの使い方12

各項目の機能については次の表にまとめました。

①枠線の色 選択したセルの枠線の色を変更
②背景色 選択したセルの背景色を変更

上図のように、色を指定して「OK」をクリックします。

TinyMCE Advancedの使い方13

すると次のように選択したセルのみのデザインが変更されています。

TinyMCE Advancedの使い方14

以上で、TinyMCE Advancedを使って表を挿入する方法の解説を終わります。

5.まとめ

この記事では、

  • TinyMCE Advancedでできること
  • TinyMCE Advancedのインストール
  • TinyMCE Advancedの設定
  • TinyMCE Advancedの使い方

について解説しました。

この記事では、「TinyMCE Advanced」の機能の中でも使い方が複雑な表についての解説をさせていただきました。しかし、「TinyMCE Advanced」には、

  • 文字の背景色を変更する
  • 文字に横棒を入れる
  • フォントサイズを変更する
  • etc

と数々の機能が備わっています。また、その殆どが、文字を選択した状態で、ボタンをクリックするだけで使用できます。「TinyMCE Advanced」は、WordPressブログを運営する上で必須と言っても良いプラグインです。是非、この場でインストールしておきましょう。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

WordPress プラグイン