Simplicity2の拡張CSSデザインをMarsEditのプレビューに反映させる方法

WordPressのテーマは「Simplicity2」

WordPressでブログを始めるにあたってわたしが選んだテーマは「Simplicity2」です。わたしがいいな、と思ったところは、以下の通りです。(追記:2017年5月4日現在、使用しているテーマはminnowです)

SEO対策がプラグインなしでできる

通常SEO対策は「All in One SEO Pack」や「Yoast SEO」といったプラグインを使用して行うことが多いようですが、そういったものを使わずに、テーマをインストールしただけでシンプルにSEO対策ができます。

デザインがシンプルで標準の設定でカスタマイズができる

よっぽど凝った複雑なことをしない限りは、標準の設定(カスタマイズ)を変更するだけでかなりの変更を加えることができます。デザインもシンプルで飽きが来ないです。また、SNS対応もカスタマイズで対応できます。関連する記事を表示したり、レスポンシブデザインも特別なプラグインなしに実現できます。

拡張CSSデザイン

Simplicity2は拡張CSSを用いることによって文字や文章に対して様々なデザイン的効果を与えることができます。基本的にこのブログは文字中心のサイトなので、地味になりすぎず、嫌みになりすぎない程度のデザインが実現できるのは嬉しいです。

Simplicity2の拡張CSSデザインをMarsEditのプレビューに反映させる方法

とても都合の良いSimplicity2の拡張CSSなのですが、MarsEditで本番環境のデザインと同じプレビューを実現しようとすると、ただSimplicity標準のCSSをPreview Templateに取り込んだだけでは反映されません。CSS拡張クラスを記述したファイルはWordPressのダッシュボードからは見ることができないので、FTPなどで取得してから中身をエディタで開いてコピーし、MardEditのPreview Templateに貼り付けてください。ファイルは以下の場所にあります。

/wp-content/themes/simplicity/css/extension.css

ちなみに、WordPressのビジュアルエディタでもこの拡張CSSを反映させたい場合は、ダッシュボードから「テーマの編集画面」を開き、CSSの内容をeditor-style.cssにコピペするとよいです。