WordPressのプラグイン「CKEditor For WordPress」でエディター画面の見た目を実際のブログに近づける方法

84-1
 
このブログ記事は、WordPressのプラグイン「CKEditor」で書いてます。
 
改行問題が回避できるのでありがたいのですが、一つだけ困ったことがありました。
 
「自分で設定したCSS設定がエディター画面では見えない」ことです。
 
例えば、赤枠で囲んだ部分はCSSで変更してますが、普通の文字と区別が付きません。 
どうしよう。。。

スポンサーリンク

設定がありました

調べてみると設定がありました!
 
 
「メニュー – CKEditor – 詳細設定」をクリックして、CSS Optionsの「Editor CSS」でUse theme cssを選択する。 
84-2
これで完了です!
 
 
これで、ブログに設定しているテーマのstyle.cssファイルがエディター画面で読み込まれるようになります。
 
スポンサーリンク

独自CSSはテーマのstyle.cssに設定しておく

このブログのテーマは「Responsive」を使ってます。
 
ブログ独自のCSS設定は、このテーマの
/[ブログのパス]/wp-content/themes/responsive/style.css
に直接書いてますので、この記事の設定をするだけで見た目が実際のブログに近づきます。
 
 
赤枠の部分が良い感じに変わりましたね。 
84-3
 

2013/06/03追記:コピペ後にソースを確認しましょう

この設定は、見た目が変わってとても良い感じなのですが、エディター上で「文字をコピー&ペースト」すると、変なスタイル設定が増える場合があります。
 
ソースを見ると、こんな感じ。
84-4
 
 
文字化けしてますが、
style=”font-family: (中略) normal; line-height: 21px;”
というstyle設定が勝手に追加されています。
 
 
chrome(バージョン 27.0.1453.94 m)で発生。
ちなみに、IE10で試すとまったく問題ありませんでした。
 
 
環境によるかも知れませんが、文字をコピーした後、一度はソースを確認した方が良いですね。
 
chromeでも問題なくコピーできる設定があれば良いのですが。。。
 
[2018/04/14追記]
現在は「TinyMCE Advanced」を使ってます。
こちらも使いやすいですよ。
 

まとめ

見た目が実際のブログに近いと、記事を書くときに楽になるだけでなく、書き終わった後、プレビュー画面での確認も楽になりますよ。
 
一度お試しくださいね。
 
カテゴリー: WordPress タグ: , , ,
スポンサーリンク

■前後の記事です

コメントを残す

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