こんにちは、ryusukeです。
今日は、WordPressにプログラムのコードをシンタックスハイライト(色分け表示)形式で
乗せる際に使うプラグインのHighlighting Code Blockの特徴・設定方法・使い方を実際の
設定画面の画像付きで解説します。
記事を最後まで読み終えることで、WordPressプラグインの【Highlighting Code Block】の
特徴や設定方法、使い方を知ることが可能。
Highlighting Code Blockの特徴や設定方法、使い方を知りたいと思っている人は、最後まで
お付き合いください。
１：Highlighting Code Blockとは？
結論から言うと【Highlighting Code Block】はWordPressのブログにプログラミングの
ソースコードを記述する際に使うプラグインです。
で、このプラグインを使うことでコードをシンタックスハイライト(色分け表示)することが
できるので読者にとって読みやすい記事になるのがメリット。
プラグインを使わずに直接ブログにプログラムを書くことも出来るんですが、それだと読者から
見てコードが見づらいんですよね。
かつ、SEOでもマイナス評価を受ける可能性が出てくるので、その点を考えるとプラグインの【Highlighting Code Block】を使ってコードを載せるのがオススメ。
技術ブログを運営している人は、ぜひとも入れておきたいプラグインの1つ。
Highlighting Code Blockを使うことでコードが↓みたいな感じで表示されます。
print "Hello World";
こんな感じでHighlighting Code BlockはテキストエディタのAtomみたいな感じでコードが
表示されるので、プログラミングの経験がある人にとっても見慣れているはず。
かつ、コードがシンタックスハイライトで表示されていると、読者が見てすぐに「プログラムの
コード」だと理解されやすいので、読者目線の記事になるかなと。
実際にHighlighting Code Blockを使った記事は↓みたいな感じ。
こんな感じで、プログラミングのコードをブログに載せたいと思っている人には、必需と
言っても過言ではないプラグインがHighlighting Code Blockです。
では、そんなHighlighting Code Blockの導入のやり方と設定のやり方を解説していきます。
2：Highlighting Code Blockの導入＆設定方法
ここからは、【Highlighting Code Block】の導入方法と設定のやり方を画像付きで
解説していきます。
具体的には以下の流れです↓
- Highlighting Code Blockの導入方法
- Highlighting Code Blockの設定方法
それでは順番に見ていきましょう♪
なお、設定方法のみを知りたい人は次の設定方法まで読み飛ばしてください。
1：Highlighting Code Blockの導入方法
まず、Highlighting Code BlockはWordPressのプラグインなので、インストールをしないと
利用することが出来ません。
なので、まずはインストールをしていきましょう。
プラグインをインストールする手順は以下のとおり。↓
- 左のメニューバーの[プラグイン]→[新規追加]をクリック
- プラグインの検索枠に【Highlighting Code Block】と入力する
順番に解説していきます。
1：左のメニューバーの[プラグイン]→[新規追加]をクリック
まず、プラグインのインストールにはWordPressのサイドバーの[プラグイン]→[新規追加]を
クリックしてプラグインの新規追加画面に移動してください。
一応、わかりにくい人のために画像を貼っておきますね。
で、プラグインのインストールの画面に移動すると、こんな感じの画面が表示されます。
この画面が表示されたら次の手順に進みます。
2：プラグインの検索枠に【Highlighting Code Block】と入力する
移動したら、右上のプラグインの検索ボックスに【Highlighting Code Block】と入力して
プラグインを検索してください。
検索したら↓みたいな感じでHighlighting Code Blockが表示されるはずです。
ボクの場合はすでにインストール＆有効化しているので表示されていませんが、新規の場合は
[今すぐインストール]と表示されています。
なので、それをクリックしてHighlighting Code Blockをインストールしてください。
インストールしたら[有効化する]と表示されます。なので、それをクリックしてプラグインを
有効化したらHighlighting Code Blockの導入は完了しました。
次にHighlighting Code Blockの設定を行っていきます。
2：Highlighting Code Blockの設定方法
インストール＆有効化が完了したら、次にHighlighting Code Blockの設定に進みます。
設定は非常に簡単で、手順は以下のとおり。↓
- 左のメニューバーの[設定]→[[HCB]設定]をクリック
- Highlighting Code Blockの設定をする
順番に解説していきます。
1：左のメニューバーの[設定]→[[HCB]設定]をクリック
まず、Highlighting Code Blockの設定にはWordPressのサイドバーの[設定]→[[HCB]設定]を
クリックしてHighlighting Code Blockの設定画面に移動してください。
画像だとこんな感じ。↓
で、設定画面に移動することが出来たら下みたいな感じの画面になります。↓
移動することが出来たら次の手順に進みます。
2：Highlighting Code Blockの設定をする
Highlighting Code Blockの設定画面に移動できたら、Highlighting Code Blockの設定を
行っていきましょう。
設定自体は画像のとおりにすればOKです。
なお、1点注意点としてコードのカラーリングはDarkとLightの2種類があって、どちらを
選んでも良いですが、ボクはDarkを選んでいます。
なので、特にこだわりが無い場合はDarkを選んでおくのが良いかなと。ただ、Lightの方が
良いと思う場合は別にLightでも良いかなと。
これに関しては好きな方を選ぶのがオススメ。
その次は、こんな感じですね。基本的にはデフォルトのまま変更していません。
さらに次はこんな感じですが、ここもデフォルトのまま変更しないでOK。
最後に一番下の[変更を保存]をクリックするとHighlighting Code Blockの設定は完了です。
次にHighlighting Code Blockの使い方を紹介していきます。
3：Highlighting Code Blockの使い方
ここからは、一通りのHighlighting Code Blockの使い方を解説していきます。
とはいっても、使い方はとても簡単です。まずは、記事の投稿画面に移動してください。
移動したら上のメニュー部分に[Code Block]と書かれている項目があります↓
なので、これをクリックしてください。
クリックしたら↓見たいな感じで、どの言語を書くのか選ぶメニューが出てきます。書く言語が
どの言語なのかを選んでクリックしてください。
今回は[PHP]を選んで設定します。そしたら、↓
上の画像みたいな感じでコードを記述するボックスが出てきます。デフォルトの文字を削除して
コードを書いていけばOKです。
で、今回は「Hello World」とコードを書きました。
で、プレビューで見ると↓みたいな感じで表示されます。
あともう1点、右上の[PHP]と書かれている部分にファイル名を表示することも可能でして、
ファイル名を変更するにはテキストの編集部分に移動してください。
移動したら【data-lang=""】←の「""」内に言語名が書かれています。ただ、この部分に
ファイルの名前などの文字を入れれば変更できます。
ただ、今回はテストなので「hello」と入力します。もう一度ビジュアルエディタに変更したら
こんな感じで変更されています♪
プレビューで見ると↓みたいな感じ。
しっかり変更できていますね♪
Highlighting Code Blockの使い方は以上です。割と簡単に使えるプラグインなので、これから
技術ブログを運営しようと思っている人は入れてみるのが良いかと思います。
お疲れさまでした！
オススメ記事↓
