QLOOKアクセス解析
Home » WordPress, WordPress プラグイン

「TinyMCE Advanced」をカスタマイズする

2011年4月30日 57,982 views 36 Comments

ビジュアルエディタを高度にカスタマイズすることができる「TinyMCE Advanced」ですが、ボタンが多すぎてどれをどのように配置すればいいかわからない!、最適な設定方法を教えて!、そう思っている方も多いと思います。今回、「TinyMCE Advanced」の日本語化をはじめ、それぞれのタグの詳細、おすすめカスタマイズ法をまとめました。保存版です。

 

 

関連記事 : ビジュアルエディタを高度にカスタマイズする、プラグイン「TinyMCE Advanced」

 

 

◆「TinyMCE Advanced」の日本語化方法

このプラグインには日本語化対応パッチが出ているので、まずパッチをあてていきます。TinyMCE Advanced 日本語版配布 >> Lovelog+* のサイトから最新版のパッチをダウンロードします。

wp-content/plugins/tinymce-advanced/ の直下に、先ほどダウンロードしたzipファイルに含まれる tinymce-advanced-ja.mo ファイルを入れます。

ダッシュボードの「プラグイン」>「プラグイン」をクリック。「TinyMCE Advanced」の「編集」をクリックすると、プラグイン編集画面が表示されます。

右カラムから「tinymce-advanced/tinymce-advanced.php」をクリックし、

wordpress_tinymceadvanced03_3

$domain_name  = 'tinymce-advanced';

$locale_name  = get_locale();

$mofile_name  = dirname(__FILE__);

$mofile_name .= "/$domain_name-$locale_name.mo";

load_textdomain("tadv", $mofile_name);

以上のように、2行目以降に入力します。以上で日本語化の設定は完了です。最後に「ファイルの更新」ボタンをクリックするのを忘れないように。

変更前 → wordpress_tinymceadvanced03_4

変更後 ↓

wordpress_tinymceadvanced03_5

日本語化されました。これでぐっと設定しやすくなるはずです。続けて「TinyMCE Advanced」を設定していきましょう。

 

 

◆「TinyMCE Advanced」のカスタマイズ詳細

「設定」>「TinyMCE Advanced」をクリック。

wordpress_tinymceadvanced03_5

TinyMCEのボタン配置画面が表示されました。この全四列のタグ列に、エディタでの編集作業がしやすいようにタグを配置していきます。

一列目のタグ。ドラッグ&ドロップで自由に配置可能です。

wordpress_tinymceadvanced04_0

wordpress_tinymceadvanced04_1文字を太字にする

 

wordpress_tinymceadvanced04_2文字を斜体にする

 

wordpress_tinymceadvanced04_3文字に打ち消し線を引く

 

wordpress_tinymceadvanced04_4文字に下線を引く

 

wordpress_tinymceadvanced04_5番号なしリストをつける

 

wordpress_tinymceadvanced04_6番号付きリストをつける

 

wordpress_tinymceadvanced04_7インデントを解除する

 

wordpress_tinymceadvanced04_8インデントをつける

 

wordpress_tinymceadvanced04_9文字を左揃えにする

 

wordpress_tinymceadvanced04_10文字を中央揃えにする

 

wordpress_tinymceadvanced04_11文字を右揃えにする

 

wordpress_tinymceadvanced04_12リンクを貼りつける(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced04_13リンクを切る

 

wordpress_tinymceadvanced04_14画像を貼りつける(別ウィンドウが立ち上がります。画像はこの機能ではアップロードできません。あらかじめ画像URLを知っている時に使います)

 

wordpress_tinymceadvanced04_15CSS編集をする(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced04_16moreタグを挿入する(more以降は個別ページで全表示されます)

 

wordpress_tinymceadvanced04_17ページ切り替えを挿入する

 

wordpress_tinymceadvanced04_18スペルチェックをする

 

wordpress_tinymceadvanced04_19検索する / 検索して置換を行う

 

wordpress_tinymceadvanced04_20フルスクリーン表示にする

 

wordpress_tinymceadvanced04_21アドバンスドツールバー(2行目以下のボタン列)を表示する

 

二列目のタグ。ドラッグ&ドロップで自由に配置可能です。

wordpress_tinymceadvanced05_0

wordpress_tinymceadvanced05_1文字のフォントサイズを指定する

 

wordpress_tinymceadvanced05_2文字に段落タグを指定する

 

wordpress_tinymceadvanced05_3テキストとして貼りつけする(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_4Wordから貼りつけする(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_5フォーマットを解除する

 

wordpress_tinymceadvanced05_6特殊文字を出力する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_7印刷する

 

wordpress_tinymceadvanced05_8文字色を指定する

 

wordpress_tinymceadvanced05_9背景色を指定する

 

wordpress_tinymceadvanced05_10表情アイコンを出力する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_11上付き文字にする

 

wordpress_tinymceadvanced05_12下付き文字にする

 

wordpress_tinymceadvanced05_13埋め込みメディアを挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_14取り消しする

 

wordpress_tinymceadvanced05_15やり直しする

 

wordpress_tinymceadvanced05_16属性の挿入 / 削除をする(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced05_17TinyMCEのヘルプを開く(別ウィンドウが立ち上がります)

 

拡張タグです。ドラッグ&ドロップで自由に配置可能です。

wordpress_tinymceadvanced06_0

wordpress_tinymceadvanced06_1引用タグをつける

 

wordpress_tinymceadvanced06_2文字を均等割り付けにする

 

wordpress_tinymceadvanced06_3切り取りする

 

wordpress_tinymceadvanced06_4コピーする

 

wordpress_tinymceadvanced06_5貼りつけする

 

wordpress_tinymceadvanced06_6検索する / 検索して置換を行う

 

wordpress_tinymceadvanced06_7文字のフォントを指定する

 

wordpress_tinymceadvanced06_8文字のスタイルを指定する

 

wordpress_tinymceadvanced06_9コードを整形する

 

wordpress_tinymceadvanced06_10テーブルを挿入する(別ウィンドウが立ち上がります)(行のプロパティ、セルのプロパティ、行を上に挿入する、行を下に挿入する、行を削除する、列を左に挿入する、列を右に挿入する、列を削除する、セルの結合を解除する、セルを結合をする)

 

wordpress_tinymceadvanced06_11引用エレメントを挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_12エレメントを挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_13エレメントを削除する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_14略語エレメントを挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_15頭字語エレメントを挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_16新規レイヤーの挿入(前面へ移動、背面へ移動、絶対位置指定の切り替え)

 

wordpress_tinymceadvanced06_17水平線を挿入する(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_18HTMLエディタを開く(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_19制御文字の表示をする

 

wordpress_tinymceadvanced06_20改行なしスペースを挿入する

 

wordpress_tinymceadvanced06_21ガイドラインと非表示項目の切り替えをする

 

wordpress_tinymceadvanced06_22日付を挿入する

 

wordpress_tinymceadvanced06_23時刻を挿入する

 

wordpress_tinymceadvanced06_24アンカータグをつける(別ウィンドウが立ち上がります)

 

wordpress_tinymceadvanced06_25スペルチェックをする

 

その他設定項目です。

wordpress_tinymceadvanced07_1

Also enable :

「高度なイメージ」 : wordpress_tinymceadvanced04_14画像を貼りつけるときの設定項目が高度になります。

「高度なリストオプション」 : wordpress_tinymceadvanced04_5番号なしリスト wordpress_tinymceadvanced04_6番号付きリストの設定項目が高度になります。

「コンテキストメニュー」 : エディタ内での右クリックが「TinyMCE Advanced」仕様のものになります。

Advanced Options

「高度なリンク」 : wordpress_tinymceadvanced04_12リンクを貼りつけるときの設定項目が高度になります。

「Do not remove IFRAME tags.」 : iframeタグを削除しないようにする。

「Do not remove HTML 5.0 tags.」 : HTML 5.0 要素を排除しないようにする。

「Hide all CSS classes in the editor menus.」 : wordpress_tinymceadvanced06_8文字のスタイルを指定する項目のプルダウンを働かなくする。

「HTMLエディター内で表示または保存する時に、<p>や<br />タグを削除することをやめてください。」 : 複数回改行を認識してくれるようになります。

 

 

◆「TinyMCE Advanced」のおすすめカスタマイズ

個人的にはこのように設定しました。

使用したのは全三列。列の左手側に文字のサイズや色などのよく使いそうなタグを集め、右手側に表など絶対欲しいタグなものの使用頻度が低いものを集めています。ポイントはカーソルを動かす距離が少なくすむよう配置すること。また、メディアの挿入にはWordPress標準のタグを使います。

wordpress_tinymceadvanced08_2

「高度なイメージ」「高度なリストオプション」「コンテキストメニュー」「高度なリンク」にチェックを入れました。現在、タグを配置していなくとも、忘れることがないようチェックしておきましょう。

「HTMLエディター内で~」にはぜひともチェック入れましょう。複数回改行が可能になります。「TinyMCE Advanced」を導入してこの項目にチェックを入れていると、「brBrbr」は全くいらなくなります。しかし、「PS Disable Auto Formatting」は、お互いの足りないところを補完しあうように正しく動くようなので、重装しておいてよいでしょう。

関連記事 : ビジュアルエディタを高度にカスタマイズする、プラグイン「TinyMCE Advanced」

関連記事 : 自動整形されるのを防ぎ意図どおりに改行する、プラグイン「PS Disable Auto Formatting」

関連記事 : 改行した分だけスペースを空ける、プラグイン「brBrbr」

◆ Similar Posts

36 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.