Wordpress

WordPress直書きブロガーにオススメしたい、神エディタープラグイン

神エディタープラグイン

外部エディター?そんなもの不要!

と思うぐらい。WordPressを素晴らしいエディターに変身させるプラグインを紹介します。

どこにも書いてないし誰も教えてくれない。こんな素敵なものがあったなんて・・・。

この記事を読み終える頃には、あなたのWordPressが素敵なエディターに変身して、人生にワクワクしているはずです

 
【注意】
写真や表がそのまま表示される「ビジュアル」スタイルと、thmlタグを直打ちできる「テキスト」スタイルがあります。

ここでは、「テキスト」スタイルでゴリゴリと書く人向けの記事となっています。

「テキスト」スタイル「テキスト」スタイル

 

最高のエディタ、HTML Editor Syntax Highlighter

プラグイン名、
エイチティーエムエル エディタ シンタックス ハイライター!!

HTMLを直打ちする人は、きっと経験があると思います。真っ白な背景に黒い文字。どこにタグがあるのか分からないし、リンクも見づらい。

そこでこの、プラグインです。

WordPressのエディタが10ぐらいレベルアップして、見やすさが格段に向上します。(個人的体感)

画面の変化(導入前→導入後)

導入前の画面から。ここでは 【JIN】グローバルメニューでカテゴリのプルダウンを表示する設定【図解】 の編集画面を用いています。

ご存知のとおり通常は、白と黒のモノクロームな編集画面です。

プラグイン導入前プラグイン導入前

いつもの画面ですね。

 
このプラグインを導入すると、こんな感じになります。

プラグイン導入後プラグイン導入後

なんかプロっぽい!!・・・感じがしませんか?

見た目ももちろんカッコよくて良いんですが、それだけではありません。タグや文字が色分けされていますね?視認性(読みやすさ)もかなり向上します。




プラグインのインストール

さっそく追加してみましょう!

WordPressの「プラグイン」>「新規追加」画面より、「HTML Editor Syntax Highlighter」と検索しましょう。

プラグインの新規追加プラグインの新規追加

こんなアイコンのやつです。「今すぐインストール」を押したのち、「有効化」をクリックして完了です。

もし検索がうまく引っかからない場合、 ダウンロードページ からダウンロードしてインストールも可能です。

色が気に入らなければテーマを変更可能

「黒い背景は見づらいなぁ・・・赤いタグも読みづらいし・・・。」

という方にも安心。プリインストールされいるテーマはなんと50種類!!(縦長の画像、失礼します)

プリインストールされているテーマの一覧プリインストールされているテーマの一覧

上にあったテーマは「Material」です。プラグイン導入後はこちらが最初に選択されていました。個人的に、一番見やすい気がします。

ちょっと面倒でしたが、50個のテーマを全て確認しました。個人的に見やすいな〜と思ったテーマを紹介します。

 

テーマ「Zenburn」テーマ「Zenburn」

優しい色使いで目が疲れにくそうな「Zenburn」

 

テーマ「Eclipse」テーマ「Eclipse」

基本の白背景はそのままに、タグやクラスに色がついて見やすい「Eclipse」

 

テーマ「Dracula」テーマ「Dracula」

少しキツめの色使いで、インパクトのあるテーマ「Dracura」

 

テーマ「Matrix」テーマ「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のお買い物で損をしない方法
  • Amazonでギフト券をチャージ→お買い物の時に使うだけ!
  • チャージ額×最大2.5%分のAmazonポイントが貰える!
  • → → → (つまり最大2.5%安く買える!)

  • ギフト券の詳細やチャージ方法は公式サイトでご確認ください。
  • 5,000円からのチャージ対応!
  • プライム会員は更に優遇!
あなたへのおすすめ記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です