WordPressの投稿画面（ビジュアルエディタ）はデフォルトではフォントが明朝体になっています。このままでは記事を公開した際の画面とフォントが違うため、作成した記事をプレビューで確認した時に見え方が違ってしまいちょっと違和感を感じてしまいます。今回は、WordPressの投稿画面のフォントを変更する方法をご紹介します。
（WordPressテーマ「Simplicity2」ではあらかじめフォントが変更されているため以下の設定は必要ありません）
１．スタイルシートファイル「editor-style.css」を作成する。
（１）テキストエディタに下記のHTMLコードをコピーします。
[su_note note_color=”#f6f6f6″]
/* フォントを指定するクラス */
body.mceContentBody {
font: 14px/1.6 “游ゴシック”, YuGothic, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Verdana, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif; overflow-wrap: break-word; word-break: normal;
}
.editor-area a {
color: #339933;
text-decoration: underline;
}
.editor-area h3 {
padding: 3px 13px 6px;
font-size: 116%;
color: #666666;
margin-bottom: 1em;
border-bottom: 1px solid #CCCCCC;
}
[/su_note]
※このスタイルシートでフォントや行間などを指定できます。
（２）コピーしたら、ファイル名を「editor-style.css」にし、ファイルの種類を「CSSファイル（*.css）」、文字コードを「UTF-8」にして保存します。
２．「editor-style.css」をWordPressのテーマフォルダ内にアップロード。
FTPソフトを使って、作成した「editor-style.css」をWordPressのテーマフォルダの中にアップロードします。
[su_note note_color=”#f6f6f6″]
WordPressインストールディレクトリ ＞ 「wp-content」 ＞ 「themes」 ＞ 「使用中のWordPressテーマ」フォルダ
[/su_note]
３．「function.php」にビジュアルエディタのフォント変更に関する記述をする。
（１）WordPressの管理画面に戻って「function.php」を開きます。
「外観」 ＞ 「テーマの編集」 ＞ 「function.php」
（２）「function.php」の「?>」より上に下記のコードを記載します。
[su_note note_color=”#f6f6f6″]
//—————————————————————————
// ビジュアルエディタのフォント変更
//—————————————————————————
add_editor_style(‘editor-style.css’);
function custom_editor_settings( $initArray ){
$initArray[‘body_class’] = ‘editor-area’; //オリジナルのクラスを設定する
return $initArray;
}
add_filter( ‘tiny_mce_before_init’, ‘custom_editor_settings’ );
[/su_note]
※「function.php」の最後に「?>」が記述されていない場合は一番下にのコードを貼り付けます。
これで投稿画面のフォントが変わっているはずです。ビジュアルエディタを開いて確かめてみてください。
以上でWordPressの投稿画面のフォントを変更する作業は終了です。
コメント