WordPressでビジュアルエディタの見出しをテーマの見出しと揃える方法

wordpress-logo-hoz-rgb
このエントリーをはてなブックマークに追加
PR

ブログの見た目に出来るだけ近い状態でビジュアルエディタが使えたほうが、実際に表示される時との違いが少なくて言いに決まっているのですが、ビジュアルエディタはテーマのCSSを読み込んでくれては居ないようです(pre等の一部を除いて)

とくに重要なのはPタグ、HタグのCSSかと思います
利用しているテーマ用のエディタ向けCSSの用意とテーマfunctions.phpに書き加えるだけで呼び出せるようです
横幅もフォントも指定できるので実際のWEBサイトと同じ表示に出来ます

※作業前にテーマのバックアップを取っておきましょう

 

ビジュアルエディタ用のCSSを用意する

CSS名は何でもOKです、テーマフォルダ内に作成します
今回はedit.cssとします

CSSの内容は直接的なCSSの書き方に変えてある必要があります

/*テーマのCSS*/
.single h2 {
 font-size:20;
 color:#fff;
}
 
 
/*ビジュアルエディタ用に*/
h2 {
 font-size:20;
 color:#fff;
}

クラス名やID名で指定せずに直接タグを指定してやりましょう
Pタグやaタグも同様に

あとはbodyにフォントやマージン、横幅を指定できます

使っているテーマのどのCSSがそうなのかわかりにくい場合は
Chromeのデベロッパーツール(F12)やIEのデベロッパーツール(F12)でHTMLから該当のCSSを簡単に確認することが出来ます

 

 

functions.phpにコードを足して用意したCSSを読み込ませる

テーマフォルダにあるfunctions.phpに次のコードを入れます

<?php

PHPタグの間に入れてください

?>

 

追加するコード

// ビジュアルエディタ用CSS
add_editor_style('edit.css');
function custom_editor_settings( $initArray ) {
 $initArray['body_class'] = 'editor-area';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

1行目のedit.cssがビジュアルエディタ用に追加したものです

 

 

参考ページ▼
http://unsolublesugar.com/20120826/092812/

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)