ワードプレスブログでタグやコードを簡単に見やすく表示する方法は?


ワードプレス関連のブログを書いていると、記事の中でHTMLタグやCSSコードなどをチョコッと入れたいこととかってありますよね。

そんな時、簡単でキレイに見やすく表示する方法はないものか・・・とフトしたきっかけで探してみたいきさつを以下赤裸々(!?)に。

自ブログ記事内のコードを見てガク然・・・

ひとつ前の記事で「重くなったChromeを改善する方法を見つけたよ♪」と書いたんですが、肝心の「呪文」の部分を改めて見てみると、表記が超まぎらわしい・・・

その呪文というのがコチラ↓
–renderer-process-limit=5

実際のとこ最初のハイフン(-)は1つじゃなくて2つ。なのにフォントの関係なのかこうやって見ると2つが団子状にくっついて1つの「横棒」のように表示されちゃってますよね。

ま~些細なことといってしまえばそれまでなんですが、気づいたらメチャメチャ気になりだして、もっと良い方法はないかしらんと初心者なりにグルグル考え始めたのがきっかけです。

前から気になってたツールを探す旅へ

そこでフト頭をよぎったのが、よく他のブログで目にするこんな表示↓
crayon-syntax-highlighter

これだとコピペもしやすいし、何よりこのフォント(?文字?)だとハイフンとかの記号もハッキリ見やすいですよね。

ってことで上のコレを探すべく、早速検索スタート!でも・・・ここでハタと気づいたんですが、肝心のコレを何と呼ぶのかわからない(^~^;)

仕方ないのでとりあえず「Wordpress ブログ HTMLタグ 挿入」とかって苦しまぎれに入れてみると・・・

オオちゃんと見つかりましたー!こんなファジーなキーワードでもわかってくれるグーグル先生、賢すぎ。

用途にドンピシャのプラグイン発見!

でその正体?は「Crayon Syntax Highlighter」というワードプレス用プラグイン。

紹介サイトもたくさんあって、「ソースコード(って呼ぶのね)を記事内にキレイに表示するツール」としては超ポピュラーなようです。

Crayon Syntax Highlighter — WordPress プラグイン

基本的にはデフォルトのままで問題なく使えるけど、その気になればかなり高度な設定もできるらしい。

マア私の場合は今のとこ例の「呪文」を表示するくらいの用途しかないので明らかにオーバースペック(^^;)

でも昔からずーっと気になってたフォーマットだし、ようやく見つけたからにはとにかく一度は使ってミタイ!といてもたってもたまらなくなっちゃった次第。。

Crayon Syntax Highlighterを使ってみた結果

ってことで早速この「Crayon Syntax Highlighter」というワードプレス用ブラグインをダウンロード&有効化。

そしていよいよこのプラグインを使って例の呪文を書いてみたのがコチラ↓

ちなみにさっきまでテキストで入れていた表示がコチラ↓
–renderer-process-limit=5

こうやって見比べてみると、やっぱりプラグインを使った上の表示の方がハイフンが2個入ってるのがハッキリとわかりますよね!

まとめ(というか感想)

自分みたいなワードプレス初心者でも、こんなプロっぽい?表示が簡単にできて大満足。いや~ワードプレスのプラグイン機能ってマジ「神」だわ~

そんな次第で、自分のワードプレス記事にHTMLタグやCSSコードなどを記載することがあった際には「Crayon Syntax Highlighter」をぜひ!

なおこの「Crayon Syntax Highlighter」プラグインの詳しい設定方法や使い方については、以下のサイトを参考にさせていただきました。

【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter | ホームページ制作 SEO対策 福岡のアイドットデザイン

いつもながら先人の知恵に大感謝です!

スポンサーリンク