[WordPress] エディタを等幅フォントで使いたい

  • このエントリーをはてなブックマークに追加
  • LINEで送る

WordPressの記事はMarkdownに対応するプラグインを入れて書いてるんですが、エディタが等幅フォントになってないことでテーブルを書く際にずれまくって終始イライラすることが増えたので対策しました。

今回はWordPress側には一切手を入れないため、突如WordPressが動かくなったり、アップデート時に設定が消えてなくなることもありません。

- Sponsored Link -

ブラウザにプラグインを入れる

Stylusというプラグイン(機能拡張)をブラウザに入れます。これは指定したURLで指定したCSSを動かしてくれる物です。

GoogleChrome

FireFox

つまり、Wordpressのエディターをブラウザで開いたら、テキストエリアを等幅フォントにせよという指定をするわけです。

Stylusの設定

インストールが終わったら、WordPressのエディター画面を表示し、Stylusのアイコンをクリックし表示されたメニューにある「このURL」をクリックします。

設定画面になりますので、実際のCSSを入力してきます。

CSSは以下を入れましたが、もちろんフォント等はお好みの物を入れてもらってかまいません。またこのCSSは自分のブラウザ内でしか動きませんので、すべてのブラウザで動くように気を使う必要もありません。

textarea#content.wp-editor-area {
  font-family: "Courier New", Consolas, monospace;
  font-size: 10pt;
}

あとは適用するURLを修正し、保存ボタンをクリックすれば作業は完了です。無事に等幅フォントになったでしょうか?

おまけ

どのフォントがいいの?

普段macOSを使っているのですが、個人的にはTakaoフォントが使いやすいかなと。以前のUbuntuで日本語の標準フォントだったやつですね。ダウンロードしたらフォントファイルをダブルクリック、右下にある「フォントをインストール」ボタンをクリックすれば入ります。

以下は表示サンプルです。間違いやすい「0(数字ゼロ)」と「O(大文字オー)」、「I(大文字アイ)」「l(小文字エル)」などにも配慮されているので、プログラムなどコーディングする際にも重宝します。

StylusのCSSはこちら。ちょっと細いと思ったらfont-weight:boldなどで調整してください。

textarea#content.wp-editor-area {
  font-family: "TakaoGothic";
  font-size: 10pt;
}

Takao以外のフォントサンプル

Menlo

Monaco

Courier New

以前はStylishじゃなかった?

お亡くなりになりました。


現在では復活しているようですが…利用するかどうかは個人の判断でどうぞ。個人的にはさすがに怖くて使えないw

エンジニアのためのWordPress開発入門 (Engineer's Library)
野島 祐慈 菱川 拓郎 杉田 知至 細谷 崇 枢木 くっくる
技術評論社
売り上げランキング: 106,813
- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください