【超簡単!】WordPressのビジュアルエディタで実投稿と同様に反映させる方法

こんにちはー。

皆さんはビジュアルエディタで記事を書く時、見出しなどが実投稿と同じように見えたらなぁ…、なんて思っていませんか?

例えば見出し2< h2></h2> で指定しても、文字が大きくなるだけですが、

実際に投稿画面と同じように反映できたら、わざわざプレビューしなくてもイメージが掴みやすいです。

今回はビジュアルエディタにて、実際の投稿と同じように反映させる方法を、

  • Luxeritas【ルクセリタス】を利用している場合
  • Luxeritas【ルクセリタス】を利用していない場合

でお伝えします。なぜ Luxeritas【ルクセリタス】をピックアップしているか?それは私がLuxeritas【ルクセリタス】を使用しているから、というなんてことない理由です。

WordPressテーマLuxeritas【ルクセリタス】以外の場合

Luxeritas【ルクセリタス】を利用していない場合です。まずは、editor-style.css があるか確認しましょう。

下準備①:editor-style.css を確認する

  1. 『外観』→『テーマの編集』へ移動。
  2. 現在利用しているテーマにeditor-style.css がある事を確認する。(スタイルのところにあります)
  3. ある場合は、確認作業は終了です。
  4. ない場合は、editor-style.css を作成します。

下準備②:editor-style.css を作成する

  1. テキストエディタでeditor-style.cssファイルを作成する。(空白のままでOKです。)
  2. 作成したファイルをアップロードします。(アップロード先はstyle.cssと同じフォルダにしましょう)
  3. functions.php に下記を追記します。
add_editor_style();

本作業:反映させたい所をコピペしよう

  1. 親テーマのstyle.cssにある反映させたいところをコピーします。
  2. 子テーマに移り、editor-style.cssを開く。
  3. editor-style.cssの好きな所に貼り付ける。
  4. 完了です。

WordPressテーマ Luxeritas【ルクセリタス】の場合

次に、WordPressテーマLuxeritas【ルクセリタス】を利用している場合です。Luxeritas【ルクセリタス】には、既にeditor-style.css が準備されていますので、editor-style.css の確認・作成のステップは必要ありません。

いきなり本作業:反映させたい所をコピペしよう

  1. 親テーマのstyle.cssにある反映させたいところをコピーします。
  2. 子テーマに移り、editor-style.cssを開く。
  3. editor-style.cssの好きな所に貼り付ける。
  4. 完了です。

まとめ

初心者である私は最初の頃はいちいちプレビューをして確認してましたが、この方法を知った時のあまりにも簡単にできた感動が忘れられません。

同様にプラグイン「Simple Custom CSS」でカスタマイズしたCSSも、同様に editor-style.css に貼り付けておくと更にイメージしやすく便利です。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ブログをやるならWordPressが絶対に良い理由

ベテランも初心者にもお勧め、安定・安心の信頼のあるレンタルサーバーこれだ

WordPressテーマを『Luxeritas』に変更しました。

オススメ!有料無料WordPressテーマを紹介します。