WordPressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。
ビジュアルエディターは、デフォルトの状態だと、フォントサイズも小さめですし、WindowsデフォルトではMSゴシックが選択されます。
このままでも、もちろん十分使えます。ただ、できればもう少し文章を編集しやすく表示出来れば、より使いやすくなるかと思います。
ということで今回は、こういった、デフォルトのビジュアルエディターのスタイルを、自分好みにカスタマイズして、見やすく記事を書く方法を紹介したいと思います。
photo by Alexander Gounder
目次
主な手順
ビジュアルエディターに独自のスタイルを適用させる主な手順は以下の3手順です。
- functions.phpファイルに独自スタイル用のコードを書く（１行）
- テーマ（子テーマ）フォルダ内にCSSファイルを作成する
- 作成したCSSファイルにスタイルを書き込む
このような手順を踏むことで、結構簡単に以下のようにビジュアルエディターに独自のスタイルを反映させることができます。
僕は、Simplicityというテーマを使っているので、Simplicityと同様の表示にしてみました。他のテーマを利用している場合は、ご利用のテーマのスタイルに合わせると、かなり書きやすくなると思います。
以下では、その詳細な手順を紹介します。
functions.phpファイルの編集
ビジュアルエディターにスタイルを追加するためには、まずfunctions.phpに「ビジュアルエディター用CSSファイルを使うよ」と宣言するコードを書く必要があります。
コードといっても、難しい記述はなく、functions.phpに以下の1行を書き加えればOKです。
add_editor_style();
これで、テーマフォルダ直下の「editor-style.css」ファイルが読み込まれる設定になります。
上記のコードを、子テーマ内の「functions.php」に記入すれば、子テーマ内の「editor-style.css」ファイルが読み込まれます。子テーマでテーマをカスタマイズしている場合は、子テーマに記入した方が良いかと思います。
以下の説明では、「functions.php」に「add_editor_style();」を記入したものとして説明します。
add_editor_styleその他の書き方
add_editor_style()に引数を、指定することで、ビジュアルエディター用のCSSファイル名などを自由に指定することもできます。
細かな設定が必要ない場合は、こちらの項目は読み飛ばしてください。
例えば以下のように書くと、テーマフォルダ内、「css」フォルダの中にある、「admin-editor.css」ファイルのスタイルがビジュアルエディターに読み込まれます。
add_editor_style( 'css/admin-editor.css' );
また、ファイルを複数指定する場合は、以下のように配列を用いて複数ファイルの指定をすることもできます。
add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );
上記は、Wordpressにデフォルトで含まれている「Twenty Fifteen」というテーマで使われている方法です。
add_editor_style()を用いて、「css/editor-style.css」、「genericons/genericons.css」、「関数により自前のWEBフォントCSSファイルの呼び出し」を行っています。
ただ通常個人が利用する分には、add_editor_style();とだけ書き加えて、「editor-style.css」を編集する方法で十分かと思います。
エディタースタイル用のCSSファイルを作成
次は、テーマフォルダ直下に「editor-style.css」というファイルを作成します。
子テーマで利用する場合は、子テーマフォルダ直下に作成してください。
子テーマに作成したときは、以下のような感じになります。
作成したファイルにスタイルを書く
最後に「editor-style.css」を手持ちのテキストエディターで開いて、スタイルを書き込みます。
ただ、ビジュアルエディター用のスタイルの書き方は、通常とは少し異なります。
ビジュアルエディターのbody要素に反映するスタイルを書くには、以下のように書く必要があります。
body#tinymce.wp-editor {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}
CSSセレクタが、body#tinymce.wp-editorとなっていることにご注意ください。
ただ、見出しとかの修正なら
h2{
background-color: red;
}
と書くだけで十分です。
「editor-style.css」に上記のように記入しただけで、以下のような表示になります。
子テーマの「editor-style.css」で、以下のように上書きしたとすると、
h2{
background-color: blue;
}
赤背景が上書きされ以下のように青色になります。
で、例えばSimplicityのような表示にさせようと以下のように書いたときは、
/*ビジュアルエディターのスタイル*/
@import url('extension.css');
body.mceContentBody {
font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',
Meiryo, sans-serif;
margin: 20px 30px;
line-height: 170%;
width: 680px;
}
.editor-area a {
color: #339933;
text-decoration: underline;
}
/************************************
** 見出し（H1-6）
************************************/
h1, h2, h3, h4, h5, h6{
line-height:130%;
color:#333;
}
h1,
h2,
h3,
h4,
h5,
h6{
position:relative;
margin-top:35px;
margin-bottom:20px;
}
h1 {
margin-top:30px;
margin-bottom:20px;
font-size: 30px;
line-height:117%;
}
#archive-title{
padding-bottom:20px;
font-size:26px;
}
h2 {
border-left:1px solid #000;
margin: 40px -29px 20px;
padding:25px 30px;
font-size:26px;
}
h3{
font-size:23px;
border-bottom:5px solid #e7e7e7;
padding:10px 0;
}
h4, h5, h6{
font-size:20px;
padding:8px 0;
}
h4{
border-bottom:5px dashed #eee;
}
/************************************
** 引用（blockquote）
************************************/
blockquote {
background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
border: 1px solid #FFFFFF;
margin: 1em 0;
padding: 20px 55px;
position: relative;
}
blockquote:before {
color: #C8C8C8;
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
blockquote:after {
bottom: 0;
color: #C8C8C8;
content: "”";
font-family: serif;
font-size: 600%;
line-height: 0;
position: absolute;
right: 0;
bottom: -16px;
}
/* Internet Explorer11のみに適用したい設定 */
@media screen and (min-width:0\0) {
*::-ms-backdrop, blockquote:before { left: -55px; }
*::-ms-backdrop, blockquote:after { right: -55px; }
}
/************************************
** テーブル（Table）
************************************/
table{
border-collapse: collapse;
}
th{
border: solid 1px #ccc;
background-color: #eee;
}
td{
border: solid 1px #ccc;
}
th, td{
padding: 3px 5px;
}
ol,
ul,
dl{
line-height:150%;
}
ol,
ul,
dl{
margin:30px 0;
}
ol ol,
ul ul,
dl dl{
margin:0;
}
/************************************
** その他（Other）
************************************/
pre {
background-color:#eee;
border:1px solid #ccc;
padding:7px;
overflow: auto;
}
以下のような表示になります。
注意点
editor-style.cssに、style.cssのスタイルを、そのまま貼り付けても、同じような表示にはなりません。
ビジュアルエディターで使えない書き方
というのも、style.cssなどでは、特定のエリアだけに反映するスタイルシートを書くために、以下のように書かれていることが多いからです。
#maim h2{
background-color: red;
}
上記は、#mainカラム内のH2見出しに反映されるように書かれています。
ただ、ビジュアルエディターには#mainカラムは存在していません。なので、スタイルが呼び出されず、上記のスタイルは反映されません。
ビジュアルエディター用の書き方
ビジュアルエディターに反映させるには、以下のように書く必要があります。
h2{
background-color: red;
}
もしくは以下のように、body#tinymce.wp-editor配下に適用する形で書いてもOKです。
body#tinymce.wp-editor h2{
background-color: red;
}
まとめ
このような感じで、以下の3手順で結構簡単にスタイルを変更することができます。
- functions.phpにadd_editor_style();と追記する
- editor-style.cssファイルを作成する
- editor-style.cssに好みのスタイルを書く
今回、ビジュアルエディターのカスタマイズをし、エディターの表示が、実際のテーマとほぼ同じになったことで、見やすさが全然違います。
記事を書くのにも、出来上がった状態を見ながら書けるので、改行の使い方なども完成品を想像しながら入れることができます。
というわけで「Wordpressデフォルトのビジュアルエディターが見づらくて使いづらい」といった場合には、おすすめのカスタマイズ方法です。
※Simplicity1.7.7のバージョンアップで、この設定は追加予定です。
度々コメントさせてもらっているケイタです。
先月から Simplicity を使ってブログを始めたのですが、「WordPressのビジュアルエディタ使えるよ」という記事を書いたので、すごく参考になります。
しかも、
※Simplicity1.7.7のバージョンアップで、この設定は追加予定です。
とのことで、本当素晴らしいですね…。