viewsビジュアルエディタにスタイルワードプレスにおいて、デフォルトではビジュアルエディタでは表示用のCSSが適用されません。そのため、字体(font-family)も見慣れない明朝体になってしまったり、どこか気持ち悪いことになります。表示用のスタイルが把握しにくいため書きづらさもあります。そんな問題を解決するには実際の表示スタイルを適用させればOKです。以下でその方法を解説していきます。エディタ用のCSSを作成するまず、エディタに反映させる用の新しいCSSファイルを作成します。今回はeditor-style.cssという名前にしていますが決まりはありません。‘style.css’;”で表示用のスタイルシートを読み込んでいます。これでほぼ表示用と同じように反映されます。「見出し」タグなどにおいてはワードプレスデフォルトのスタイルが適用されてしまうので、editor-style.cssに直接記述します。記述例はh2のスタイルを定義しています。作成したエディタ用CSSをサーバーにアップするでは、作成したeditor-style.cssをサーバーにFTPなどでアップします。アップする場所は、テーマフォルダ直下に配置します。テーマフォルダ直下とはindex.phpやpage.phpなどテンプレートファイルがある場所です。functions.phpにエディタ用のCSSを読み込むコードを記述する最後に、functions.phpにエディタ用のCSSとなる「style.css」を読み込むためのコードを記述します。以下のコードを記述です。functions.phpの中の場所はどこでも構いません。add_editor_style('editor-style.css');以上で、ビジュアルエディタに実際の表示とほぼ同じスタイルを反映させることができます。反映されない場合うまく反映されない場合は以下の原因である可能性が高いと考えられます。‘style.css’;のルートパスが間違っていないか、またファイルがそれどうりにあるか確認してください。キャッシュが残っているエディタのスタイルはキャッシュを残しやすく、キャッシュがクリアされていない可能性があります。スーパーリロードを行うか、以下のコードをfuntion.phpへ記述ください。$mce_init;}add_filter('tiny_mce_before_init','extend_tiny_mce_before_init');まとめ以上、ビジュアルエディタのスタイルを表示用に反映する方法でした。ワードプレスサイトを納品する際などクライアントの使いやすさを考慮してこのあたりも調整しておくことが望ましいでしょう。ご質問などあればお気軽にコメントください。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。WING(コノハウイング)を使っていますよ。Reserved.ページの先頭に戻る。