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行を追加します。

既にeditor-style.cssがある場合は上記の手順は不要ですよ!

 

まずstyle.cssに記述したコードで、記事のデザインに関係あるところだけコピーし、editor-style.cssにペーストします。

メニューとか、サイドバーとかのデザインはビジュアルエディタには関係ないので省いてください。

コードの修正

style.cssからそのままコピペした状態だと、

という状態になっていると思います。(Simplicityだと.article h2)

ビジュアルエディタにはpostというクラス名の要素はありません。

というわけで、クラス名を削除し単純にh2としてしまいましょう。

この状態でOKです。

ビジュアルエディタのフォントを変更する方法

こちらの記事で、ブログ全体のフォントを変更しました。

ビジュアルエディタにも適用させるには、もうひと手間必要です。

 

上記の記事をご覧いただくと手順が書いてあるのですが、add-header.phpでフォントを読み込むようにしています。
けれども、ビジュアルエディタはadd-header.phpを読み込む仕様ではありません。

editor-style.cssにて読み込まないと、思い通りのフォントが表示されないんです!

仮に読み込んだとしても、単純にfont-familyをbodyで囲うだけだとフォントが変更になりません。
ビジュアルエディタは.mceContentBodyというクラス名が付いているんです。

難しいこと分からない方はサクッと以下のコードをeditor-style.cssにコピペしてください。
(まるっとコピペするとフォントはこのサイトにも適用されているフォント、Rounded M+ 1cとなります)

あとがき

ビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることでコードの閉じタグの漏れを防止したり、ヨメレバ・カエレバなどのブログパーツも伸長にならないといったメリットがあります。

皆さんもぜひ適用して、良いブログライフをお送りください!