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でも問題なくコピーできる設定があれば良いのですが。。。
 

まとめ

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


カテゴリー: WordPress タグ: , , ,

■前後の記事です

コメントを残す

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