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"; }ビジュアルエディタにデザインを適用する方法 あとがき
ビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることで
- コードの閉じタグの漏れを防止
- ヨメレバ・カエレバなどのブログパーツも伸長にならない
といったメリットがあります。
皆さんもぜひ適用して、良いブログライフをお送りくださいね！
コメント
はじめまして。
Luxeritasで初めてのホームページを作成中なのです（HPビルダー７のころちょっとだけやってたことがある程度）が、
分からないことだらけでお聞きしたいことがありコメント欄ですが投稿させていただきます。
外観→カスタマイズからカラム数を選択できると思うのですが、
TOPページのみ1カラム その他固定ページは2カラムに設定したいのです。それができません。
そしてTOPページの投稿は固定ページからではないんでしょうか？
サイドバーの選択画面にデフォルトかサイトマップを選ぶことしかできなくて
どこから作成したらいいのかわからないのです。
また、通常のcss？多分私の知識がとても古いものだと思われますが（汗）
h2、h3の修飾できるcssは、現状のものを修正ではなく、新たにスタイルシートの追加をすればいいのでしょうか？
ほんとにすみません。
なんとか自力でHPを作成したくこんな投稿をさせていただきました。
よろしくお願いいたします。
何度もすみません。
親cssの必要かな？と思われる部分を全文子cssにコピペして修正ができました。
そうしているうちに、TOP画面も書ける場所を見つけることができました＾＾
あとは、かわいいリボンのナビを再現したいのですが、、、
もう少し頑張ってみます！
Msaさん、初めまして。
Luxeritas、出来ることが多いのは嬉しいのですが、どこから設定していいのか分からなくなってしまいますよね。
サイト拝見しまして、TOPページの1カラム＆その他固定ページは2カラムの問題と、TOPを固定ページにする問題は無事解決されたようですね。
スタイルシートも、親CSSから子CSSにコピペして修正という方法でOKです！
問題のリボンのナビの再現ですがこちらのページを参考にしていただければと思います。
http://0edition.net/archives/2489
そのCSSに加えて、カスタマイザーの設定ではコンテナの最大幅を1020px、コンテンツ領域のパディングを各20px、サイドバーウィジェットの幅を320pxで最適化してます。
pxはご自身のサイトに合わせて変更していただいて、色々試してみてください！
とみーさん
やっとできました～＾＾
修正したら壊れてしまい、テーマアップロードからやり直しました！
ありがとうございました！
とてもかわいいリボンでしたので、色違いさせていただいちゃいました！
微調整は明日！
そして、なのですが。。。
見出しスタイルの変更なのですが、
コピペで、ｂｇにアップロード画像のURLを入れたのですが、h2から３つとも繁栄されません（泣）
他に修正場所（HTML）とかもしあれば教えていただけるとありがたいです。
おめでとうございますー！
さてさて、見出しですが。
H2が見当たらなかったので、H3の話になりますけれども、H3にはh1.pngというファイルを指定されていますよね。
ファイルはどちらにアップロードされていますか？
h1.pngだけですと、style.cssと同じフォルダにあることが前提です。
もしWordPress管理画面のメディアからアップロードされているようであれば、(h1.png)の箇所を(http://～h1.png)にすることで解決できるかと思います。
他の修正箇所ですが、私が気になるところはリボンの微調整くらいでしょうか・・・。
Msaさん的にもっと「ここをこうしたい！」という箇所をおっしゃっていただければ、お力になりますよ。（実現可能かどうかは分かりませんが・・・）
お返事ありがとうございます♪
記事１に対して、カスタマイズ９くらい時間がかかってる帰宅後です（笑）
リボンの微調整頑張ってみましたよ～ これが私の限界かな。。。
見出しも無事に表示されるようになりました！ありがとうございます！
そして、tableのcss 色を入れた覚えがあるのですが、その場所がわからなくなってしまって探しています。
ちょっと暗いので明るくしたいなぁと思っています。
このフォントいいですね～＾＾
可愛くって、楽しくなりますね♪
HPはまだまだ、フロントPにスライダー入れたいし、新着情報や、
GOOGLEMAPも作らないとでやまずみです 汗
連日Tommyさんの画面をみさせていただいてますが、
明日も伺いま～～す！
わかりますー！
カスタマイズって難しいんですが楽しくて止まらないんですよね！
フォントは私もお気に入りです。
リボン、バッチリだと思います！
見出しも見やすくて分かりやすい、且つ素敵な見出しですね♡
私は全体の雰囲気、落ち着いた感じでとても好きですよ！
テーブルの色ですが、CSSを覗いたら/luxeritas/style.min.cssに入ってました。
min.cssは改行されてなくて非常に見づらいので、.post thで検索かけると良いと思います。
あ～そんなところにあったのですね 汗
tableタグ探して放浪中に見つけて直してしまったのかもしれません！
親は直さないは鉄則なんだと思っていたのですが。。ありがとうございます♪
それに、検索かけられるなんて知らなかった～～～ぁ！
今から修正して、１ページ作って寝ます～＾＾
ITだけじゃなくて他のも読ませてもらってま～～す！
また来ま～す！
色々とお役に立ててるようでよかったです！
お仕事後のサイト作成、お疲れと思いますが頑張ってくださいね。
はじめまして。
とても可愛いスキンですね。
是非使わせてください。
さて、「女子におすすめ！ CSSコピペで出来る可愛い見出しデザイン」の見出しを使わせて頂いて、
style.cssに記述しました。
次にビジュアルエディタでも見出しを反映させたいと思い、同じコードをeditor-style.cssに記述したのですが、反映されません。
プレビューでみると、かわいい見出しが反映されています。
ちなみに、上記の文字はビジュアルエディタでも反映されています。
お忙しい中申し訳ありません。
何がおかしいのでしょうか？
よろしくお願いいたします。