HYBRID THEME

monochrome(モノクロ)

シンプルなデザインを保ちつつ、特徴的なシルエットで個性を演出したWordPressテーマです。
カジュアルなサイトからフォーマルなサイトまで、性別を問わず多くの方にご利用いただけます。

HYBRID THEMEへ移動する

フロントページのスタイルとビジュアルエディタのスタイルを合わせる方法

利用しているWordPressテーマのスタイルと、
記事作成画面にあるビジュアルエディタのスタイルを合わせる方法を紹介します。

通常、何もしない状態ではフロントページ(表示されているサイト)と
管理画面の記事作成画面のスタイルは一致しません。

原因は、フロントページが読み込んでいるスタイルシートと、
記事作成画面のビジュアルエディタが読み込んでいるスタイルシートが異なるためです。

フロントページのスタイルに近づかせる為には、
記事作成画面にフロントページのデザインに合わせた任意のスタイルシートを読み込ませます。

はじめに、以下のコードをご利用中のテーマフォルダ内にあるfunctions.phpに記述してください。

function my_theme_add_editor_styles() {
 add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

次に、editor-style.cssファイルを作り、
その中に、フロントページに合わせたCSSを記述してください。

最後に、editor-style.cssをテーマフォルダの中に入れて完了です。

ビジュアルエディタの性質上、100%フロントページとデザインを合わせる事は出来ませんが、
限りなく近づかせることはできます。

尚、当サイトで配布しているWordPressテーマは全てeditor-sytle.cssが実装されていますので、
上記作業を行う必要はありません。

  • このエントリーをはてなブックマークに追加

関連記事