[WordPress]ビジュアルエディタをカスタマイズする方法ご紹介します!

こんにちは!Takuya.B(@TB_IQ)です。

WordPressのビジュアルエディタを自分好みにカスタマイズするための方法をこれからしばらくご紹介していきます!

そこで、今日はその下準備となるビジュアルエディタの見た目を実際の記事の見た目に近づけるための方法についてお話します!

スポンサーリンク

ビジュアルエディタをより使いやすくカスタマイズ!

テキストエディタに比べてビジュアルエディタはコードを書く必要もなく、感覚的に文字装飾をできるため便利です。

しかし、例えば見出しの種類はその文字の大きさのみで表されており、個人的に使いにくさを当初感じていました。

私が普段執筆しているビジュアルエディタ

このように見出しの見た目や行間の大きさなどのデザインを実際のプレビュー画面とほとんど同じにしています。こうすることで、実際の見た目に近いので、デザインなど余計なことを考えずに集中して記事の執筆に取りかかることができるのでオススメです。

今回、ビジュアルエディタでの文章の見た目をカスタマイズする方法をご紹介しますが、やるべきことは以下の3ステップだけです。

  1. editor-style.cssを作り、サーバーにアップロードする
  2. editor-style.cssを読み込むためにfunction.phpを編集する
  3. editor-style.cssを編集する

① editor-style.cssを作る

まず、メモ帳やノートパッドで『editor-style.css』を作成してください。

そして、function.phpがあるディレクトリにeditor-style.cssをアップロードしましょう。

サーバーにファイルをアップロードするにはFileZillaというアプリケーション(無料)が便利です。ダウンロード方法や使い方に関しては下記のサイトがシンプルでわかりやすいです。私もこれを参考にしました。

ダウンロード方法ならこちらを参考に!

② function.phpを編集する

①で作ったeditor-style.cssを読み込むためにfunction.phpに次のコードを貼り付けてください。

1行目がeditor-style.cssを読み込むための記述です。

3~6行目の部分で次の③で指定するクラスを設定し、7行目でそれを実際に反映しています。

③ editor-style.cssを編集する

最後にeditor-style.cssを編集しましょう。

私が実際に使っているeditor-style.cssの中身は次のようになっています。

CSSでどのようなデザインをしているのかという話は割愛するとして……

先ほどfunction.phpで設定したオリジナルクラスのeditor-areaがビジュアルエディタの執筆エリアだと考えていただれば、わかりやすいと思います。

ですから、editor-areaクラスの中のp, h2, h3, ul/olのそれぞれにスタイルを設定することで、執筆エリアのレイアウトを変更することができます。

スポンサーリンク

まとめ

今日はビジュアルエディタをカスタマイズする方法(特に執筆エリアの見た目)についてお話しました!

まとめると以下の通りです。

  1. editor-style.cssを作って、サーバー上のfunction.phpのあるディレクトリにアップロード
  2. function.phpを編集してeditor-style.cssを読み込む
  3. editor-style.cssを編集して執筆エリアの見た目をカスタマイズする

次回、ビジュアルエディタで文字サイズを変更する方法や蛍光マーカーなどのスタイルを適用する方法などなどについて説明していきますね!