Web制作00B!0311WordPressの投稿画面に商品リンクを貼り付けたりすると、デザインが崩れちゃいますよね。見出しも、デフォルトのそっけないデザインでテンションが上がりません。エディタ画面も、ブログのデザインと同じようになったらいいなって思いませんか?こんにちは、とみーです。この間、友人宅にてブログ記事を書いていたら私の投稿画面を見た友人から「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にペーストします。メニューとか、サイドバーとかのデザインはビジュアルエディタには関係ないので省いてください。}という状態になっていると思います。h2)ビジュアルエディタにはpostというクラス名の要素はありません。いうわけで、クラス名を削除し単純にh2としてしまいましょう。}この状態でOKです。ビジュアルエディタのフォントを変更する方法こちらの記事で、ブログ全体のフォントを変更しました。日本語】ビジュアルエディタにも適用させるには、もうひと手間必要です。上記の記事をご覧いただくと手順が書いてあるのですが、add-header.phpでフォントを読み込むようにしています。ビジュアルエディタはadd-header.phpを読み込む仕様ではありません。editor-style.cssにて読み込まないと、思い通りのフォントが表示されないんです!仮に読み込んだとしても、単純にfont-familyをbodyで囲うだけだとフォントが変更になりません。ビジュアルエディタは.mceContentBodyというクラス名が付いているんです。難しいこと分からない方はサクッと以下のコードをeditor-style.cssにコピペしてください。あとがきビジュアルエディタのスタイルは自己満足なのではないか・・・と思ったこともありましたが、同じスタイルを適用させることでコードの閉じタグの漏れを防止ヨメレバ・カエレバなどのブログパーツも伸長にならないといったメリットがあります。引用文のスタイル、もっと可愛くてもいいんじゃない?【CSSデザインサンプル】こんにちは、とみーです。...Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法こんにちは、とみーです。...WordPressテーマ「ADELLE」でアイキャッチ画像を記事先頭に表示させる方法こんにちは、とみーです。アイキャッチ画像を記事先頭に表示させたいんです。...WordPressテーマ「ADELLE」をカスタマイズしてみたこんにちは、とみーです。...コピペで出来る、クリックで要素の表示非表示を切り替えるHTML&CSS【WordPress対応版】こんにちは、とみーです。12:15みうさん初めまして。コメントありがとうございます。反映されない・・・うーん、何でしょう。原因を特定するにあたりいくつか質問させてください。02:42とみーさん初めまして、とみーさんの記事を読み、私もビジュアルエディターで投稿画面と同じ表示をしようと頑張っています。反映されず途方に暮れています・・・また、もし分かればで良いのですが、ビジュアルエディターで赤太字などの加工をした際にも投稿画面と同じように表示させる方法があれば教えて頂けると助かります。お忙しいとは思いますが、是非よろしくお願いします。20:28keiichiさん、初めまして。コメントありがとうございます。赤太字にする場合ですが、ビジュアルエディタに標準で搭載されているWordみたいなツールを使えばできるはずですが・・・。22:29返信有難うございます。とみーさんの仰る通りで、例えば、いま装飾したいのが、文字のアンダーラインマーカーなどです。60%);}このようにアンダーラインマーカーを使う為のCSSを入れます。次に、Luxeritas子テーマのfunctions.php内にadd_editor_style();この一文を入れます。反映されないという事です。実際の投稿プレビューでは反映されています。ブラウザの相性だったようです。21:14keiichiさんそうだったのですね。linear-gradientがミソです。safariでは対応していない要素のため、表示されなかったのだと思います。よろしければこちらを参考にしてみてください。14:52お久しぶりです。^;)あれからテーマを【JIN】に変えたりしましたが、結局【Luxeritas】に戻ってきました。反映しないという現象に当たりました。^)因みに参考にしたサイトはこちらです。http://ebookbrain.net/css-not-working-in-chrome-and-safari/私と同じようにキャッシュが原因で表示される方も多いかもしれませんので、一番参考にさせて頂いたとみーさんの記事にコメントを残させて頂きました。21:01ご無沙汰しております。参考URLありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。増えていく充電器...100均グッズでまとめてすっきりコンパクトに!窓枠を塗装してみた。使い心地も抜群でコスパ最強!【AviUtl】一瞬強く光る文字(発光の使い方サンプル)【結婚式のムービーで使えるテクニック】サーバーお借りしています。