TinyMCE Advancedの使い方。全設定項目解説

TinyMCEadvanced検索

TinyMCE AdvancedはWordpressの記事投稿ビジュアルエディタをカスタマイズ、高機能化するド定番プラグインです。

HTMLの知識がなくても文章デザインが簡単に出来、見た目がそのまま反映されていくのがビジュアルエディタのメリットですが、その機能をさらに高機能化することが出来るので、とても便利です。

ビジュアルエディタはデフォルト状態でも使いにくい訳ではないのですが、

TinyMCE Advancedをインストールすることでより使いやすく、

ツールボタンを並べ替えたり、機能を追加したりすることが出来ます。

ただし高機能プラグインゆえに設定項目が多く、中には「これはどんな機能なの?」と思うものもあります。

そんなTinyMCE Advancedの全設定項目を解説します。

ぜひ参考にしていただき、使いやすい設定を見つけてください。

スポンサーリンク

TinyMCE Advancedの基本的な使い方

プラグインのインストール方法については
WordPressプラグインのインストール方法
を参考にしてください

TinyMCE Advancedの基本となる使い方は、ずらりと並んだツールボタンをドラッグ&ドロップで追加、削除、並べ替えを行って使いやすいツ-ルバーにすることです。

ツールバー比較

多くのボタンを設置できるため、ツールバーを3行まで増やすことができます。

使わないボタンは、下の「使用しないボタン」エリアに移動させます。

ボタンを並べたら最後に「変更を保存」をクリックして設定完了です。

TinyMCEadvanced設定画面

以下に各ツールボタンの機能を解説します。

 アイコン-段落 段落 文章を見出し(h1~h6)に変更します
アイコン-フォントサイズ フォントサイズ 文字の大きさを変えられます
アイコン-フォントファミリー フォントファミリー フォントを変えられます
アイコン-スタイル スタイル 文字の装飾や文章を囲むボックスなどをメニューから適用できます
アイコン-左寄せ 左寄せ 文章を左寄せにします
アイコン-中央揃え 中央揃え 文章を中央揃え(センタリング)にします
アイコン-右寄せ 右寄せ 文章を右寄せにします
アイコン-両端揃え 両端揃え 文章を両端揃えにします
アイコン-インデントを増やす インデントを増やす 文章行頭に空白を入れて右にずらす「字下げ」(=インデント)を行います
アイコン-インデントを減らす インデントを減らす 文章行頭に挿入した空白(=インデント)を減らします
アイコン-書式解除 書式設定をクリア 書式設定をクリアして素の状態に戻します
アイコン-アンドゥ 取り消し 作業を1つ前の状態に戻します。アンドゥ
アイコン-リドゥ やり直し 取り消した作業を復帰させます。リドゥ
アイコン-切り取り 切り取り いわゆるカット
アイコン-コピー コピー いわゆるコピー
アイコン-貼り付け 貼り付け いわゆるペースト
アイコン-テキストとしてペースト テキストとしてペースト Microsoft Wordで作成した文章をコピペする時に装飾を排除してプレーンテキストとしてペーストする機能。
通常時、このボタンがオフの時はWord上で装飾された文字が装飾された状態(完全ではないけど)でペーストされる。
アイコン-印刷 印刷 いわゆるプリント
アイコン-画像挿入編集 画像の挿入/編集

画像を挿入・編集できるボタン。余白設定の出来る編集機能が便利

TinyMCEadvanced画像の挿入編集

アイコン-動画挿入 Insert/edit media 動画を挿入、埋め込み設定などが出来ます
アイコン-テーブル挿入 テーブル

テーブル(表)を挿入します。
メニューからさらに表の操作が可能です。

TinyMCEadvancedテーブルメニュー

アイコン-リスト Bulleted list 文章をリスト表記(ulタグおよびliタグ)に変更します。
標準は黒丸ですが、オプションで白丸や四角にすることも出来ます。
アイコン-順番リスト 番号付きリスト 文章を番号付きリスト表記(olタグおよびliタグ)に変更します。
オプションで様々な表記に変えることも出来ます。
アイコン-リンク リンクの挿入/編集

文章をリンク化します。ポップアップでリンクの設定が可能です

TinyMCEadvancedリンク標準

アイコン-リンク解除 リンクの削除 リンクを削除して素の文章に戻します
アイコン-引用 引用 文章が引用文であることを明示します(blockquoteタグ)
アイコン-ソースコード太 ソースコード(太い方) ソースコードボタンは太いボタンと細いボタンがあり紛らわしいです。
太い方のボタンはソースコード(HTMLやCSSなど)を文章中の一文として表記する(codeタグ)時に使います
アイコン-ソースコード細 ソースコード(細い方) ソースコードボタンは太いボタンと細いボタンがあり紛らわしいです。
細い方のボタンをクリックするとポップアップが開きHTMLコードを直接編集することが出来ます。
アイコン-線 横ライン 記事を横断する横線(hrタグ)を設置します
アイコン-strong 太字 文字を太字にします(strongタグ)
単なる装飾ではなくHTML的に「重要な単語、文章である」という意味が含まれます
アイコン-イタリック イタリック 文字をイタリック(斜体)にします(emタグ)
アイコン-下線 下線 文字に下線を引きます
アイコン-打消し線 打ち消し 打ち消し線(delタグ)を引きます
アイコン-テキストカラー テキスト色 文字の色を変えられます。
アイコン-背景カラー 背景色 テキストの背景色を変えられます
アイコン-特殊文字 特殊文字

特殊文字を一覧から挿入できます

TinyMCEadvanced特殊文字

アイコン-上付き文字 上付き 上付き文字(supタグ)に変更します
アイコン-下付き文字 下付き 下付き文字(subタグ)に変更します
アイコン-改行なしスペース 改行なしスペース

「ノンブレイクスペース( )」を挿入します。
正確には違うものですが、いわゆる半角スペースです。

アイコン-アンカー アンカー 文章中にid属性を与えることができます。
例えばリンク先に指定するなどの使い方があります。
アイコン-日時挿入 日時を挿入 現在日時を文章に挿入します
アイコン-顔文字 顔文字

TinyMCEadvanced顔文字

顔文字を一覧から挿入できます。

ただし機種依存文字のため注意が必要です。

アイコン-続きを読む 「続きを読む」タグを挿入 記事中に「続きを読む」を挿入します。
アイコン-改ページ 改ページ 記事中に改ページタグを挿入してページを分けることが出来ます。
アイコン-右から左 右から左 文章を右寄せにします。右寄せにするだけです。
昔の日本語文のように右から左に文章を反転させる訳ではないです。
アイコン-左から右 左から右 文章を左寄せにします。
いわゆる通常の文章の体裁です。
アイコン-検索置換 検索置換

文章内の単語を検索したり、検索した単語を別の単語に置換することが出来ます

TinyMCEadvanced検索置換

アイコン-ブロック表示 ブロックを表示

文章のブロック単位(pタグで囲まれた塊)を可視化するボタンです

TinyMCEadvancedブロックを表示

アイコン-非表示文字を表示 非表示文字を表示 非表示文字(全角スペース、半角スペース、改行、タブなど)を表示してくれるボタン。のはずですが何も表示してくれません。使い物にならないです。
アイコン-ツールバー切替 ツールバー切り替え ツールバーを畳む/開くの切り替えボタンです。
複数行に増えて邪魔になったツールバーを畳んで作業スペースを広く使うことができます。
アイコン-フルスクリーン フルスクリーン 記事投稿画面(ビジュアルエディタ)を画面いっぱいに広げます。
いわゆる「集中執筆モード」と同じですが、画面の広がり方が違います。
アイコン-ショートカット キーボードショートカット

TinyMCE Advanced上で使えるショートカットキーの一覧を見る事が出来ます

TinyMCEadvancedキーボードショートカット

アイコン-Mark Mark 詳細不明の謎のボタン。
TinyMCE Advancedの設定画面にだけ表示されていて、投稿画面では表示されません。

エディターメニューを有効化する。とは

エディターメニューを有効化する。というチェックを入れるとツールバー上部にメニューが表示されます。

アイコン-メニュー

このメニューからTinyMCE Advancedに含まれる全ての機能にアクセスすることが出来ます

(ツールバーに表示していないボタンの機能も含む全部です。)

設定4項目の解説

設定にある4つのチェックボックスにチェックを入れると、各項目の機能をさらに拡張することが出来ます。

TinyMCEadvanced設定

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

通常は黒丸や数字のリスト表記を、白丸やローマ数字などの選択ができるようになります。

コンテキストメニュー

ビジュアルエディタ内で右クリックした時に現れるメニューをTinyMCE Advanced独自のものに置き換えます。

TinyMCEadvancedコンテキストメニュー

代替リンクダイアログ

標準のリンクボタンはURLを入力するだけのシンプルなものですが、このチェックを入れるとリンク関連の設定も行えるダイアログが表示されるようになります。

TinyMCEadvancedリンクメニュー変化

フォントサイズ

このチェックを入れると、選べるフォントサイズの幅が広がります。

※※※※※※※※※※

僕はこの4項目全てにチェックを入れて使っています。

高度なオプションの解説

「高度なオプション」ではより高度な設定が可能ですが、Wordpress全体にも大きな影響が出るため慎重な運用が必要な、上級者向きの項目となります。

TinyMCEadvanced高度なオプション

CSSクラスメニューの作成

ビジュアルエディタでの文章の見た目を規定する「editor-style.css」を有効にします。

WordPressにおいては実際のブログの画面の見た目を決めるCSSファイルと、投稿画面(ビジュアルエディタ)での見た目を決めるCSSファイルが別々にあるため、例えばブログ側のCSSをカスタマイズすると投稿画面での見た目と差が出ることになります。

そうなった時に「CSSクラスメニューの作成」にチェックを入れて「editor-style.css」の内容をブログ側のCSSと合わせて見た目の差を埋めることが出来るという訳です。

WordPressの構造やCSSの知識があれば活用できる項目です。

僕はチェックしていません。

段落タグの保持

WordPressは標準機能として不要な改行を削除して記事を保存する整形機能を持っています。
なのでどれだけ改行しても、保存すると改行がばっさり抜かれてしまいます。

またビジュアルエディタとテキストエディタを切り替える際にもタグが崩れる(整形している)ことがあります。

この「段落タグの保持」にチェックを入れると、Wordpressの整形機能がオフになり改行がそのまま残るようになります。

ビジュアルエディタとテキストエディタを切り替えてもタグが保持されて変更されません。

個人的にはWordpressの整形機能が本当に気に入らなかったので、この機能を使いたくてTinyMCE Advancedをインストールしたと言っても過言ではありません。

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

通常、画像を貼り付ける前に一旦貯めこむメディアライブラリを経由せずに画像を直接貼り付けることが出来る。らしいです。

Firefoxで検証してみましたがどう使えばよいのかわかりませんでした。どうやってもメディアライブラリに移動してしまうので、もしかしたら正常に動作していないのかも。

チェックを外しておいたほうが良いです。チェックしても動かないので意味ありません。

管理の解説

TinyMCE Advancedの設定を保存したり、機能拡張の範囲を決める項目です。

TinyMCEadvanced管理

設定のインポートとエクスポート

カスタマイズしたTinyMCE Advancedの設定をバックアップするテキストファイルを吐き出し、また読み込むことが出来ます。

TinyMCEadvanced設定のエクスポートTinyMCEadvanced設定のインポート

 

 

次のエディター拡張の有効化:

TinyMCE Advancedの機能をどこで使えるようにするか。というチェックです。

3つともチェックです。

実際に触って確認してください。

ビジュアルエディタ機能拡張プラグイン「TinyMCE Advanced」の全機能解説は以上です。

網羅的に解説しましたが、実際どんな動作をするのか、どんな変化があるのか、実際に触って確認していただくとより理解が進み使いこなせるようになると思います。

とにかく非常に便利なプラグインですので、快適なブログ執筆のために導入をオススメしますよ~

スポンサーリンク

シェアする

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

フォローする

コメント

  1. […] ど使わないものばかりですし、『何これ?』と思うようなものも多数あります。 しかし、こちらではすべての編集ボタンの解説を行ってくれていますので、見てみて自分に必要だと思っ […]