WordPressテーマをSTORKに設定して投稿画面でCSSを編集してもエディターにCSSが反映されていなくてプレビューとエディターを切り替えて面倒ですよね。
何も設定していない状態からAddQuicktagでCSSを呼び出してもエディターにCSSが反映されているから直観的に記事を作成できませんよね。
デフォルトのWordPress設定
CSSを書いてもエディターではCSSが反映されていないせいか記事編集も視覚的に直観で作業できませんとね。
[word_balloon id="1" position="L" size="M" balloon="talk" name_position="under_avatar" radius="true" avatar_border="false" avatar_shadow="false" balloon_shadow="false"]エディターでCSSを確認できる方法はないの？[/word_balloon]
WordPressをエディターで確認できる方法はあります。
やり方はWordPressに記述している追加CSSをメモ帳にコピー＆ペーストして保存。
保存したファイルをサーバーにあるeditor-style.cssを置き換えるだけで
WordPressをちょっと手を加えれば
難しそうに思えるけどこの記事を見ながら操作すれば簡単にWordPressでCSSがビジュアル化できます。
この記事はWordPressテーマがSTORKを使用しています。
STORK以外のテーマでWordPressをビジュアル化したい方はご使用のテーマに置き換えて挑戦してみてください。
※データが壊れたり削除される可能性が必ずWordPressのバックアップを保存してください。
目次
WorPress エディターでCSSを見える化する準備
準備するソフト
・テキスト編集ツール（メモ帳・サクラエディター）
・FTPソフト（FFFTP・FileZilla Client）
いずれも無料ソフトなので窓の杜からダウンロードしてください。
FTP接続についてはこちらの記事を参考にしてください。
[blogcard url="https://come-on-star.com/wordpress_moving/"]
[blogcard url="https://come-on-star.com/ftp-noconect/"]
CSSファイルをWordPressエディターに読み込む設定
CSSファイルをWordPressに読み込む設定です。
意味が分からない人はとりあえず下記の手順で操作してみてください。
WordpPress［外観］→［テーマエディター］→［テーマのための関数］
※Stork以外のテーマを使用されている方は使用しているテーマの子テーマからテーマのための関数を指定してください。
テーマのための関数（function.php）CSSを読み込むプログラムを記述
以下のタグをコピーそのままコピーしてStork子テーマのfunction.phpに貼り付けてください。
/* ビジュアルエディタ用CSSの有効化*/
add_editor_style("editor-style.css");
※誤ってタグを書き換えてしまうと取り返しのつかない事になるのでバックアップを忘れずに！
CSSをメモ帳にコピー
テーマーエディター・追加CSSに記述しているCSSをコピーしてメモ帳アプリ（メモ帳/サクラエディタ）に貼り付け。
記事先頭に下記のコードを記述してください。
@import url( '../jstork/style.css' );
@import url( 'style.css' );
CSSを貼り付けたテキストのタイトルを「editor-style.css」で保存。
あとでFTPソフトでUPするときにわかりやすい場所に保存する事をオススメします。
保存したeditor-style.cssをFTPソフトでサーバーにUP
先程作成したeditor-style.cssをFTPソフトでサーバーにUPします。
editor-style.cssをUPする場所は子テーマファイル直下。
editor-style.cssをUPしたら確認
editor-style.cssを子テーマ直下にUPしたらWordPressの記事投稿を確認。
CSSがWordPress記事投稿画面に反映されました。
CSSがWordPress記事投稿画面に反映されない時の対応
CSSがWordPress投稿編集に反映されない原因はほとんどが3パターン
2.CSSを記述したテキストタイトルの記入ミス
3.editor-style.cssのアップするフォルダが違う
function.phpにCSSコードが正しく記述していない
子テーマにあるfunction.phpに記述しているコードに誤りがあるとeditor-style.cssが読み込めません。
こちらのコードをコピーして子テーマにあるfunction.phpの末尾に追記してください。
/* ビジュアルエディタ用CSSの有効化*/
add_editor_style("editor-style.css");
CSSを記述したテキストタイトルの記入ミス
CSSを貼り付けたテキストファイルのタイトルにスペルミスがあるとCSSファイルを読み込む事ができません。
こちらのタイトルをコピーして作成したCSSファイル名に貼り付けてみてください。
editor-style.css
editor-style.cssのアップするフォルダが違う
editor-style.cssを子テーマ直下にアップロードしてもCSSが視覚的にWordPressエディターに反映されていない場合editor-style.cssが正しい子テーマ直下フォルダにアップロードされていない可能性があります。
サーバー内に複数のドメインが設定され各ドメインにSTORKをインストールしている場合子テーマが複数インストールされています。
分からない人は下記のアドレスを参考にeditor-style.cssをアップロードしてみてください。
/public_html/wp-content/themes/jstork_custom
まとめ
今回はSTORKを用いて解説しました。
STORK以外で試す場合はご自身で使用している子テーマに置き換えて操作を行ってみてくさい。
聞きなれない用語やなれない操作でCSSのビジュアル化のアップを躊躇してしまいがちですがWordPressエディターでCSSが視覚化できるだけで作業効率がグッと上がります。
操作前にバックアップを取っておけば最悪ブログは復元できるので時間をかけてでもWorPressのビジュアル化をオススメします。
この記事を読んでも分からない方はTwitter @tiger_jet_blogでDM頂ければ無料でサポートします。