MENU

ブログのチェック用に!空白や全角数字をハイライトする方法

wordpress-regex-highlighter

ブログの文章を書く際に全角の数字がNGというのは有名ですよね!(SEO的に)

さらにWordPressのブロックエディタの不具合で、余計な半角スペースも入ってしまうことが多いです。

そこで、文章の状態をチェックするために、空白や全角数字をハイライトする方法を備忘録として残しておきます。

すいみん

ほかにも校正したい文字等をまとめて登録、色違いでハイライトすることもできます!

目次

Chromeで空白や全角数字をハイライトする方法

空白チェックとしては、Visual Studio Codeなどのテキストエディタを駆使する方法もありますが、今回はつかいません。

またWordPressのプラグインやCSSでも似たような方法は自前のエディタを作成しない限り難しいです。

今回はGoogle Chromeの拡張機能を使います。

ChromeのHilighter系の拡張機能の自体はたくさんあるのですが、基本的には2単語以上とか制限があるものがほどんどです。

というのもページ内を常に検索して、登録した文字をハイライト為、英文等の空白などのたくさん検出されるものはメモリの負荷が非常に大きいです。

今回紹介する方法も、負荷が大きいので、基本的にはON/OFFして使うことを推奨します。

STEP

正規表現が使えるChrome拡張機能を導入

RegEx Highlighterという正規表現をつかってハイライトできるChromeの拡張機能を下記のリンクから導入します。

STEP

正規表現のハイライト登録

RegEx Highlighterの拡張機能を右クリックしてオプションを開きましょう。

Add New Ruleボタンを押して、ハイライトしたい文字を登録します。

半角や全角の空白であれば( | )

全角の数字であれば[0-9]を登録しておきましょう。

あとはハイライトしたい色を選択して、Saveボタンを押せば登録完了です。

すいみん

ほかにも登録したいワードがあれば、「正規表現 ○○」で検索するとよいでしょう。

あとは前述したとおり、WordPressなどのエディタではPCの負荷が大きくなってしまうので、拡張機能をON/OFFできるように設定してあげることを進めます。

RegEx Highlighterの拡張機能を右クリックして、サイトデータの読み取りと変更を行いますを選択。

拡張機能をクリックしたときにチェックを入れましょう。

すいみん

スペックの高いPCでは必要ないかもです

STEP

実際にハイライトするか試してみる

調べたい記事ページを開いて、RegEx Highlighterの拡張機能のアイコンをクリックします。

するとサイト内の空白や全角数字が指定した色に変化しました!

参考│Chromeの検索でハイライトする

ちなみにCtrl+Fで検索バーを出して、空白をハイライトする方法も可能です。

すいみん

ただし、毎回検索しないといけないので、面倒ですよね

まとめ

本記事では「ブログのチェック用に!空白や全角数字をハイライトする方法」について書きました。

WordPressのブロックエディタの空白文字の入ってしまう不具合に憤慨して、あれこれ試してたどり着いたのが今回のやり方です。

本当はエディタ上でハイライトできれば、よかったのですが、Visual Studio Codeなどのテキストエディタのような高度なカスタマイズは非常に難しいということで、Chrome拡張機能でお手軽にハイライトする方法にしてみましが。

気になる方は是非試してみてください!

  • URLをコピーしました!

ブログ便利ツール関連まとめ

すいみん

ブログ便利ツールに関する記事をまとめました。

ブログ便利ツール関連まとめ

この記事を書いた人

すいみんのアバター すいみん フリーランスデザイナー

技術的なことが好きなデザイナー。
ブログが好きで月間20万PVの技術ブログを運営。
デザインからカスタマイズ、高速化、SEO対策など色々できます。
ご依頼はこちらから!

この記事も読まれてます

目次
閉じる