こんにちは、ryusukeです。
今日はWordPressブログにソースコードを乗せることのプラグインの【Highlighting Code Block】の基礎知識と、設定のやり方を解説していきます。
実際に設定の画像付きでできるだけわかりやすく解説していくので初心者でも理解しやすい
内容になっているはずです。
１：Highlighting Code Blockとは？
結論から言うと【Highlighting Code Block】はWordPressのブログにプログラミングの
ソースコードを記述する際に使うプラグインです。
このプラグインを使うことでソースコードをブログに乗せることができるようになるので、
プログラミング関係のブログを書く際には必需と言っても過言ではないです。
別に、ソースコードは直接ブログに書くこともできますが、それをやるとSEO面でマイナスの
評価を受けたり、読者にとってもソースコードの部分がわかりにくかったりするので、
プラグインを使って見えやすくするのがおすすめです。
その、ソースコードを乗せてもSEO面でマイナス評価を受けることなく、読者にとっても
コードを見えやすくしてくれるプラグインがHighlighting Code Blockです。
具体例としてHighlighting Code Blockを使うことで下の記事みたいな感じでプログラムの
ソースコードをブログに乗せることができますよ。↓
普通にいい感じですよね。
では、そんなHighlighting Code Blockの導入のやり方と設定のやり方を解説していきます。
2：Highlighting Code Blockの導入＆設定方法
ここからは、【Highlighting Code Block】の導入方法と設定のやり方を画像付きで
解説していきます。
以下の流れで解説していきます。↓
- Highlighting Code Blockの導入方法
- Highlighting Code Blockの設定方法
まずは、Highlighting Code Blockの導入方法から解説していきます。
設定方法のみを知りたい人は、次の2番まで読み飛ばしてください。
1：Highlighting Code Blockの導入方法
当然ですがプラグインはインストールをしないと使うことができないので初めにプラグインの
インストールを行います。
プラグインをインストールする手順は以下のとおり。↓
- 左のメニューバーの[プラグイン]→[新規追加]をクリック
- プラグインの検索枠に【Highlighting Code Block】と入力する
順番に解説していきます。
1：左のメニューバーの[プラグイン]→[新規追加]をクリック
まず、プラグインをインストールするにはWordPressの管理画面の左側のメニューバーの
[プラグイン]にカーソルを乗せて[新規追加]をクリックしてください。
一応、わかりにくい人のために画像を貼っておきますね。
プラグインのインストールの画面に移動すると、こんな感じの画面が表示されます。
この画面が表示されたら次の手順に進みます。
2：プラグインの検索枠に【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の設定をするには左のメニューバーの[設定]にカーソルを
乗せて、[[HCB]設定]をクリックしてください。
画像だとこんな感じ。↓
で、設定画面に移動することが出来たら下みたいな感じの画面になります。↓
ちゃんと移動することが出来たら次の手順に進みます。
2：Highlighting Code Blockの設定をする
Highlighting Code Blockの設定画面に移動することが出来たら、次に設定を行います。
設定自体は画像のとおりにすればOKです。
ここで１つ注意点としてコードのカラーリングはDarkとLightの2種類があって、どっちを
選んでも良いですが、僕はDarkを選んでいます。
Darkを選ぶとテキストエディタのATOMみたいな感じでコードが表示されます。
あと、単純に見た目もDarkの方が好きなので...
次はこんな感じですね、基本的にはデフォルトのまま変更していません。
ここも、デフォルトのまま変更しないで問題ないです。
最後に[変更を保存]をクリックすると設定は完了です。
お疲れさまでした！
以上がWordPressプラグインのHighlighting Code Blockの基礎的な知識と設定のやり方に
ついての解説でした。
おわり。
人気記事↓
