ビジュアルエディタのレイアウトをブログと同じにする
2015/08/29
記事を書いてはプレビュー、また書いてはプレビュー・・・・・
少々几帳面なのか、文章の折り返しや、画像の見え方などが気になって、そのつどプレビューで確認していますｗ
ビジュアルエディタとブログのデザインが異なるせいで、手間のかかる事をしないといけない訳なんですよね。
原因は、ビジュアルエディタとブログのHTMLは別なので、スタイルシートも共通していないからなんです。
ここは何とかして見た目の共通化を図りたいと思います。
目次
functions.phpにコードを追加する
STINGER5は、functions.php内の下記のコードで、エディタにスタイルを適用できるようになっています。
// 管理画面にオリジナルのスタイルを適用
add_editor_style("style.css"); // メインのCSS
add_editor_style('editor-style.css'); // これは入れておこう
if ( ! isset( $content_width ) ) $content_width = 580;
function custom_editor_settings( $initArray ){
$initArray['body_id'] = 'primary'; // id の場合はこれ
$initArray['body_class'] = 'post'; // class の場合はこれ
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
STINGER5だとコードの追加は必要ないのですが、別のテーマにも応用できるので解説します。
style.cssをエディタに追加する
style.cssをエディタにも適用するため、functions.phpに下記のコードを追加します。
add_editor_style("style.css") //CSSを読み込む
editor-style.cssをエディタに追加する
style.cssを適用しただけでは、body（記事の幅）など反映されない要素もあるので、editor-style.cssを追加して編集します。
子テーマに「editor-style.css」を追加してから編集を行うので、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！を参考にファイルを作成してください。
そして、editor-style.cssをエディタに適用するため、functions.phpに下記のコードを追加します。
add_editor_style('editor-style.css'); // エディタのCSSを読み込む
IDとクラス名を指定する
エディタにstyle.cssを適用しない場合などは、IDやクラスを使ってCSSを記述できます。
エディタを囲む<body>にIDもしくはクラスの名前を指定します。
ここで指定したIDかクラスを使って、editor-style.cssにCSSを書けます。
function custom_editor_settings( $initArray ) {
$initArray['body_id'] = 'primary'; // ID名を指定
$initArray['body_class'] = 'post'; // クラス名を指定
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
editor-style.cssを編集する
style.cssを読み込んでいる場合
ビジュアルエディタ内の幅を変えるには、editor-style.cssに下記のコードを記述します。
例.
.mceContentBody {
width:700px;
}
style.cssを読み込んでいない場合
少しでもエディタ編集の動作を軽くしたいなど、style.cssを読み込ませない場合は、IDかクラスを使って個別にスタイルを設定できます。
例.
.post p {
font-size: 20px;
}
まとめ
ビジュアルエディタの見た目がブログと同じになったので、プレビューする回数も減って、ストレスも軽減されました。
今後も作業の効率化を上げる方法を、どんどん取り入れていきたいですね。
しかし作業効率ばかり上がって、記事が上がらない不思議（笑）
関連記事
-
-
Google ChromeでWPの管理画面が崩れた時の対処方法
みなさん普段、WordPressの作業をどのブラウザでしていますか？ 私は、Fi …
-
-
「Table of Contents Plus」プラグインで目次を簡単に作成！
雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …
-
-
Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です！
解析ツールの定番Google Analytics（アナリティクス）を導入するとき …
-
-
WordPressのログインIDがバレるのをEdit Author Slugで防ぐ
ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …
-
-
変更不可能なWordPressのログインIDを変えてセキュリティアップする方法
ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …
-
-
WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！
そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …
-
-
AddQuicktagプラグインでタグ打ちをとことん手抜きしよう
TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …
-
-
挿入画像のデフォルト値を変更して無駄な手間を省こう
WordPressで画像を挿入する時の話しですが、気が付いたら毎度ブログに表示す …
-
-
WordPressで定番のメールフォーム用プラグイン「Contact Form 7」を導入する
ブログには、お問い合わせ用のメールフォームが必須ですよね。 記事の内容に関する問 …
-
-
Google Analytics Dashboard for WPを導入してWordPressで解析確認！エラーが出た時の対処方法あり
Google Analyticsでアクセスを確認したいけど、その度にログインする …