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サンプル

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

関連記事

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

    WordPress

    WordPressの囲み型ショートコードの基本的な使い方

    WordPressのショートコードはとても便利で色々なことができるんで…

  2. WordTwit

    WordPress

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

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

  3. WordPress

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

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

  4. WordPress

    MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順

    久しぶりにMAMPを使って新しいWordPressのローカル環境を作っ…

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

    WordPress

    WordPressでログイン中に上部ツールバーを表示・非表示にする設定方法

    WordPressでログイン中に上部ツールバーを表示または非表示にする…

  6. WordPress

    WordPressで「この記事の所要時間」という読了時間を表示させてくれるプラグイン「estimat…

    とても便利なWordPressのプラグインを発見したので備忘録です。よ…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP