WordPress プラグイン

記事作成をもっと便利にTinyMCE Advanced

2017/08/26

WordPressで馴染みにくいのが、投稿と固定ページの記事の
編集です。

ビジュアルエディターとテキストエディターがあって、
ビジュアルは見た目の通りで記事が書けるでしょ、と
考える人はWordPressに慣れた方です。

ビジュアルエディターを使いやすくできるのが TinyMCE Advancedです。

無料ブログ(FC2、アメブロ、Seesaaブログ)などでは
おなじみのアイコン群達のようにカスタマイズが可能です。

WordPressならアイコンの一個一個までカスタマイズが
できるのが特徴。

23種類のアイコンを紹介していますので、必要なアイコン
のみを追加して、オリジナルのTinyMCE Advancedに
カスタマイズしてください。

最後にオリジナルTinyMCE Advancedの設定を別のブログに
コピーして使う(エクスポートとインポート)やり方も紹介
しています。

TinyMCE Advancedのインストール

プラグイン>新規追加>TinyMCE Advancedでインストール
して有効化して下さい。

設定>TinyMCE Advancedで初期画面はこのようになって
います。

TinyMCE Advanced1

私がカスタマイズした、WordPressのTinyMCE Advancedです。
赤枠の部分が追加されているのがわかります。

TinyMCE Advanced2

TinyMCE Advanced3

※アドバイス
新規投稿をしようとして良くあるのが、いつものツールバーが
ないケース。
初めての時は焦りますが、なにかの拍子にツールーバーの
切り替えアイコンがクリックされてツールーバーがたたまれて
しまうことがあります。

1クリックで戻りますので覚えておいてください。

TinyMCE Advanced4

TinyMCE Advancedのカスタマイズ

TinyMCE Advancedをインストールすると、同時にツールバーに
1つだけアイコンが追加されます。
それが下記の表の一番上の顔文字です。
後の23個のアイコンは自由に追加してください。

やり方は簡単で、アイコンをクリックして表示させたい
バーまでドラッグアンドドロップしてください。

移動した後のアイコンの移動も簡単で、アイコン同士も
ドラッグアンドドロップでいどうできますので使いやすい
位置に配置してください。

 TinyMCE Advanced5

24種類のアイコンの詳細です。
わかりにくいアイコンは試してみてください 😛
つかってみればすぐにわかりますよ。

アイコン 使い方の説明
TinyMCE Advanced100 顔文字を挿入します。
TinyMCE Advanced101 文字の下に線をつけます。
TinyMCE Advanced102 見出し、インライン、ブロック、配置の設定ができます。
TinyMCE Advanced103 フォントを変更できます。
 TinyMCE Advanced104 8,10,12,14,16,20,24,28,32,36pxに変更できます。
 TinyMCE Advanced105 切り取りです。ブラウザにより動作しないことがあります。
 TinyMCE Advanced106 コピーです。 ブラウザにより動作しないことがあります。
TinyMCE Advanced107 貼り付けです。ブラウザにより動作しないことがあります。
TinyMCE Advanced108 下付きの文字を作成します。 例:X
 TinyMCE Advanced109 上付きの文字を作成します。例:X
 TinyMCE Advanced110 記事の左から右にラインを一本挿入します。
 TinyMCE Advanced111 画像の挿入/編集ができます。サイズ指定も可能です。
TinyMCE Advanced112 作成中の記事の印刷ができます。
TinyMCE Advanced113 アンカーリンクを挿入します。
TinyMCE Advanced114 記事内の文字を検索し新しい文字に置換ます。
TinyMCE Advanced115 記事内にブロック(枠線)を表示します。
TinyMCE Advanced116 ビジュアルエディターでソースコードを表示/編集できます。
TinyMCE Advanced117 4種類のタイムスタンプを挿入できます。
TinyMCE Advanced118 動画の挿入/編集ができます。サイズ指定も可能です。
TinyMCE Advanced119 半角スペースを挿入できます。
TinyMCE Advanced120 左から右に文字を入力します(通常はこれです)。
TinyMCE Advanced121 右から左に文字を入力します(通常の反対です)。
TinyMCE Advanced123 改ページ(ページ追加)ができます。
TinyMCE Advanced122 文字の背景色を設定できます。

(2015年2月現在TinyMCE Advanced ver4.1.7で作成しています)

カスタマイズ完了後にチェックを2カ所付けて保存して完了です。

Stop removing the <p> and <br />tags when saving
and show them in the Text editor

ビジュアルエディターからテキストエディターで記事を書いて、
再度ビジュアルエディターに戻るときに発生する不要なタグが
発生する不具合を減らす効果があります。

Peplace font size settings

フォントサイズがブログのみではなく、スマホ・タブレッドの
読者用に記事を書くときに便利です。

フォントサイズは8px,10px,12px,14px,16px,20px,24px,28px,32px,36pxの
10種類から読者さんのデバイスに合わせて使用してください。
(テーマにもよるが初期のフォントサイズは15pxが多い)

最後にSave Changesをクリックして保存完了です。
お疲れ様でした。

TinyMCE Advanced6

カスタマイズしたTinyMCE Advancedをエクスポート・インポート

せっかく時間をかけてカスタマイズしたTinyMCE Advancedを
同時に運営しているWordPressにデーターコピーして使いたいと
誰もが思います。
しっかり対応しているのがTinyMCE Advancedのいいところ。

  • エクスポート(現在の設定を書き出してコピーします)
  • インポート(エクスポートで書き出したデータを取り込みます)

順番に紹介していきます。

TinyMCE AdvancedのExport(エクスポート)

一番下にAdministrationの項目がありますので、「Export
Settings」をクリックしてください。

TinyMCE Advanced7

このような記述がありますので{"Settings": 省略  ""} Select Allをクリックします。
記述に水色の背景色が表示されますので、右クリックで
コピーしてください。
インポート先のブログに移動します。
一旦保存する場合はテキストエディターかテキストで貼付けて
保存してください。

TinyMCE Advanced8

TinyMCE AdvancedのImport(インポート)

エクスポートのレイアウトと似ています。
中心にペーストして貼付けてください。
左下のVerifyボタンをクリックするとデータが壊れていないか
チェックします。

もし壊れていた場合はもう一度エクスポートからやり直して
ください。(壊れたデータでインポートすると誤動作が発生
して修復に時間がかかります)

No errors.と表示されれば問題ありません。
Importをクリックして取り込み完了です。

TinyMCE Advanced9

まとめ

記事を作成する作業効率とサイト運営者や無料ブログからのWordPressへ移転された方は必ずインストールすることを
お勧めします。

最初に少し時間かけてつくってもらえば、他のWordPressに
コピーできますのでココでも効率アップになります。

フォントとフォントサイズが記事作成で選べないのも最初は
とまどいますが、サイト作成ソフトも無料ブログ(FC2、
アメブロ、Seesaaブログ)も最初からインストールされて
ますから。

今後も対応は増えていくと予想されますのでインストール
必須のプラグインです。

-WordPress, プラグイン

AGA 成長因子