ビジュアルエディターでスタイルを適用させる方法

この記事を読むのに必要な時間は約 3 分です。

WordPressでブログを書くときに見たまま反映しないとプレビューを多用することになってちょっと面倒だったりしますね。独自で設定したスタイルシートをそのまま反映させる方法があるのです。  

目 次

ビジュアルエディターとは?

ビジュアルエディタはいわゆるWYSIWYGエディタと呼ばれるもので、本文に設定した書式がそのままエディタ上で反映されます。 ビジュアルエディター ただ何も設定しなければテーマで設定されたようにしか表示が反映しないのです。 ということは、独自で設定したスタイルシートはビジュアルエディターでは反映しないのです。

スタイルシートを反映させるためには?

[wc_row] [wc_column size=”one-half” position=”first”] スタイルシート [/wc_column] [wc_column size=”one-half” position=”last”] 独自に設定しているスタイルシートを反映させるためには、editor-style.cssを作成してstyle.cssを読み込ませることです。 その後にfunctions.phpにeditor-style.cssを読み込む設定を追記するこの2点が必要です。 functions.phpの編集には注意が必要です。 [/wc_column] [/wc_row]

editor-style.css作成

editor-style.css editor-style.cssで最初にスタイルシートを読み込みます。 それでエディターの初期設定を書いておきます。 Lightning用は、メルマガ購読でプレゼント予定です。

テーマフォルダとは?

WordPressでは、よくテーマフォルダという言い方をよくしますが、いったいテーマフォルダとは・・・ http://あなたのドメイン/wp-content/themes/あなたが使っているテーマ/ テーマフォルダー 上記の画像のような状態です。 ここに表示されているあなたが使っているテーマフォルダーの中に入れます。 親テーマでなく子テーマの使用を推奨しています。

メリット

プレビュー機能 上記のビジュアルエディターで表示確認ができなければ何度も赤枠のプレビュー機能を使用することになりそれだけでかなりの時間をロスすることになります。 editor-style.cssでちゃんとstyle.cssを読み込むことは、記事作成の時短にも繋がることなのです。いつまでも時間かけて作成するよりは時短につなげる方が実務に避ける時間が増えます。  

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!