WordPress

editor-style.cssを使えばビジュアルエディタを実際の記事と同じようにスタイリングできる

あんまりビジュアルエディタを使ってないのであれですが、新規の記事を書いていてプレビューで確認とまではいかないけどちょっと全体のバランスなんかを確認したい時などに便利かなと思ったので作ってみました。editor-style.cssとはWordPressのビジュアルエディタのスタイルを変更できるCSSファイルです。テーマフォルダにこの名前で作成して、実際の記事のスタイルと同じように設定しておくことでより実際の表示に近い形で編集できるようになります。

[ads_center]

editor-style.cssの使い方

使う前に、functions.phpに以下のコードを追加しておく必要があります。

<?php add_editor_style(); ?>

そして、テーマフォルダ内にeditor-style.cssという名前でファイルをアップロードすれば、使用できるようになります。あとは実際に表示されるスタイルをeditor-style.cssに設定しておけばビジュアルエディタに反映します。とりあえず適当にCSSを追加して、実際に記事を作ってビジュアルエディタで確認してみると。

editor-styleサンプル

ちゃんと適用されてますね。ビジュアルエディタをメインで使っている人にはオススメです。タグ打ちの人だとプレビュー代わりに使えそうな気がしますが、ビジュアルエディタに切り替えるとタグが勝手に整形されたりなんだりでちょっと微妙っぽいですね。プラグインで探せば何かいいのが見つかりそうな感じもしますけど。

ブログの編集作業が捗るWordPressプラグイン「AddQuicktag」前のページ

あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」次のページ

関連記事

  1. Tetris

    WordPress

    レスポンシブに対応したmasonry風のフリーのWordPressテーマ「Tetris」

    Tetrisという素敵なフリーのWordPressテーマを見つけたので…

  2. WordPress

    WordPressでトップページのURLを変更する方法

    WordPressでWebサイトを作成した時にトップページのURLを「…

  3. WordPress

    予約投稿をカレンダーで一覧管理できるWordPressプラグインEditorial Calendar…

    こちらの記事を見て予約投稿っていいなぁって思ったので初めて使ってみまし…

  4. WordPress

    wp_nav_menuでWordPressのカスタムメニューを表示させる

    カスタムメニューを試していたら改めて便利だなと思ったのでメモしときます…

  5. WordPress

    指定した親ページの子ページを取得してみる

    前回、「WordPressで指定した固定ページを読み込む方法」を書いた…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP