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"; }ビジュアルエディタにデザインを適用する方法 あとがき
ビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることで
- コードの閉じタグの漏れを防止
- ヨメレバ・カエレバなどのブログパーツも伸長にならない
といったメリットがあります。
皆さんもぜひ適用して、良いブログライフをお送りくださいね！
コメント
みうさん
初めまして。コメントありがとうございます。
反映されない・・・うーん、何でしょう。
原因を特定するにあたりいくつか質問させてください。
1．お使いのテーマは何ですか？
2．子テーマを使用している場合、editor-style.cssは子テーマのフォルダの中にありますか？
3．editor-style.cssでは.〇〇 h2{}の.〇〇は削除されてますか？
とみーさん初めまして、
とみーさんの記事を読み、私もビジュアルエディターで投稿画面と同じ表示をしようと頑張っています。
しかし、なぜか反映されず途方に暮れています・・・
また、もし分かればで良いのですが、ビジュアルエディターで赤太字などの加工をした際にも投稿画面と同じように表示させる方法があれば教えて頂けると助かります。
大変お忙しいとは思いますが、是非よろしくお願いします。
keiichiさん、初めまして。コメントありがとうございます。
赤太字にする場合ですが、ビジュアルエディタに標準で搭載されているWordみたいなツールを使えばできるはずですが・・・。
それ以外の場合ですと、style.cssに
.red{color:#ff0000; font-weight:bold;}
と記述して、投稿画面のテキストエディタ（ビジュアルエディタではない）に
<span class="red">この間の文字が赤太字になります</span>
このような感じで囲むと適用されると思いますよ！
返信有難うございます。
とみーさんの仰る通りで、例えば、いま装飾したいのが、文字のアンダーラインマーカーなどです。
【例】Luxeritas子テーマのstyl.css内
.marker_yellow_futo {
background: linear-gradient(transparent 0%, #ffff66 0%);
}
.marker_yellow_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
このようにアンダーラインマーカーを使う為のCSSを入れます。
次に、Luxeritas子テーマのfunctions.php内に
add_editor_style();
この一文を入れます。
そして、最後にビジュアルエディターで
アンダーラインマーカー（太）
アンダーラインマーカー（細）
と入力しても、ビジュアルエディター で反映されないという事です。実際の投稿プレビューでは反映されています。
反映されない理由を考え、キャッシュの消去など、分かる範囲の事はやって見たのですが、何かアドバイスがあれば頂けると幸いです（ ; ; ）
とみーさん、解決しました！
私はMacのSafariブラウザーを使っているのですが、Google Chromeブラウザーではちゃんとビジュアルエディター で反映されていました。
どうやらブラウザの相性だったようです。お騒がせしました。
keiichiさん
そうだったのですね。
恐らく、linear-gradientがミソです。
safariでは対応していない要素のため、表示されなかったのだと思います。
よろしければこちらを参考にしてみてください。
http://www.htmq.com/css3/linear-gradient.shtml
お久しぶりです。
自分でコメントしておいてすっかり忘れておりました(^ ^;)
あれからテーマを【JIN】に変えたりしましたが、結局【Luxeritas】に戻ってきました。
そして、前回コメントした内容と同じく、キャッシュのせいでビジュアルエディタ に反映しないという現象に当たりました。
因みに今回はchromeでも反映されなかったのですが、
chromeの場合はブラウザ設定>>その他のツール>>観覧履歴を消去>>キャッシュされた画像とファイルにだけチェックを入れる
で無事に反映されました(^ ^)
因みに参考にしたサイトはこちらです。
http://ebookbrain.net/css-not-working-in-chrome-and-safari/
私と同じようにキャッシュが原因で表示される方も多いかもしれませんので、一番参考にさせて頂いたとみーさんの記事にコメントを残させて頂きました。
ご無沙汰しております。
参考URLありがとうございます。困っている方の力になれますように！