WordPressのビジュアルエディタにH2やH3のデザインを適用させる方法

2017-01-25Web制作

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();
既にeditor-style.cssがある場合は上記の手順は不要ですよ!

 

まず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"; }

ビジュアルエディタにデザインを適用する方法 あとがき

ビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることで

コードの閉じタグの漏れを防止
ヨメレバ・カエレバなどのブログパーツも伸長にならない

といったメリットがあります。

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

関連記事CSSコピペでカエレバ・ヨメレバをカスタマイズ【シンプルなデザインサンプル】

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます