1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのビジュアルエディタにCSSを適用する方法

WordPressのビジュアルエディタにCSSを適用する方法

WordPressのビジュアルエディタにスタイルシートを適用してデザインを変更する方法を解説。公開後のページとある程度同じスタイルを適用しておけば、プレビューしなくても公開後のイメージができるので楽です。

  • 2015/9/7
  • 2012/4/16

WordPressでブログを書いていると、「書いた時の改行の位置」と「記事が公開された後の改行の位置」がずれてしまい、意図しない場所で改行されているという事が発生します。

そういった時には、投稿画面のビジュアルエディターにCSSを適用して実際のページの「横幅」と「文字の大きさ」だけでも合わせて記事を書くと、改行のタイミングが分かりやすいので便利です。

ビジュアルエディターにCSSを適用する方法

  1. ビジュアルエディターのスタイルを変更するには、「テーマの編集」 で「editor-style.css(ビジュアルエディターのスタイルシート)を修正します。
    もしeditor-style.cssが無い場合は、新しくファイルを作ってテーマフォルダにアップロードします。
  2. 次にfunction.php内に以下のコードを追加します。
       
    add_editor_style('editor-style.css');
    
  3. ビジュアルエディター内のコンテンツの横幅と文字の大きさを修正するには、以下のようにスタイルを定義します。
    .mceContentBody{
        width:500px;
        font-size:14px;
    }
    

CSSファイルに設定したスタイルはビジュアルエディターのみで適用されます。HTMLエディターの場合はスタイルシートは適用されません。

ビジュアルエディターで改行をする方法

ビジュアルエディターで記事を書く場合、Enterを押して改行すると<p>で囲まれた段落になってしまいます。
段落のスタイルにもよりますが、文章の上下に不自然な空白ができてしまうのが嫌だという方もいると思います。

そういった時にはShiftを押しながらEnterを押すと、<br />の改行タグが挿入されるようになりますので、文章の上下に空白は出来ません。

改行の位置や文章の上下の空白の有無で、記事そのものの読みやすさが変化します。
できるだけ読みやすい記事にするように心がけましょう。

「役にたった」と思ったらシェアお願いします