WordPressのビジュアルエディタにH2やH3のデザインを適用させる方法
WordPressの投稿画面に商品リンクを貼り付けたりすると、デザインが崩れちゃいますよね。見出しも、デフォルトのそっけないデザインでテンションが上がりません。
エディタ画面も、ブログのデザインと同じようになったらいいなって思いませんか？
こんにちは、とみーです。
この間、友人宅にてブログ記事を書いていたら私の投稿画面を見た友人から「H2やH3のデザイン、記事のと同じになってていいね！」と言われました。
調べればすぐやり方が出てくる上に簡単なので、みんな知ってるものかと思っていたのですが「あ、同じにするやり方、意外と知らない人いるんだ…」と感じたので記事にしておきます。
ブログとビジュアルエディタの見出しのスタイルを同じにする方法
style.cssからeditor-style.cssにコピペ
LuxeritasやSimplicityだと、style.cssと同じフォルダにeditor-style.cssがデフォルトで用意されています。
外観 → テーマの編集から確認してみてください。
ない場合はメモ帳でeditor-style.cssという名前のファイルを作って（中身は何も書かなくてOKです）、style.cssと同じフォルダにアップロードしましょう。
そしてfunctions.phpに次の1行を追加します。
add_editor_style();
まずstyle.cssに記述したコードで、記事のデザインに関係あるところだけコピーし、editor-style.cssにペーストします。
メニューとか、サイドバーとかのデザインはビジュアルエディタには関係ないので省いてください。
コードの修正
style.cssからそのままコピペした状態だと、
.post h2{ （内容） }という状態になっていると思います。（Simplicityだと.article h2）
ビジュアルエディタにはpostというクラス名の要素はありません。
というわけで、クラス名を削除し単純にh2としてしまいましょう。
h2{ （内容） }この状態でOKです。
ビジュアルエディタのフォントを変更する方法
こちらの記事で、ブログ全体のフォントを変更しました。
関連記事コピペで簡単！ ブログのフォントを可愛くオシャレなRounded M+ 1cに変更！【Google Fonts + 日本語】
ビジュアルエディタにも適用させるには、もうひと手間必要です。
上記の記事をご覧いただくと手順が書いてあるのですが、add-header.phpでフォントを読み込むようにしています。
けれども、ビジュアルエディタはadd-header.phpを読み込む仕様ではありません。
editor-style.cssにて読み込まないと、思い通りのフォントが表示されないんです！
仮に読み込んだとしても、単純にfont-familyをbodyで囲うだけだとフォントが変更になりません。
ビジュアルエディタは.mceContentBodyというクラス名が付いているんです。
難しいこと分からない方はサクッと以下のコードをeditor-style.cssにコピペしてください。
（まるっとコピペすると、フォントはこのサイトにも適用されているフォント「Rounded M+ 1c」となります）
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css); body.mceContentBody { font-family: "Rounded Mplus 1c"; }ビジュアルエディタにデザインを適用する方法 あとがき
ビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることで
- コードの閉じタグの漏れを防止
- ヨメレバ・カエレバなどのブログパーツも伸長にならない
といったメリットがあります。
皆さんもぜひ適用して、良いブログライフをお送りくださいね！