賢威7.0

賢威7:記事編集画面を実際の表示に近づける方法

keni7-visual-editor-editor-style-thumbanil

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は、WordPressテーマ:賢威7サイトの記事編集画面を、実際の表示に近づける方法を紹介したいと思います。

WordPressで記事を編集するとき、何で実際のサイト表示と記事編集画面が同じじゃないんだよ!と思う方はきっといると思います。自分もよく思ってました。

でもこれは、今回紹介するエディタースタイルというものを使えばある程度解決できます。完璧に同じ表示にはなりませんが、それなりに実際のサイト表示に近づけることができます。個人的にはフォントが見やすくなるのが嬉しいところです。

記事の編集画面は何度も繰り返し使っていくものなので、気分よく文章が書けるようになるだけで、作業が一気にはかどると思います。ビジュアルエディターとサイト表示の違いが気になっていた方、ぜひお試し下さい。

カスタマイズ前

↓ いつものビジュアルエディター

keni7-editor-style-before

カスタマイズ後

カスタマイズ 1

↓ メインのCSS(base.css)を適用。フォントや行間、背景色などが変更されています。

keni7-editor-style-after-1
カスタマイズ 2

↓ 編集画面専用のCSSを適用(背景色や余白を調整)。

keni7-editor-style-after-2

[ad]

1. functions.php を編集(カスタマイズ 1)

エディタースタイルを使うには、「エディタースタイルを使うよ」ということをWordPressに伝えなければなりません。WordPressではエディタースタイルのために add_editor_style() という便利な関数が用意されているので、これを利用して伝えていきます。

以下のコードを functioins.php に追加します。

// エディタースタイル
add_editor_style( 'base.css' );
add_editor_style( 'editor-style.css' );

まだ editor-style.css を作っていないので、メインCSSである base.css しか読み込まれていませんが、この時点では下の画像のような状態です。ビジュアルエディターと実際のサイト表示ではHTML要素が微妙に違うので、記事本文の背景色が表示されていません。

※ コーポレート版やビューティーなど、お使いの賢威テーマによってビジュアルエディターの背景色が違うかもしれません。ここでは賢威7のプリティ版(Brown)を使いました。

※ HTMLタグやショートコードを入力する画面(テキストエディタ)では、表示が変わらないので注意して下さい。

keni7-editor-style-after-1

ちなみに実際のサイト表示は下の画像のようになっています。白い背景となる要素がないのと、余白が画面の端に詰まりすぎている状態です。

keni7-editor-style-5

2. editor-style.css を作成(カスタマイズ 2)

このままでは見にくいので、ビジュアルエディター専用のCSSファイルを作っていきます。

先ほど functions.php に書いたファイル名と同じ名前のCSSファイル(editor-style.css)を作成します。作成場所は base.css やfunctions.php と同じ階層で大丈夫です。

keni7-editor-style-after-3

背景色を白にしたいのと、余白をもう少し付けたいので、以下のコードを editor-style.css に追加します。

body.wp-autoresize {
    padding: 2% !important;
    background: #fff;
}

これで背景色と余白が調整されました。やっぱり記事編集画面は白のほうが良いですね。フォントも明朝よりゴシックの方が個人的には見やすいです。

keni7-editor-style-after-2

上で紹介した以外にも、実際の賢威サイトと同じように editor-style.css にCSSコードを追加すれば、ビジュアルエディターの見た目を変更することができます。

例えば文字サイズを 13px にするときは、以下のコードを editor-style.css に追加すれば大丈夫です。

body {
    font-size: 13px;
}

↓ コード追加後

keni7-editor-style-after-4

このような感じでお好みの編集画面にすることができます。ぜひお試し下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。