1. TOP
  2. ■デザイン工房
  3. WordPress ビジュアルエディタの拡張機能 TinyMCE Advancedでワンランクあっぷ

WordPress ビジュアルエディタの拡張機能 TinyMCE Advancedでワンランクあっぷ

WordPressの記事投稿画面はテキストモードとビジュアルモードが用意されているが、装飾状態を確認しながら作業できるビジュアルモードを拡張できるプラグインが「TinyMCEAdvanced」です。
エディタを拡張する多種類のボタンや機能が用意されていて、追加したい機能を選んで拡張できる。またエディタの画面は日本語化されているので、とても使いやすい。
主な機能は、文字色の設定やテーブルの追加、フォーマットの選択も簡単にできる。投稿の見映えが格段に上がる。

通常のビジュアルエディター

キャプチャー、ビジュアルエディター既存

プラグイン「TinyMCEAdvanced」のインストール

ダッシュボード、右メニューの プラグイン>新規追加 をクリック。
キーワードに「TinyMCE Advanced」と入力し、表示されたTinyMCE Advancedの[今すぐインストール]をクリック。

キャプチャー、プラグイン追加画面

続いて、[有効化]をクリック

TinyMCE Advancedの設定

ダッシュボードメニュー 設定>TinyMCE Advanced をクリック

エディターメニューを有効化する にチェックを入れる。
使用しないボタンの一覧から、使用したいボタンを上部の枠内にドラッグ&ドロップ。

キャプチャー、設定画面

その他の設定をして、[変更を保存]ボタンをクリック。

■リストスタイルオプション
順序付きリストの先頭記号に英大文字や小文字、順序なしリストの先頭記号に黒丸や四角を使用できるようになる。

拡張されたビジュアルエディターの確認

インストール後のビジュアルエディターがこちら
キャプチャー、ビジュアルエディタープラグイン追加後

フォーマットメニューからオリジナルで作成した「スタイル」の選択も可能になった。
キャプチャー、フォーマット選択の画面

上記のスパイス部分にスタイル「コメント」を適用させた状態。
キャプチャー、スタイル適用

スタイルを「ごはんブログ」用にカスタマイズ

ごはんブログのテーマはメインサイト「appli」のテーマを利用している。このテーマにはオリジナルでスタイル「補足情報」「注意書き」「コメント」が登録されている。

せっかくなので、ごはんブログにマッチするようにカスタマイズした。

appli 用のスタイル>

キャプチャー、appli用スタイル

ごはんブログ用のスタイル>
キャプチャー、ごはんブログ用スタイル

これで、ごはんブログの投稿が楽しくなりそうだ、ブログ内容もワンランクアップ!