今回、クライアント様から「WordPressエディタ入力得のデフォルトフォントサイズを大きめのものに変更、サイトに反映されるようにしたい (過去分のフォントサイズも変更されるのはOK) 」
とご相談をいただきました。
以下、WordPressデフォルトフォントサイズを変更するために必要な手順と参考情報をまとめました。
目次
①: editor-style.cssで、WordPress管理画面エディタにスタイルを適用させる
editor_style.cssの役割と効果
まず、下サイトの事例を参考にしました。
wordpressサイト立ち上げの覚書 その③ 投稿の編集 | 株式会社マグノリア
上サイトでは、functions.phpでeditor_style.cssを読み込み、editor_style.cssを作成。デフォルトフォントサイズの変更に成功しているようです。
しかし、この方法では確かにエディタでの初期選択フォントサイズは18pxになるが、実際のフォントサイズとしては反映されないよう。
エディタースタイルは、WordPressのエディタ内で適用させるCSSのことで、該当するCSSファイルを用意して、指定することで適用されるようになります
引用: WordPressのエディタ内でもCSSを反映させるエディタースタイルの適用方法 | オウンドメディア | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
つまり、editor_style.cssの役割としては、あくまでWordPress管理画面上のエディタ内での見た目を整えるのみ。
サイトのフロント側、訪問者に見える方では反映されないということですね。
まず、エディタ上でのデフォルトフォントサイズ設定を変更していきます。
そのために、このeditor_style.cssを変更していきます。
参考: Editor Style WordPress Codex 日本語版
WordPressの記事作成画面で、ビジュアルエディタを使用しているときに、できるだけ実際のスタイルシートが反映された表示にしたいため
参考: 【editor-style.css】が反映されない場合 | Web技術Tips | ホームページ制作のDOE【横浜】 ～手を抜かず最大のパフォーマンス～
editor-style.cssを有効化するには、functions.phpにONするための記述が必要
そもそもeditor-style.cssを有効化するには、functions.phpにONするための記述が必要です。
add_editor_style("editor-style.css");
【editor-style.css】が反映されない場合 | Web技術Tips | ホームページ制作のDOE【横浜】 ～手を抜かず最大のパフォーマンス～
ご自身のテーマfunctions.phpに上記記述があるか確認。ない場合には追記してください。
tinyMCEプラグインを導入している場合、tinyMCEについてのeditor-style.cssを変更することでエディタの初期フォントサイズを変更できた
WordPressプラグインTinyMCE “Advanced Editor Tools (previously TinyMCE Advanced)” というエディタ拡張プラグインがあります。
tinyMCEプラグインを導入している場合、こちらのtinyMCEについてのeditor-style.cssが優先して適用されます。
こちらのeditor-style.cssを変更することでエディタ内の初期フォントサイズを変更できました。
また、購入したテーマの場合、editor-style.cssがテーマファイル内に内蔵されていることがあります。
たとえば私が編集した” 旧STORKテーマ (jstork) “の場合
themes/jstork/library/css/editor-style.css にありました。
クラス名から推測できるとおり、下記はエディタ画面、Tiny MCE入力時の本文フォントサイズを指定しています。
.mce-content-body p {
margin-bottom: 2em;
line-height: 1.75;
font-size: 18px; /* この font-size 指定を追加 */
}
子テーマを作成して、子テーマでeditor-style.cssをオーバーライド
実際にはテーマでの変更は子テーマを作成して、子テーマ内に editor-style.css を作成。
オーバーライドすることを推奨します。
子テーマに最低限必要な構成・wpファイル
子テーマは、少なくとも 1 つのディレクトリ(子テーマディレクトリ)と、2 つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。
- 子テーマディレクトリ
- style.css
- functions.php
スタイルシート以外を変更したい場合も、子テーマは親テーマのすべてのファイルを上書きできます。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。たとえば、サイトヘッダーの PHP コードを変更するには、子テーマディレクトリに header.php を置けば、親テーマの header.php の代わりにそのファイルが使用されます。
以上引用: 子テーマ WordPress Codex 日本語版
style.css と functions.php 以外のファイルは、基本的に「親テーマ」 → 「子テーマ」の順で読み込みにいき、子テーマに親と同じファイルが存在していれば、子テーマのファイルが使われる。
子テーマに必要なファイルがなければ、親テーマのファイルが使われる。 （なので、親テーマのファイルを子テーマにコピペする必要がある。空ファイルを子テーマに置くと、空ファイルがつかわれしまう。）
WordPress 子テーマの作り方としくみ | AgoHack
子テーマの作り方参考: 「10 分で終わらせてくるっ！」WordPress 子テーマの作り方を 2 ステップで簡単解説！
なお、子テーマのディレクトリ名は「〇〇-child]というように、親テーマ名 に-child という名前をつけるのが推奨されているようです。(必須ではない)
必須である子テーマディレクトリ、style.css, functions.php の 3 つを用意し、さらにカスタマイズが必要なファイルを親テーマと同じ名前で、子テーマディレクトリ内同じ相対位置に配置します。
子テーマをアップロードし、有効化
zip 圧縮して、wp 管理画面 > 外観 > テーマ > 新しいテーマを追加 > テーマのアップロード
で圧縮した zip 子テーマをアップロードし、「今すぐインストール]選択。場合によっては時間がかかるので暫く待つ。
子テーマを「有効化」をクリックして、完成です。
カスタマイズ > 追加CSSの設定コピーを忘れないように
子テーマを作るとき、事前に WP 管理画面 > カスタマイズより”追加 CSS”の部分をコピペして保存しておきましょう。この追加 CSS はあくまで親テーマでのみ保存されているので、子テーマを有効化した際には引き継がれません。
保存しておいた親テーマの追加 CSS を、子テーマを有効化した後に追加 CSS にペーストし、移行させます。
追加 CSS のコピペを忘れた際は、一度親テーマに戻して追加 CSS を取得する。追加 CSS ファイルの設定内容の保存先は DB なので、親テーマに戻してからの方が再取得しやすいです。
参考: WordPress で追加 CSS はどこに保存されているのか？ │ Tech Tokyo Bay
②: サイトフロント側に変更したデフォルトフォントサイズを適用させる
しかし、上述のとおり、このままではエディタ上でフォントサイズが変わるのみ。公開サイトには反映されません。
そのため、テーマ側CSSで出力される本文フォントサイズを変更する必要があります。
私の場合、テーマのstyle.css の GENERAL STYLES 部、body の設定が本文フォントサイズの設定となっていました。（旧STORKテーマの場合）
カスタマイズ > 追加CSSで本文フォントサイズを変更
WP 管理画面 > 外観 > カスタマイズ > 追加 CSS でフォントサイズ CSS 設定を追加
body {
font-size: 18px;
}
とCSS追加して、サイトフロント画面でのフォントサイズをeditor-style.cssで設定したデフォルトフォントサイズに合わせる形で反映させます。
以上、
- エディタ上でのデフォルトフォントサイズをeditor_style.cssで変更
- 実際に出力されるサイトフロント画面のフォントサイズをテーマ側CSSで変更（追加CSS）
の2ステップを踏むことで、無事にWordPressデフォルトフォントサイズを変更・反映させることができました！
訪問者に見えるサイトフロント部分に反映させるには、テーマのデフォルトフォントサイズを追加CSSより変更させる必要がある、ということですね！
Tiny MCE プラグインファイルの content.css から、カスタム CSS を読み込む？ (未検証)
下記は未検証ですが、調べるうちに出てきた情報をメモ形式で残しておきます。
javascript TinyMCE のデフォルトのフォントサイズ 機械翻訳なので変な日本語
どのように tinymce のデフォルトのフォントサイズを変更するには? 機械翻訳なので変な日本語
TinyMCE のデフォルトフォントタイプ/サイズを変更する 機械翻訳
jquery — tinymce でデフォルトのフォントサイズを変更する方法は？ 機械翻訳。
以上です！WordPressご活用の皆様のお役に立てたら幸いです。
Leave a Reply