TinyMCE Advanced のインストールと設定

WordPressでドキュメントを作成する場合WordPressのビジュアルエディタで作成した画面がそのままhttp表示になると便利です。

これを実現するプラグインが『TinyMCE Advanced』になります。

しかしこのプラグインをインストールするだけではダメで、httpの画面を制御する『style.css』とTinyMCE Advancedの画面を制御する『editor-style.css』の設定を合わせる必要があります。

またビジュアルエディタにテキストボックスや表も使える様にする事も重要です。

このドキュメントはTinyMCEのインストールから各CSSをどの様にカスタマイズしたらよいか？を解説しています。

説明は下記手順で解説していきます。

1. TinyMCE Advancedのインストールと設定
2. TinyMCEのスタイル機能の設定と注意点
3. TinyMCEの具体的な設定とテキストボックスの設定
4. TinyMCEの表機能を使える様に変更する。

１.TinyMCE Advancedのインストールと設定

WPのダッシュボードの『プラグイン　→　新規追加』の画面を開きます。
検索画面に『TinyMCE Advanced』を入力し、表示された下記画面から『いますぐインストール』を実行します。

インストール終了後、有効化ボタンを挿入します。

以上で、プラグインのインストールが終了しました。

1-1.TinyMCEの操作メニューの設定

ダッシュボードの『設定→TinyMCE Advanced』を選択します。

TinyMCE の設定画面が開きます。

①操作メニュの編集方法

・メニュエリアに、Unused Buttonsエリアから各種のボタンをドラック&ドロップで持ってくる。

・メニュエリアから要らないボタンを『Unused Buttonsエリア』に移動する。

上記操作で自分が使いやすいメニュを作成します。

②編集時の注意点

下図のツールバーの切り替えボタンは削除しない。

自分が設定したボタンが表示されない時、このボタンを挿入すると表示されます。

下記スタイルボタンは必ずを追加する。

これを使わないとTinyMCEを使う意味がありません。

以上で、自分が使うビジュアルエディタの画面ができ上がります。後はオプションの設定です。

1-2.設定項目の設定

次に上記で設定した各種ボタンに拡張機能があり、それを使うか否かの設定が下記のメニューです。

①リストスタイルオプション：リストの種類を増やすオプションです。

ここにチェックを入れると下記の機能が追加されます。

・ドットリスト場合:基本の黒丸に加えて（白丸、四角）が選択できるようになります。

・数字リスト場合:基本数字数字以外にローマ数字、ラテン数字等が選べます。

②Context Menu：このオプションは文中で右クリックすると、下記リストメニューが表示されます。

③Link(replaces the Insert/Edit Link dialog)：リンクのメニュを下記の何れか？を指定する。

OFFの時

歯車マークをクリックすると、下記メニュがでます。

ONの時

私は作成文書にリンクを貼るケースが多いのでOFFで利用しています。

④フォントサイズ

フォントサイズをメニュに表示した時に表示をpt表示かpx表示か?切り替えます。

私はONにしています。

1-3.高度なオプションの選択

①CSS クラスメニューの作成

このオプションは、TinyMCEの『スタイル』機能（editor-style.css）を使うという宣言です。
具体的な使い方は2項で説明します。
チェックにして下さい。

②段落タグの保持

このオプションはテキストエディタの＜p＞や＜br/＞のタグを削除する機能をOFFにするオプションです。
ONにしています。

③画像元の貼り付けを有効にする

このオプションはFirefoxとSafariグラウザーを使って画像編集する為のオプションですが、私はOnePress Image Elevatorプラグインで直接貼り付けているのでOFFにしています。

以上で、TinyMCEの設定は終了です。

変更後は必ず変更を保存ボタンで保存してください。

2.TinyMCEのスタイル設定に於ける注意点

TinyMCEプラグインをインストールして項番１の設定を行うとスタイル機能を利用する事ができるようになります。

しかし単純にインストールと設定だけではダメで、下記の設定を合わせて行う必要があります。

editor-style.css

TinyMCEのビジュアルエディタ表示に使われるCSSファイルです。

style.css

http表示に使われるCSSファイルです。上記の設定と合わせる必要があります。

2-1.editor-style.cssを子テーマフォルダにコピーする

style.cssはtwentytwelve_childフォルダにコピーしましたが、同様にtwentytwelveフォルダにあるeditor-style.cssもここにコピーしてください。

以降、下記のファイルを修正していきます。

2-2.editor-style.cssの修正確認には『スーパーリロード』を行う

このeditor-style.cssもCSSファイルですので、style.cssのカスタマイズの所でも解説したように、ブラウザはキャッシュ上のCSSファイル（過去の物）を見ます。

よって『editor-style.css』を修正した時は、必ず『スーバーリロード』を行ってください。

2-3.editor-style.cssとstyle.cssとの関係

style.cssは.entry-contentという名前の下にp（段落）やh2（見出し2）等のタグが定義されていました。

しかしeditor-style.cssはダイレクトにp（段落）やh2（見出し2）等のタグが定義されています。

対応関係は下記になります。

editor-style.cssで定義したスタイルはstyle.cssでは（ .entry-content　××）で受けると覚えてください。

３.TinyMCEの具体的な設定とテキストボックスの設定

3-1.TinyMCEの画面サイズの変更

TinyMCEのCSSの画面サイズは625pxとなっている為、これをもう少し広げます。

私のPCは解像度が1366×768なのでもう少し文字幅が広げられますので下記の設定にしました。

/*******************************************************************/
/* TinyMCEの幅を広げる設定 */
/*******************************************************************/
html .mceContentBody {max-width: 810px;}

上記をeditor-style.cssの一番最後の行に追加してください。

いづれにしてもドキュメントを見るデバイスの解像度により表示幅は変わるので、これはそんなに重要ではありません。

3-2.style.cssで定義した記事内要素の設定をeditor-style.cssに取り込む。

TinyMCEのeditor-style.cssで定義できるのはstyle.cssの中の記事エリア内要素のみです。

前テーマTwenty TwelveのCSSをカスタマイズするでは、記事エリア内要素を下記の様に定義しました。

/*******************************************************************/
/* 記事エリア要素のスタイル設定 */
/*******************************************************************/
/**** 見出し２ *****************************************/
.entry-content h2{margin-top:40px;padding:10px 0 10px 10px;font-size:20px;color:#400fff;font-weight:bold;border:1px solid #400fff;border-radius:3px;border-left: 7px solid #400fff;}
/**** 見出し３ *****************************************/
.entry-content h3{margin:40px 0 0 15px;padding:0 0 3px 10px;font-size: 18px;color:#b05927;font-weight:bold;border-bottom:1px solid #b05927;border-left: 7px solid #b05927;border-radius:3px;}
/**** 段落文字 *****************************************/
.entry-content p{font-size:14px;line-height: 24px;margin:5px 0 0 0;}
/**** LIST文字 *****************************************/
.entry-content li{font-size:14px;line-height: 28px;margin:0 0 0 25px;}
.entry-content Ul{margin:0 0 0 0;}/*Listの次の段落に余分なスペースを空けない設定*/

しかし注意点でも述べたように、editor-style.cssは上記の赤字の変数名が異なっています。

上記の変数名を変更した物が下記です。editor-style.cssの一番下にコピー＆ペーストで張り付けてください。

/*******************************************************************/
/* 記事エリア要素のスタイル設定 */
/*******************************************************************/
/**** 見出し２ *****************************************/
h2{margin-top:40px;padding:10px 0 10px 10px;font-size:20px;color:#400fff;font-weight:bold;border:1px solid #400fff;border-radius:3px;border-left: 7px solid #400fff;}
/**** 見出し３ *****************************************/
h3{margin:40px 0 0 15px;padding:0 0 3px 10px;font-size: 18px;color:#b05927;font-weight:bold;border-bottom:1px solid #b05927;border-left: 7px solid #b05927;border-radius:3px;}
/**** 段落文字 *****************************************/
p{font-family:'メイリオ';font-size:14px;line-height: 24px;margin:5px 0 0 0;}
/**** LIST文字 *****************************************/
li{font-size:14px;line-height: 28px;margin:0 0 0 25px;}
Ul{margin:0 0 0 0;}/*Listの次の段落に余分なスペースを空けない設定*/

『始めの投稿』を開いて、Google Chromeの場合は、Shift+F5  で更新してみてください。

どうですか？見出しの所が枠で囲まれた筈です。

これで、ビジュアルエディタとhttp表示は、かなり近い表示になったと思います。

3-3.TinyMCEに、テキストボックスを定義する

次にテキストボックスを作ってみたいと思います。これもスタイル機能の定義になります。

作るテキストボックスは下記の二つです。

①普通のテキストボックス

総ての行を表示するテキストボックです。

②スライドバー付テキストボックス

5行しか表示しないテキストボックです。
6行目以降はでスライドバーで操作します。

上記を定義するeditor-style.css用の定義は下記になります。editor-style.cssの最後に追加してください。

/*******************************************************************/
/* 記事エリア要素にテキストBOXを追加 */
/*******************************************************************/
/**** テキストボックス ***********************************/
p.my-box{border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin-left:30px;padding:10px;width:90%;}
/***** スクロールバー付テキストボックス ******************/
p.my-vbox{border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin-left:30px;padding:10px;width:90%;height:130px;overflow:scroll;}

一方、style.cssにもテキストボックスを定義しないとhttp表示で反映されません。
下記をstyle.cssの最後に追加してください。

/*******************************************************************/
/* 記事エリア要素にテキストBOXを追加 */
/*******************************************************************/
/**** テキストボックス ***********************************/
.entry-content p.my-box{border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin-left:30px;padding:10px;width:90%;}
/***** スクロールバー付テキストボックス ******************/
.entry-content p.my-vbox{border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin-left:30px;padding:10px;width:90%;height:130px;overflow:scroll;}

以上で以上でビジュアルエディタでテキストボックスを作り、http表示でもテキストボックスが表示されます。

【確認作業】

上記でeditor-style.cssに下記の変数名を定義しました。

①p.my-box
②p.my-vbox

変数名の頭に(小数点、ポイント)が付いていますが、ポイントが付いた変数名が、TynyMCEのスタイルに追加される仕様となっています。

よってスタイルを表示すると定義したスタイルが表示されます。

3.4.テキストボックスの使い方

①テキストボックスを入れたい所にカーソルを持っていき、『スタイル → p.my-box』を選択します。

  表示されたボックスに『abc』を入れてください。

box表示されました。

４.TinyMCEの表機能を使える様に変更する。

基本のTinyMCEの表機能は

①ビジュアルエディタの表は横線が実線で、最後の行の横線と総ての縦線が破線で表示される。

②しかしhttp表示では、総ての横線は実線だが縦線が表示されない。

③表自体が枠一杯の設定になっている為、セルのプロパティで幅を指定しても固定幅にならない。

④ビジュアルエディタの文字サイズが異常に小さいうえに、保存するとサイズが異なる

等々幾つかの問題があり、メニューには表機能があるがこのまままで使えないスペックになっています。

そこでeditor-style.cssとstyle.cssの設定を変更する事によりTinyMCEの表が使える様に変更します。

4-1.TinyMCEに表機能を定義する

①editor-style.cssに表設定機能を定義する。（最後の行に追加してください）

/*******************************************************************/
/* 表機能の定義の追加 */
/*******************************************************************/
table{margin:0 0 0 30px;width:auto}
td{font-family:"メイリオ";font-size:14px;line-height: 20px;color:#444;padding:5px 10px 5px 10px;border: solid 1px #c0c0c0 !important;}

②style.cssに、表設定機能を定義する。（最後の行に追加してください）

/*******************************************************************/
/* 表機能の定義の追加 */
/*******************************************************************/
.entry-content table{margin:0 0 0 30px;width:auto}
.entry-content td{font-family:"メイリオ";font-size:14px;line-height: 20px;color: #444;padding:5px 10px 5px 10px;border: solid 1px #c0c0c0 !important;}

以上でTinyMCEのビジュアルエディタで表機能が使えるようになります。

＜ドキュメントガイド＞

前のテーマ：Twenty TwelveのCSSをカスタマイズする

次のテーマ：TinyMCE Advancedにhtmlソースを出力するBOXを作成する。