外部エディター？そんなもの不要！
と思うぐらい。WordPressを素晴らしいエディターに変身させるプラグインを紹介します。
どこにも書いてないし誰も教えてくれない。こんな素敵なものがあったなんて・・・。
この記事を読み終える頃には、あなたのWordPressが素敵なエディターに変身して、人生にワクワクしているはずです。
【注意】
写真や表がそのまま表示される「ビジュアル」スタイルと、thmlタグを直打ちできる「テキスト」スタイルがあります。
ここでは、「テキスト」スタイルでゴリゴリと書く人向けの記事となっています。
「テキスト」スタイル
目次
最高のエディタ、HTML Editor Syntax Highlighter
プラグイン名、
エイチティーエムエル エディタ シンタックス ハイライター！！
HTMLを直打ちする人は、きっと経験があると思います。真っ白な背景に黒い文字。どこにタグがあるのか分からないし、リンクも見づらい。
そこでこの、プラグインです。
WordPressのエディタが10ぐらいレベルアップして、見やすさが格段に向上します。（個人的体感）
画面の変化（導入前→導入後）
導入前の画面から。ここでは 【JIN】グローバルメニューでカテゴリのプルダウンを表示する設定【図解】 の編集画面を用いています。
ご存知のとおり通常は、白と黒のモノクロームな編集画面です。
プラグイン導入前いつもの画面ですね。
このプラグインを導入すると、こんな感じになります。
プラグイン導入後なんかプロっぽい！！・・・感じがしませんか？
見た目ももちろんカッコよくて良いんですが、それだけではありません。タグや文字が色分けされていますね？視認性（読みやすさ）もかなり向上します。
プラグインのインストール
さっそく追加してみましょう！
WordPressの「プラグイン」＞「新規追加」画面より、「HTML Editor Syntax Highlighter」と検索しましょう。
プラグインの新規追加こんなアイコンのやつです。「今すぐインストール」を押したのち、「有効化」をクリックして完了です。
もし検索がうまく引っかからない場合、 ダウンロードページ からダウンロードしてインストールも可能です。
色が気に入らなければテーマを変更可能
「黒い背景は見づらいなぁ・・・赤いタグも読みづらいし・・・。」
という方にも安心。プリインストールされいるテーマはなんと50種類！！（縦長の画像、失礼します）
プリインストールされているテーマの一覧上にあったテーマは「Material」です。プラグイン導入後はこちらが最初に選択されていました。個人的に、一番見やすい気がします。
ちょっと面倒でしたが、50個のテーマを全て確認しました。個人的に見やすいな〜と思ったテーマを紹介します。
テーマ「Zenburn」優しい色使いで目が疲れにくそうな「Zenburn」
テーマ「Eclipse」基本の白背景はそのままに、タグやクラスに色がついて見やすい「Eclipse」
テーマ「Dracula」少しキツめの色使いで、インパクトのあるテーマ「Dracura」
テーマ「Matrix」ネタになる？目に悪そうなテーマ「Matrix」
すべて見てみるだけでも面白いです。目に優しくて、それでいて見やすいのは、「Material」でした。
他のエディタ（統合開発環境）などを使用している方は、プリセットの中にお気に入りのテーマがあるかも知れません。
細かいことだけど役に立つ！ラインナンバー
先ほどまでの写真、お気づきだろうか？行番号が入っていたことに。
ラインナンバー（行）いま何行目に居るかがひと目で分かります。
編集画面とプレビューを行ったり来たりする際、見失わずに済みます。編集箇所を探すの、苦労しますよね？
編集のプロになれる？インデント
「Tabキー」でインデント（段落）が可能です。
実際の記事には反映されませんが、
編集時に見やすく記述することができます。
箇条書きで書いておく時や「li」タグを使う時などに便利ですね。
編集画面でのインデント（段落）記事には反映されませんが、図のように、編集画面では一段下がっています。
引用部分や注釈はインデントを使って一段下げるなど工夫すると、後から見たときにもパッと見で分かりやすいですね。
プログラミング経験者は、呼吸するようにインデントをするとかしないとか。
ラインナンバーとインデントは普段の記事執筆だけでなく、リライトするときにも役に立ちますね。
調節可能な細かな機能設定！
管理メニュープラグインを導入すると、エディタ画面内に歯車アイコンが現れます。そこをクリックすると管理メニュー（英語）が表示されます。
- Theme：
プリインストールされているテーマ一覧 - Indent：
数値を選択 インデント（上で説明）の半角スペースの個数を設定 - Line Warp：
オン・オフで設定 画面右端で折り返すか、そのまま突き抜けるかの設定 - Numbering：
オン・オフで設定 ナンバリング（上で説明）の表示 - Font Size：
数値を選択 編集画面内のテキストのサイズ - Line Height：
数値を選択 行（上下）のスペース間隔を設定
また、怪しげに書いてある「more…」をクリックすると、高度設定が開きます。
パソコン詳しいマンでなければ、通常いじる必要はないと思います。が、色々見てみると良さげな機能ばかりなので、個人的なおすすめ設定を書いておきます。（画面通りにチェックをつければOK!）
高度設定のおすすめ例- Match Tags：
角括弧[]をハイライト（色付き表示）する - Highlight Selection Matche：
選択している言葉をハイライトする - Auto Close Tags：
タグを自動で閉じる - Auto Close Brackets：
角括弧を自動で閉じる - Show Scrollbars：
スクロールバーを表示する【特におすすめ】
手打ちでタグを打つと、閉じ忘れによるミスが起こります。記事全部に下線がついてしまったり、マーカーが100行ぐらい引かれてしまうことも。
そういった際に、何処を間違えたかを視覚的に確認することが出来ます。（色がつくので）
もし、上記設定の意味が分からないとか、高度設定は怖い・・・という方は、スクロールバーだけでも表示することをオススメします。
何故最初から搭載されていないのか、本当は不思議なくらいです。
使ってみて一日目で確認できている不具合
リアルタイムに文字数がカウントされない。
テーマ「JIN」ユーザーであれば、テキストエディタの下の方に「文字数」の表示があると思います。他のテーマでもあるのかな？
「今日は2000文字絶対書くぞ！」という方にはちょっと残念な話です。リアルタイムに文字数が反映されませんでした。（私だけかも知れませんが・・・）
しかし対策として、「下書きとして保存」や「公開」することで画面が更新され、文字数がカウントされました。
個人的には特段大きな問題ではないと思います。（更新するときのワクワクを楽しむぐらいがちょうどいいですね）
まとめ
「もうちょっとエディタが見やすければなぁ〜」と思ったので探してみたら、見つけました。
タグに色がついて見やすく、大満足です。
見やすくなる＝作業効率が上がるということです。満足感も高く、画面のプロっぽさにワクワクテカテカしています。あなたも一緒にテカテカしませんか？
無料のプラグインです。デフォルトのままWordpressに直書きしている方は、一度試してみてはいかが？
- Amazonでギフト券をチャージ→お買い物の時に使うだけ！
- チャージ額×最大2.5%分のAmazonポイントが貰える！
- ギフト券の詳細やチャージ方法は公式サイトでご確認ください。
- 5,000円からのチャージ対応！
- プライム会員は更に優遇！
→ → → （つまり最大2.5%安く買える！）