Highlighting Code Blockとは?設定方法を解説します

ブログ

こんにちは、ryusukeです。

 

今日はWordPressブログにソースコードを乗せることのプラグインの【Highlighting Code Block】の基礎知識と、設定のやり方を解説していきます。

 

実際に設定の画像付きでできるだけわかりやすく解説していくので初心者でも理解しやすい
内容になっているはずです。

 

1:Highlighting Code Blockとは?

結論から言うと【Highlighting Code Block】はWordPressのブログにプログラミングの
ソースコードを記述する際に使うプラグインです。

 

このプラグインを使うことでソースコードをブログに乗せることができるようになるので、
プログラミング関係のブログを書く際には必需と言っても過言ではないです。

 

別に、ソースコードは直接ブログに書くこともできますが、それをやるとSEO面でマイナスの
評価を受けたり、読者にとってもソースコードの部分がわかりにくかったりするので、
プラグインを使って見えやすくするのがおすすめです。

 

その、ソースコードを乗せてもSEO面でマイナス評価を受けることなく、読者にとっても
コードを見えやすくしてくれるプラグインがHighlighting Code Blockです。

 

具体例としてHighlighting Code Blockを使うことで下の記事みたいな感じでプログラムの
ソースコードをブログに乗せることができますよ。↓

PHPとHTMLを使った掲示板のコードを解説します【コピペOK】
ホームページに掲示板を設置したい人向け。この記事ではPHPとHTMLを使って掲示板を設置するコードを紹介します。このブログの中にあるPHPとHTMLのコードをページに張り付けるだけで掲示板を設置することが出来るので是非チェックしてください。

 

普通にいい感じですよね。

では、そんなHighlighting Code Blockの導入のやり方と設定のやり方を解説していきます。

2:Highlighting Code Blockの導入&設定方法

ここからは、【Highlighting Code Block】の導入方法と設定のやり方を画像付きで
解説していきます。

 

以下の流れで解説していきます。↓

  1. Highlighting Code Blockの導入方法
  2. Highlighting Code Blockの設定方法

 

まずは、Highlighting Code Blockの導入方法から解説していきます。

設定方法のみを知りたい人は、次の2番まで読み飛ばしてください。

 

1:Highlighting Code Blockの導入方法

 

当然ですがプラグインはインストールをしないと使うことができないので初めにプラグインの
インストールを行います。

 

プラグインをインストールする手順は以下のとおり。↓

  1. 左のメニューバーの[プラグイン]→[新規追加]をクリック
  2. プラグインの検索枠に【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のインストール&有効化が終わったら、次にプラグインの
設定を行います。

 

設定の手順は以下のとおり。↓

  1. 左のメニューバーの[設定]→[[HCB]設定]をクリック
  2. Highlighting Code Blockの設定をする

 

順番に解説していきます。

 

  1:左のメニューバーの[設定]→[[HCB]設定]をクリック

 

まず、Highlighting Code Blockの設定をするには左のメニューバーの[設定]にカーソルを
乗せて、[[HCB]設定]をクリックしてください。

 

画像だとこんな感じ。↓

 

で、設定画面に移動することが出来たら下みたいな感じの画面になります。↓

 

ちゃんと移動することが出来たら次の手順に進みます。

 

  2:Highlighting Code Blockの設定をする

 

Highlighting Code Blockの設定画面に移動することが出来たら、次に設定を行います。

設定自体は画像のとおりにすればOKです。

 

ここで1つ注意点としてコードのカラーリングはDarkとLightの2種類があって、どっちを
選んでも良いですが、僕はDarkを選んでいます。

 

Darkを選ぶとテキストエディタのATOMみたいな感じでコードが表示されます。

あと、単純に見た目もDarkの方が好きなので...

 

次はこんな感じですね、基本的にはデフォルトのまま変更していません。

 

ここも、デフォルトのまま変更しないで問題ないです。

 

最後に[変更を保存]をクリックすると設定は完了です。

お疲れさまでした!

 

以上がWordPressプラグインのHighlighting Code Blockの基礎的な知識と設定のやり方に
ついての解説でした。

 

おわり。

 

人気記事↓

ブログアフィリエイトをYouTube学習する際に見るべき動画8選
ブログアフィリエイトをYouTubeで学習したい人向け。この記事ではブログアフィリエイトをYouTubeで学習する際に見るべき8本の動画を、まとめて紹介していきます。ブログアフィリエイトをYouTubeで学習したいなら必読の内容かと。

タイトルとURLをコピーしました