アフィーロード

アフィリエイトがあるじゃないか!

*

ビジュアルエディタのレイアウトをブログと同じにする

    2015/08/29

記事を書いてはプレビュー、また書いてはプレビュー・・・・・

少々几帳面なのか、文章の折り返しや、画像の見え方などが気になって、そのつどプレビューで確認していますw

ビジュアルエディタとブログのデザインが異なるせいで、手間のかかる事をしないといけない訳なんですよね。

原因は、ビジュアルエディタとブログの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;
}

まとめ

ビジュアルエディタの見た目がブログと同じになったので、プレビューする回数も減って、ストレスも軽減されました。

今後も作業の効率化を上げる方法を、どんどん取り入れていきたいですね。

しかし作業効率ばかり上がって、記事が上がらない不思議(笑)

 - WordPress

Message

メールアドレスが公開されることはありません。

  関連記事

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

挿入画像のデフォルト値を変更して無駄な手間を省こう

WordPressで画像を挿入する時の話しですが、気が付いたら毎度ブログに表示す …

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることに …

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …

AddQuicktagプラグインでタグ打ちをとことん手抜きしよう

TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …