WordPressでビジュアルエディタの見出しをテーマの見出しと揃える方法
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
短縮URL:
COMMENT