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. WordPress

    WordPressでコメント欄などに表示されるアバター「Gravatar」に登録してみる

    毎回、今更感全開の記事ですが時間が少しあったのでGravatarに登録…

  2. WordPress

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

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

  3. WordPress

    WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方

    WordPressのショートコードってとても便利ですよね。AddQui…

  4. WordPressのログイン時のツールバー

    WordPress

    WordPressのトップページ(index.php)で公式ツイートボタンのURLを各記事別になるよ…

    ちょっとした備忘録です。WordPressのトップページで公式ツイート…

  5. Daily Dish

    WordPress

    写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」

    Daily DishというWordPressテーマがとてもカッコよかっ…

  6. Last Updated Shortcode

    WordPress

    最後に更新された日付時間をショートコードで表示できるWordPressプラグイン「Last Upda…

    WordPressの記事内に最後に更新した日付時間を表示できるWord…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP