以前の記事『WordPressで管理画面のビジュアルエディターのフォントをメイリオに変更する方法』では、本当はWordPressの管理画面で、ビジュアルエディターのスタイルを実際のスタイルに合わせたかったのですが、パッと簡単に合わせることができなかったので、取り急ぎ、文字のフォントとサイズを変更することで、最低限、記事が書きやすくなるという内容でした。

その後、実際のスタイルにある程度は合わせられる方法が見つかりましたのでご紹介します。

ビジュアルエディター用のCSS(スタイルシート)の用意

前述の記事同様、ビジュアルエディター用のCSSファイルを用意します。

例えば「editor-style.css」というファイル名にして、「functions.php」に以下を記述します。

//管理画面のエディタ用CSS読み込み
add_editor_style("editor-style.css");

当サイトの場合は、賢威の子テーマで運用していますので、子テーマディレクトリの「functions.php」に追記しています。

「editor-style.css」の編集

「editor-style.css」を以下のように記述します。

@charset "UTF-8";

@import url('../fans-web/base.css');
@import url('base.css');

body.mceContentBody {
    margin: 0px 20px 0.5em 20px;
    font-size:14px;
    line-height:150%;
}

解説

base.cssの読み込み

@import url('../fans-web/base.css');
@import url('base.css');

上の1行目が賢威の親テーマ用CSSファイルで、2行目が子テーマ用のCSSファイルになります。

この順番で読み込むことによって、親テーマのCSSが読み込まれ、次に子テーマのCSSが読み込まれますので、基本的なスタイルが適用されます。

管理画面用の余白を入れ、文字や行間は小さくする

body.mceContentBody {
    margin: 0px 20px 0.5em 20px;
    font-size:14px;
    line-height:150%;
}

次にこちらの部分ですが、「margin: 0px 20px 0.5em 20px;」は管理画面の枠の余白です。

これがなければ、入力した文字が枠にくっついて読みづらいです。

あとは、当サイトの場合は、実際の文字の大きさだと管理画面の中の文字としては大きくて記事が書きづらいため、管理画面のみ、文字が小さく、行間も狭めています。

h2などの見出しタグのスタイル設定

上記までの設定だと、管理画面上のh2やh3タグのような見出しタグの装飾が適用されません。

これは、管理画面のidやclassと実際の記事のidやclass要素が違うためです。

そのため、当サイトの場合はh2やh3は子テーマのbase.cssでスタイルを定義しているため、子テーマのbase.cssを以下のように修正します。

/*見出しタグ*/
#tinymce h2,
.article-body h2{
	font-size: 1.2em;
	font-weight: bold;
	color: #333;
	background-color: #E7EAE6;
	position: relative;
	line-height: 1.5em;
	padding: 0.85em 1em;
}
#tinymce h2:before,
.article-body h2:before{
	content: "";
	position: absolute;
	bottom: -23px;
	left: 10%;
	border: 12px solid transparent;
	border-top: 12px solid #E7EAE6;
}
#tinymce h3,
.article-body h3{
	font-size: 1.1em;
	font-weight: bold;
	color: #333;
	line-height: 1.5em;
	border-bottom-style: none;
	background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWO4evXqfwZkAAA19AN/FhPClgAAAABJRU5ErkJggg==") repeat scroll 0 0;
	border-bottom-style: none !important;
	border-left: 1px dotted #333333;
	padding: 0.65em 1em;
	line-height: 1.25em !important;
}
#tinymce h4,
.article-body h4{
	font-size: 1.05em;
	font-weight: bold;
	color: #333;
	line-height: 1.5em;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #666;
	border-bottom-color: #666;
	padding: 0.65em 1em;
}

#tinymce h2」等のように「#tinymce ~」が管理画面用の見出しにも同じスタイルが適用されるように設定したものです。

これでかなりの部分で実際のスタイルに近づくと思いますので、より実物の記事をイメージしながら記事の執筆ができるようになります。