毎日、Twitterで日々の成果や頑張りをツイートしてします!

Highlighting Code Blockの高度な設定を解説!【WordPressプラグイン】

アイキャッチ画像
カズトン

みなさん、お疲れ様です!カズトンです!

ソースコードをWordPressで書くならこのプラグイン”Highlighting Code Block”ですよね。

本記事は、そんなHighlighting Code Blockの高度な設定を説明します。

Highlighting Code Blockの設定内にある高度な設定って難しそうですよね。

高度な設定を開いたときに、「独自カラーリングファイル」や「独自prism.js」ってなに?美味しいの?って思いますよね笑

そんな疑問を解決しようと思います!

今回の記事は、「Highlighting Code Blockの設定内にある高度な設定について解説!」です。

今回の記事を読むと、できること。

Highlighting Code Blockの見た目のデザインをカスタマイズすることができる。

高度な設定を行うことで、Highlighting Code Blockのデザインをカスタマイズすることができるようになります。

ぜひ、最後まで読んで見て下さい!

余談です。

初めて”Highlighting Code Block”を使った時に、背景に白い枠線や不必要な背景色が出てしまうという不具合がありました。

同じような不具合が起きている方は、こちらの記事を見てくれると解決できると思います!

また、こちらの記事の下に「基本設定」についての説明もしているので見てみてくださいね!

アイキャッチ画像

では、「スタートです!」

高度な設定画面

初めに、「高度な設定」画面に移りましょう!

Step1

「WordPressのダッシュボード」の画面に行きます。

WordPressのダッシュボード
WordPressのダッシュボード

Step2

「設定」→「[HCB設定]」に進みます。

設定画面へ
Highlighting Code Blockの設定画面へ

これで、Highlighting Code Blockの設定画面まで移ることができました。

設定項目一覧

上から順番に項目を説明していきます。

高度な設定(Highlighting Code Block)
項目説明
  1. 利用する言語をセット
  2. 独自カラーリングファイル
  3. 独自prism.js

あとで、詳しく説明します。

ここでは、カンタンに一つずつ説明していきます。

①利用する言語をセット

この設定では、初めからあるプログラミング言語以外の言語を付け足すことができます。

②独自カラーリングファイル

この設定では、デザインをカスタマイズするCSSファイルを指定します。

③独自prism.js

この設定では、デザインをカスタマイズするJavaScriptファイルを指定します。

①利用する言語をセット

まず、一つ目の設定です。

この設定では、プログラミング言語を追加することができます。

事前に入っているプログラミング言語

追加する前に、事前に入っているプログラミング言語をまとめておきます。

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Ruby
  • Python
  • Swift
  • C
  • C#
  • C++
  • Objective-C
  • SQL
  • JSON
  • Bash
  • GIt
カズトン

めちゃくちゃある…笑

他にいる?笑

自分はここにないプログラミング言語がパッと出てきませんでした笑

唯一出てきた「Go」というプログラミング言語を追加していこうと思います。

プログラミング言語を追加する方法

では、「Go」というプログラミング言語を追加していきたいと思います。

手順は、カンタンたった2つです!

  1. 公式サイトから、プログラミングのクラス名を取得
  2. クラス名:”表示させたい言語名”で指定

手順1

公式サイトから、クラス名を調べましょう。

クラス名を調べる

「Supported languages」から、自分が追加したいプログラミング言語を探します。

「Go-go」と見つけました。

「Go-クラス名」です。

クラス名は「go」ということがわかりました。

手順2

クラス名がわかれば、あとはカンタンです。

高度な設定画面を開き、「クラス名:”表示させたい言語名”」と記述しましょう。

言語を追加

これで追加したいプログラミング言語を扱うことができるようになります。

②独自カラーリングファイルと③独自prism.jsの設定

②独自カラーリングファイルと③独自prism.jsの2つは、Highlighting Code Blockのデザインをカスタマイズするときに必要になる設定です。

こちらは、2つまとめて説明していきたいと思います。

独自カラーリングファイルと独自prism.jsについて

この2つの意味は、以下の通りです。

  1. 独自カラーリングファイル→カスタマイズテーマのCSSファイル
  2. 独自prism.js→カスタマイズテーマのJavaScriptファイル

デザインをカスタマイズって自分で1から作るのはかなり難しい。

ですが、事前にカスタマイズ用のデザインテーマが8つ用意されています。

この8つのデザインテーマから好きなものを選んで、そのデザインテーマにカスタマイズしていきましょう。

では、8つのデザインテーマを紹介していきます。

カスタムしたいデザインテーマを選ぼう!

これから、8つのデザインテーマを紹介します。

どのデザインが良いか考えてみてください。

デザインテーマの種類

①Default

Defaultテーマ
Defaultテーマ

②Dark

Darkテーマ
Darkテーマ

③Funky

Funkyテーマ
Funkyテーマ

④Okaidia

Okaidiaテーマ
Okaidiaテーマ

⑤Twilight

Twilightテーマ
Twilightテーマ

⑥Coy

Coyテーマ
Coyテーマ

⑦Solarized Light

Solarized Lightテーマ
Solarized Lightテーマ

⑧Tomorrow night

Tomorrow nightテーマ
Tomorrow nightテーマ
カズトン

自分は、④Okaidiaにカスタマイズしよ〜と!

みなさんもデザインテーマ決まりましたか?

次からデザインテーマの設定を説明していきます。

デザインテーマを設定しよう!

では、実際に設定していきたいと思います。

設定手順は、以下の通りです。

  1. 選んだデザインテーマをダウンロードする。
  2. レンタルサーバーからWordPressにダウンロードしたファイルをアップロードする。
  3. 高度な設定にファイルを指定する。

この3つを行うことで、デザインをカスタマイズすることができます。

一つずつ進めていきましょう!

デザインテーマのファイルをダウンロードしよう

こちらから、テーマをダウンロードできます。

Step1

好きなテーマを選択してください。

8つのデザインの中から一つ決めて、チェックを入れて下さい。

Step2

一番下までスクロールして、「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックしてください。

すると、2つのファイルがダウンロードされます。(prism.jsとprism.css)

  • prism.css = 独自カラーリングファイル
  • prism.js = 独自prism.js

となります。

サーバーからファイルをアップロード

次に先程ダウンロードした2つのファイル(prism.css,prism.js)のファイルをWordPressの中にアップロードします。

色々な方法でWordPreeの中にアップロードすることができますが、ソフトのインストールなどの準備が必要です。

ですので、準備が必要ないレンタルサーバーのマイページからWordPressにアクセスすることにします。

カズトン

自分が使っているレンタルサーバーは、mixhost!

他のサーバーでも同じやり方ができるはずなので、探しながら行ってね!

他のサーバーでもできるように、キーワードを探しながら作業してください。

キーワードは赤色で示しています。

Step1

レンタルサーバーのマイページにログインをして、ファイルマネージャーを開きます。

mixhostの場合は、マイページのショートカットの欄にあります。

Step2

ファイルマネージャーをクリックすると、ファイルの一覧が出ると思います。

その中から次のファイルを順番に開いて行きます。

「public_html」「wp-content」「themes」「自分が扱っているWordPressテーマ」

  1. public_html
  2. wp-content
  3. themes
  4. 自分が扱っているWordPressテーマ

Step3

自分が扱っているWordPressテーマのファイルまで開いたら、その中に先程ダウンロードしたファイル(prism.css,prism.js)をドラッグ、もしくはアップロードボタンからアップロードしてください。

無事にアップロードされたら完了です。

mixhostの場合は、アップロードボタンを押してファイルを読み込むとこのような画面になります。

高度な設定画面にファイル名を記入する

では、最後に高度な設定からファイルを指定して終了です。

独自カラーリングファイルのほうには、「prism.css」

独自prism.jsのほうには、「prism.js」

カスタマイズされているか確認しよう。

実際にプレビューで確認してみました。

変化前

変化後

無事に成功しました!

終わりに

最後まで読んでくれてありがとう

無事にカスタマイズすることができましたか?

どんどんこのサイトもカスタマイズされていきます!

このサイトは、「Stork19」というWordPressテーマを利用しています。

Stork19のカスタマイズ記事を投稿していますので、ぜひ見てみて下さい!

また、WordPressテーマ「Stork19」の購入を検討している方は、こちらの記事も見て下さい。

STORK19アイキャッチ画像

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です