このブログを書くとき、いつもWordPressのビジュアルエディタを使っています。
でも、実際に公開する記事と見た目が全然違うのですごく使いづらいんですよ。
例えば、
黄色マーカー
ピンクマーカー
外部リンクのアイコン
ツイッターのアイコン
（Simplicity拡張クラス）
などの、
- Style.cssに自分で定義した文字にマーカー風の背景を設定するclass
- FontAwesomeのアイコン
- Simplicityの拡張クラス
- その他もろもろ
は公開した記事ではちゃんと表示されても、それを書いているビジュアルエディタでは表示されません。
h2やh3見出し、引用とかも同じですね。
ビジュアルエディタではきちんと表示されず、フォントの大きな太字になるだけだったりインテントされるだけだったりといった感じになります。
そんなこともあって、今までは何度もプレビューで確認しながら記事を書いていたんですが、そのせいで一記事書きあげるのにすごく時間が掛かってしまっていたんですよ。
で、調べてみたらこれを解決する方法がありました。
▼対応後のビジュアルエディタがこちら。
画像にはh2見出しやh3見出しは入ってませんが、同じようにちゃんと表示されます。
横幅も投稿記事のwideと合わせているので、改行するしないの判断もしやすくなりました。
Photo by ZERGE_VIOLATOR 
ビジュアルエディタに投稿用のCSSを適用させる
参考にさせていただいたのは以下の記事。
WordPressビジュアルエディタのCSSに実際の表示を適用する方法
WordPressでビジュアルエディタを使って書き始めたころ、どうしても我慢ならなかったのが、ブログを書く画面と実際の見た目が違う！ということでした。もう本当に書きにくい。ビジュアルエディタにCSSを反映させたい！と思っ･･･
pasokatu.com
上記記事はこのブログと同じくテーマにSimplicityを使用されているので、説明されている手順通りに簡単にできました。
（Simplicity以外の場合の手順も説明されています）
ものすごく簡単に書くと、ビジュアルエディタ用のCSSを記述するためのeditor-style.cssにstyle.cssの中身を全部コピーするという方法です。
子テーマでカスタマイズしている場合は子テーマのstyle.cssもぶっこみます。
これでh2見出しや引用などは公開記事とほぼ同じ見た目になります。
ただ、これだけだとまだFontAwesomeのアイコン、Simplicityの拡張クラスはビジュアルエディタ上では何も表示されません。
ということで調べてみたら、Simplicityの拡張クラスが表示されない理由はstyle.cssとは別のcssファイルに定義されているからでした。
なのでSimplicity拡張クラスの対応として、
/wp-content/themes/simplicity/css/extension.css
の中身もeditor-style.cssへコピーしたところ、ブートストラップ風メッセージもビジュアルエディタで表示されるようになりました。
6/30に公開されたSimplicity1.7.6版で拡張クラス等のcssがstyle.cssに統合されましたので、最新のSimplicityをお使いの場合はextension.cssのコピーは不要です。
Simplicity1.7.6公開。モバイルでもBRタグを表示する機能、@importをまとめる、WP4.1未満でもタイトルタグを表示など。
なお、Simplicity拡張クラスについては以下で解説されています。
今までブートストラップ風メッセージしか使ったことありませんでしたが、こんなのもあるんですね。
LINE風吹き出しメッセージです
こんなことも出来るんだね
WP Visual Icon Fontsの導入
最後に、FontAwesomeのアイコンをビジュアルエディタに表示させる方法について。
参考にさせていただいた記事はこちら。
WordPressの投稿にFont Awesomeのアイコンフォントを使いたかったら「WP Visual Icon Fonts」が最も手軽
Font Awesomeのアイコンフォントは、ブログデザインなどにワンポイントとして使用するととても便利です。このブログで使…･･･
nelog.jp
Simplicity作者わいひらさんの記事ですね。
WP Visual Icon Fontsというプラグインを使う方法です。
editor-style.cssに何かを追記すれば対応できるのかもしれませんが、やり方が分からなかったのでプラグインに頼りました。
でも使ってみたところ、これがすごく便利！
今まではFontAwesomeアイコンの挿入時、テキストエディタで該当のアイコンclass名を直打ちするかaddQuicktagに登録して使ってましたが、このプラグインがあればそんな作業なしで簡単です。
ビジュアルエディタに追加されたドロップダウンメニューから簡単にアイコンが挿入出来るんです。
ちなみにですが、このプラグインに関わらずFontAwesomeのアイコンは全てモノクロです。（あくまでアイコンフォントなので）
なので や はこんな感じで個別にcssで色をつけてます。
まとめ
これで記事を書きながら何度もプレビューで確認する必要がなくなりました。
普段、WordPressのビジュアルエディタを使って記事を書いてる人にはオススメのカスタマイズですよ。
でも僕の場合、そもそも文章を考えたりってところに時間が掛かり過ぎてるので、根本的な改善には書くスピードを上げる技術が必要なんですけどね｡｡｡
[amazonjs asin=”4820712322″ locale=”JP” title=”話すように書く技術―文章が苦手の人もスラスラと速く書ける!”]
コメント