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で指定した固定ページを読み込む方法

    WordPressで例えばトップページに自分の指定した固定ページを読み…

  2. WordTwit

    WordPress

    WordTwitの設定方法や日本語化してからの使い方について

    WordTwitはWordPressで記事を投稿した時に自動でツイート…

  3. WordPressの自動バックグラウンド更新

    WordPress

    WordPressで複数のウィジェットを表示させるやり方

    WordPressのウィジェットってとても便利ですよね。ドラッグ&ドロ…

  4. WordPressでパンくずリストを設置

    WordPress

    WordPressでパンくずリストをプラグインなしで設置する簡単なやり方

    WordPressでパンくずリストをWebサイトに設置したいといった時…

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

    WordPress

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

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

  6. WordPress

    WordPressでアイキャッチ画像を使う場合のサイズ設定や画像ありなし時の振り分けなど

    WordPressにあるアイキャッチ画像がとても便利で、自分もWord…

コメント

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

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

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP