TinyMCE Advanced:設定方法と使い方

TinyMCE Advancedの設定方法と使い方01
Pocket

WordPressの投稿機能には、「ビジュアルエディタ」という機能があります。この機能を使えば、HTMLが分からなくても文章を書いたり文字を装飾することができます。ただし、デフォルトのビジュアルエディタでは、機能的に不十分な面もあります。

 

例えば、

  • フォントサイズの変更
  • 表の挿入、編集
  • 動画のコードの挿入

等の機能がありません。

 

そこで、おすすめしたいプラグインがTinyMCE Advancedです。このプラグインは、デフォルトでは機能不十分なビジュアルエディタを自分好みにカスタムできるプラグインです。簡単に言うと、必要な機能を追加し、不要な機能は削除することができます。具体例を挙げると、下図のようにカスタマイズできるわけです。

TinyMCE Advancedの設定方法と使い方02

 

 

TinyMCE Advancedのインストールについては、「WordPressプライグインの基本操作:インストール、停止、削除、更新の方法」を参考にしてください。

 

1.TinyMCE Advancedの設定方法

TinyMCE Advancdをインストールすると、左サイドメニューの「設定」にTinyMCE Advancdの項目が追加されるのでクリックしてください。

TinyMCE Advancedの設定方法と使い方03

 

すると、次のような設定画面が表示されます。

TinyMCE Advancedの設定方法と使い方04

 

1-1.機能の追加と削除

まずは、「エディターメニューを有効化する。」にチェックを入れてください。エディターメニューを有効することで、下図のメニューバー(メニュー  ~  テーブル)が表示されます。頻繁に使う機能ではありませんが、一応有効化して表示させておきましょう。

 

05

次に、新しい機能の追加です。新しい機能をビジュアルエディタに追加する場合は、下図のように「使用しないボタン」から機能を選びドラッグ&ドロップで追加します。機能を削除する場合は、逆の作業を行えば削除できます。

TinyMCE Advancedの設定方法と使い方06

 

1-2「設定」の設定

「設定」では、「リストスタイルオプション」と「フォントサイズ」にチェックを入れます。

TinyMCE Advancedの設定方法と使い方07

 

「リストスタイルオプション」にチェックを入れることで、リスト表示する際の先頭の記号を「●(黒丸)」以外に、「◯(白丸)」「■(四角)」も選択できるようになります。

 

「フォントサイズ」にチェックを入れると、フォントサイズが「pt(ポイント)」から「px(ピクセル)」で表示されるようになります。ホームページを作る際は、「pt」ではなく、「px」を使うようにしましょう。「pt」とは、70pt=1インチ=2.54cmと定義された物理的な数値です。そのため、1ptが何pxになるかは、モニタやOSの環境によって変化します。

 

少し難しい話なので、完璧に理解する必要はありませんが、「px は環境の変化に影響を受けないので、px を使う』と覚えておけば大丈夫です。

 

1-3.「高度なオプション」の設定

「高度なオプション」では、「段落タグの保持」にチェックを入れてください。

TinyMCE Advancedの設定方法と使い方08

 

「段落タグの保持」は、記事編集時の不具合を防ぐ機能です。ビジュアルエディタで書いたのコンテンツを、HTMLモードで修正し、再度ビジュアルエディタに戻ると不要なタグが挿入され、コンテンツのレイアウトが崩れることがあります。「段落タグの保持」にチェックを入れることで、この不具合を防ぐことができます。

 

1-4.「管理」の設定

「管理」はデフォルトのでチェックが入ってるとと思うので、そのままでかまいません。ここまで設定が完了したら「変更を保存」をクリックして完了です。

TinyMCE Advancedの設定方法と使い方09

 

1-4-1.設定のエクスポートと設定のインポート

「設定のエクスポート」と「設定のインポート」は、他のWordPressのサイトでも同じビジュアルエディタの設定を簡単に使えるようにする機能です。分かりやすく言うと、同じ設定を他のWordPressでも使えるようにする機能ということです。まずは、現在の設定を読み込むために、「設定のエクスポート」をクリックします。

TinyMCE Advancedの設定方法と使い方10

 

エンコードが表示されるので「すべて選択」をクリックし、文字列をアクティブにしてコピーします。

TinyMCE Advancedの設定方法と使い方11

 

コピーした内容が消えないように、「メモ帳」等にペーストして貼り付けておきましょう。

TinyMCE Advancedの設定方法と使い方12

 

同じビジュアルエディタの設定を使いたいWordPressにアクセスし、「設定 → TinyMCE Advanced」から「管理 → 設定のインポート」と進みます。

TinyMCE Advancedの設定方法と使い方13

 

先ほど、メモ帳に張り付けた内容をコピーし、下図のようにインポート画面に張り付け「インポート」をクリックしてください。

TinyMCE Advancedの設定方法と使い方14

 

最後に、「変更を保存」をクリックすれば完了です。

 

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

ビジュアルエディタの詳しい使い方については、「WordPress投稿機能:ビジュアルエディタの使い方」で詳しく説明します。

 

ここでは、簡単に二つの使いについて設定します。

  • ビジュアルエディタとHTMLの切り替え方法
  • 設定したエディタのアイコンをすべて表示する方法

 

2-1.ビジュアルエディタとHTMLの切り替え方法

WordPressの投稿機能には、ビジュアルエディタとHTMLエディタの2つの機能があります。切り替えるには、右上のタブで行います。ビジュアルエディタで投稿する場合は、「ビジュアル」のタブをクリックしてください。

TinyMCE Advancedの設定方法と使い方15

 

2-2.設定したエディタのアイコンをすべて表示する方法

始めは、一列目までしか表示されていません。下図の赤枠で囲った「ツールバー切り替え」ボタンをクリックすると二列目も表示されるようになります。

TinyMCE Advancedの設定方法と使い方16

 

まとめ

TinyMCE Advancedは、設定に難しいところも無く、エディタ自体も直感的で簡単に使えると思います。使っているうちに色々な機能が分かってくるとは思いますが、一応、エディタの基本的な使い方を「WordPress投稿機能:ビジュアルエディタの使い方」で詳しく説明しています。参考のために、一度は読んでみてください。

Pocket

 COMMENT

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

関連記事

SEOに強いタイトルタグの書き方のイメージ画像01

集客を3倍に増やす!SEOに強いタイトルタグの書き方

Head Cleanerの最適な設定方法と使い方01

Head Cleaner:設定方法と使い方

お金のイメージ画像

アフィリエイトで稼ぐ人の5つの特徴

リンクタグの正しい使い方のイメージ画像

リンクタグの正しい使い方とSEO効果を高める方法

EWWW Image Optimizerの設定方法と使い方01

EWWW Image Optimizer:設定方法と使い方

画像設定のイメージ画像

SEO対策に有効な画像設定7つのポイント