TinyMCE Advancedの設定方法

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

キャプチャ6

「TinyMCE Advanced」にはビジュアルエディタを拡張する様々な追加機能が用意されており、追加したい機能を自分で選んで、自分が使いやすいように拡張できます。

ここでは、「TinyMCE Advanced」の設定方法を説明します。

TinyMCE Advancedの設定方法

1.WordPress管理画面から「設定」を選択し、「TinyMCE Advanced」をクリックします。

キャプチャ1

 

2.設定画面が表示されます。

キャプチャ2

 

3.「使用しないボタン」に置かれているボタンを、上部のツールバーにへドラッグ&ドロップし、ビジュアルエディタで使いたいボタンを追加します。

キャプチャ3

 

なお追加した各ボタンの機能は以下のようになります。

ボタン 名称 機能
da 段落 見出しタグを設定する 
bo 太字 文字を太くする
it イタリック 文字を斜体にする
un 下線 文字に下線を引く
in 引用 引用タグを挿入する
li 番号なしリスト リストタグを挿入する
li2 番号付きリスト ナンバータグを挿入する
le 左寄せ 文字を左寄せにする
ce 中央揃え 文字を中央揃えにする
ri 右寄せ 文字を右寄せにする
link リンクの挿入・編集 リンクを挿入・編集する
unlink リンクの削除 リンクを削除する
tori 取り消し 操作を取り消す
yari やり直し 操作をやり直す
キャプチャ1 フォントファミリー 文字の種類を変更する
fo フォントサイズ 文字のサイズを変更する
he インデントを減らす インデントを減らす
hu インデントを増やす インデントを増やす
キャプチャ2 特殊文字 特殊文字を挿入する
mo 続きを読むタグを挿入 モアタグを挿入する
tc テキスト色 文字の色を変更する
table テーブル 表を作成する
bc 背景色 文字の背景色を変更する
キャプチャ3 打ち消し 打ち消し線を挿入する
キャプチャ4 顔文字 顔文字を挿入する
pi 画像の挿入・編集 画像を挿入・編集する
vi 動画を挿入・編集  動画を挿入・編集する
キャプチャ5 上付き 文字を上付きにする
キャプチャ6 下付き 文字を下付きにする

 

4.「設定」の「フォントサイズ」の欄にチェックを入れます。これでフォントサイズの単位をpt(ポイント)からpx(ピクセル)に変更できます。

キャプチャ4

 

5.「高度なオプション」の「段落タグの保持」の欄にチェックを入れます。これでテキストエディタで修正した記事を、再びビジュアルエディタに戻して確認した際に、設定していないはずのタグが勝手に追加されてしまう、という不具合を少なくすることができます。

キャプチャ5

 

6.「管理」の項目は特に変更不要です。

キャプチャ6

 

7.最後に「変更を保存」をクリックします。

 

TinyMCE Advancedの使い方

段落

見出しとなるテキストを囲い、「段落」をクリックし見出し1~6を選択すると見出しとなり、文字が太く大きくなります。

キャプチャ1

↓↓

キャプチャ2

↓↓

キャプチャ3

 

太字、イタリック、下線、打ち消し、上付き、下付き

太字、イタリック、下線を選択すると、文字はそれぞれ下のように装飾され表示されます。

キャプチャ15

 

引用

引用を選択すると、文字はインデントされた形で表示されます。

キャプチャ5

公開後はこのように“で囲まれて表示されます。

キャプチャ6

 

番号なしリスト、番号付きリスト

項目をリスト形式で表示する場合に使用します。

キャプチャ7

 

左寄せ、中央揃え、右寄せ

左寄せ、中央揃え、右寄せを選択すると、文字はそれぞれ下のように表示されます。

キャプチャ8

 

リンクの挿入・編集、削除

リンクを挿入ボタンをクリックすると、以下の画面が表示されます。右の歯車マークをクリックします。

キャプチャ9

リンク先のURLを挿入し、「リンクを新しいタブで開く」にチェックを入れます。最後に「リンク追加」をクリックします。

キャプチャ10

リンクを削除するには、「リンクの削除」ボタンをクリックするか、リンク横の×ボタンをクリックします。

キャプチャ11

キャプチャ12

 

取り消し、やり直し

今行った操作を取り消したい時には「取り消し」ボタンを、取り消した操作をもう一度元に戻したい時には「やり直し」ボタンをクリックします。

 

フォントファミリー、フォントサイズ

「フォントファミリー」でフォントの種類を、「フォントサイズ」でフォントの大きさを変更します。

キャプチャ13

 

インデントを増やす・減らす

文字のインデントを増やしたり、減らしたりします。

キャプチャ14

 

特殊文字、顔文字

特殊文字、顔文字を挿入します。

キャプチャ16

キャプチャ17

 

続きを読むタグを挿入

記事に「続きを読む」ボタンを挿入します。

キャプチャ20

投稿後はこのように表示されます。

キャプチャ19

 

テキスト色、背景色

テキスト色、背景色を変更します。

キャプチャ18

 

テーブル

記事中に表を挿入します。

テーブルボタンをクリックし、「テーブルを挿入」をクリックします。何行何列の表にするかをブロックの数で表現します。

キャプチャ21

 すると、記事本文の中にテーブルが挿入されます。

キャプチャ22

セルに文字を入力していきます。

キャプチャ23

 セルの幅を変える場合には、セルを選択し、「テーブル」ボタン→「セル」→「セルのプロパティ」の順でクリックします。

キャプチャ24

ここではセル幅を「100」と入力しています。設定ができたら「OK」をクリックします。

キャプチャ25

セルの幅が変更されました。ほかのセルも幅を変更し、見やすい表を作成します。

キャプチャ26

 

終わりに

「TinyMCE Advanced」を導入するとビジュアルエディタ機能が強化され、記事を書く効率がぐんと上がります。はじめはボタンの意味が分からなくても、使っているうちに慣れていきますので積極的に使っていきましょう。

 

 

以上、TinyMCE Advancedの設定方法、でした。

ウナダ

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

SNSでもご購読できます。

コメント

コメントを残す

*