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

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 4 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

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

 目 次 

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

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

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

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

editor-style.css作成

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

テーマフォルダとは?

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

メリット

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


 

チャンネル登録

 

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

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

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