359  Pocket   はてブ

ブログ執筆効率化!ビジュアルエディタの見た目を記事と同じくする(WordPress)

WordPress photo

このブログを書くとき、いつもWordPressのビジュアルエディタを使っています。

でも、実際に公開する記事と見た目が全然違うのですごく使いづらいんですよ。

例えば、

黄色マーカー

ピンクマーカー

外部リンクのアイコン icon-external-link

ツイッターのアイコン icon-twitter

ブートストラップ風メッセージ
(Simplicity拡張クラス)

などの、

  • Style.cssに自分で定義した文字にマーカー風の背景を設定するclass
  • FontAwesomeのアイコン
  • Simplicityの拡張クラス
  • その他もろもろ

は公開した記事ではちゃんと表示されても、それを書いているビジュアルエディタでは表示されません。

WordPress-editor-CSS_1

(注)上の画像は後述するプラグインをインストール後のためfontAwesomeのアイコンが表示されていますが、インストール前は表示されていなかったものです。

h2やh3見出し、引用とかも同じですね。

ビジュアルエディタではきちんと表示されず、フォントの大きな太字になるだけだったりインテントされるだけだったりといった感じになります。

そんなこともあって、今までは何度もプレビューで確認しながら記事を書いていたんですが、そのせいで一記事書きあげるのにすごく時間が掛かってしまっていたんですよ。

で、調べてみたらこれを解決する方法がありました。

▼対応後のビジュアルエディタがこちら。

WordPress-editor-CSS_2

画像には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へコピーしたところ、ブートストラップ風メッセージもビジュアルエディタで表示されるようになりました。

2015.7.2追記
6/30に公開されたSimplicity1.7.6版で拡張クラス等のcssがstyle.cssに統合されましたので、最新のSimplicityをお使いの場合はextension.cssのコピーは不要です。
Simplicity1.7.6公開。モバイルでもBRタグを表示する機能、@importをまとめる、WP4.1未満でもタイトルタグを表示など。

なお、Simplicity拡張クラスについては以下で解説されています。

拡張クラス | 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に登録して使ってましたが、このプラグインがあればそんな作業なしで簡単です。

WordPress-editor-CSS_3

ビジュアルエディタに追加されたドロップダウンメニューから簡単にアイコンが挿入出来るんです。

WordPress-editor-CSS_4

ちなみにですが、このプラグインに関わらずFontAwesomeのアイコンは全てモノクロです。(あくまでアイコンフォントなので)

なので icon-twitter や icon-external-link はこんな感じで個別にcssで色をつけてます。

まとめ

これで記事を書きながら何度もプレビューで確認する必要がなくなりました。

普段、WordPressのビジュアルエディタを使って記事を書いてる人にはオススメのカスタマイズですよ。

でも僕の場合、そもそも文章を考えたりってところに時間が掛かり過ぎてるので、根本的な改善には書くスピードを上げる技術が必要なんですけどね。。。

更新情報をお届けしてます(`・ω・´)ゞ

スポンサーリンク