WordPressのビジュアルエディタにCSSを反映させる方法
シンカツブログ
検索

WordPressのビジュアルエディタにCSSを反映させる方法

シェアする

WordPressのビジュアルエディタで、文章を書いていて、デザインのCSSを反映されていると、見やすいというか、公開時にどうなるかがわかってわかりやすいですね。

ということで、WordPressのビジュアルエディタにCSSを反映させる方法について書いておきます。

ビジュアルエディタCSS

WordPressのビジュアルエディタにCSSを反映させる方法

1 「function.phpへのコード追加」

2 「ビジュアルエディタ用のCSS作成」

この2つで、スタイルを反映させることができますね。

function.phpへのコード追加

// ビジュアルエディタ用CSS
add_editor_style('editor-style.css');

こちらのコードを、function.phpに追加します。

「editor-style.css」を、エディターのスタイルとして指定するということですね。

ビジュアルエディタ用のCSS作成:editor-style.css

そして、editor-style.cssを作成して、テーマに追加します。

子テーマを使っているときは、子テーマに追加します。

それから、現在自分が使用しているテーマのCSSから、ビジュアルエディタで適用したいスタイルをコピペします。

1 「function.phpへのコード追加」、2 「ビジュアルエディタ用のCSS作成」。

この2つを行えば、ビジュアルエディターで、ブログのデザインと同じような感じで、記事を編集できますね。

記事を編集中に、どんな感じの記事のデザインになるかがわかる

記事を作成中、編集中に、どんな感じになるのかがわかるので、一手間ですが、かけておくと、自分の記事がだいたいどんな感じかを公開前、更新前にわかるので良いと思います。

こういったところをやるか、やらないか。

ちょっとした違いですが、効率などに関係するので、やっておきたいですね。

WordPressでやっておきたいカスタマイズリストまとめ。これだけやれば、最低限ブログ運営はできるはず

ソフトバンクオンラインショップ
ドコモオンラインショップ
auオンラインショップ

フォローする シェアする

Facebookページ

Twitter

Facebookページに、「いいね!」を!

更新情報をお届けします!

Twitterを、フォローする!

Twitterのフォローも、ぜひ!

シェアする
ビジネスコーチ、ウェブコンサルタント。
13年ほどブログを毎日更新している。
著書に、『1つのことを長く続けられる技術』(サンマーク出版)、『仕事のムダを削る技術』(ソフトバンククリエイティブ)、『10倍ラクするスマートフォン仕事術』(技術評論社)がある。

シェアする

フォローする