2015.11.16WordPressツイート5シェアはてブ22送るPocket24WordPressでの記事作成はもっぱらビジュアルエディタ派の矢野キチです。ビジュアルエディタって見出しなどが大きくなるくらいで、実際のサイトではどんな感じで表示されるのか解りづらいなと思う方もいらっしゃるかと思います。そんな時はビジュアルエディタに、サイトで使用しているCSSを読み込ませることで、ある程度サイトと同じような見た目にすることが可能です。editor-style.cssを作成するまずeditor-style.cssを作成します。作成したcssを読み込む宣言を記述します。下記の一行をfunctions.phpのどこかに記述しましょう。わからない方はとりあえず上の方に入れてみてください。functions.phpの中に記述したらWordPressのビジュアルエディタでCSSが読み込まれるようになります。functions.phpを編集する場合は必ずバックアップをとってください。今はまだeditor-style.cssの中になにも書かれていないので何も変わりません。いうわけでeditor-style.css内にCSSを書き込んでみましょう。記事ページで使っているCSSを記述しましょう。記事ページで使ってるCSSだけを読み込むのが面倒ならstyle.cssを全て読み込んでしまってもOKです。editor-style.cssに下記のように書きます。することでテーマで使っているCSSをすべて読み込むので、エディタ内で投稿ページと同じような見た目にすることができます。必要ないCSSも読み込むのでエディタ内の表示速度が多少は遅くなるかとは思いますが...実際確認してみるとこんな感じ!ちゃんとビジュアルエディタ内で3カラムになっているのがわかります。style.css以外にCSSを読み込んでいる場合は、その別のスタイルシートも読みこむようにして下さい。まとめかなりニッチな需要だとは思いますがビジュアルエディタの表示を実際の見た目に近づける方法でした。見た目がある程度近くなることで、編集しながら実際の記事レイアウトが把握しやすいというメリットがあります。記事を書くのに慣れていないクライアントの方には、実際の表示と編集画面の見た目が近いほうが好まれたりもします。必要に応じて編集画面のデザインにもこだわってみましょう!という話でした。個人ブログでビジュアルエディタの便利な使い方をまとめているので、よろしければそちらもどうぞ!SPONSORLINKWordPresscssこの記事をシェアツイート5シェアはてブ22送るPocket24FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。WebSiteTwitterFacebookGoogle+HOMEWordPressWordPressのビジュアルエディタを実際の見た目に近づける簡単な方法WPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。