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

Highlighting Code Blockの背景不具合を解決!【WordPressプラグイン】

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

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

「WordPressでプログラミングのソースコードを表示したい!」と思い、自分もWordPressのプラグインである”Highlighting Code Block”をインストールしました。

ネット上でも評判が良い”Highlighting Code Block“でしたが、使用してプレビューで見てみると・・・

不具合
不具合

「えっ?」ってなりました笑

コメントアウトの周りに白い枠が出てきたり、ソースコードの背景色が付いていました。

「Googleで検索しても、情報が出てこない!」

他のみんなは、キレイに表示されているらしい。

「自分だけかぁ…」と思い、追加CSSにソースコードを貼り付けました。

無事に白枠とソースコードの背景色を消すことに成功したので、みなさんに共有したいと思います。

同じ悩みを持った人に届けばいいなと思っています。

今回の記事は、「“Highlighting Code Block”の背景不具合を解決する方法を解説」です!

解決できたら、こんな感じになります。

解決した場合
解決したら、こうなる!
本記事は、こんな人におすすめ!
  • “Highlighting Code Block”の背景不具合を解決したい人
  • WordPress初心者の人
  • CSSコードが書けない人

本記事は、WordPress初心者やCSSコードが書けない人でもこの問題を解決できるように構成されています。

WordPress初心者の方でもできるように、WordPressの画面と一緒に説明しています。

CSSのコードが書けない人でも、ソースコードをコピペするだけで完結できるようにしています。

“Highlighting Code Block”の基本設定や使い方を確認したい人は、こちらから!

カズトン

では、解決していきましょう!

この記事で、できるようになること

本記事を読んでもらうと、以下の2つのことができるようになります。

  • “Highlighting Code Block”の背景不具合を改善できる。
  • CSSソースコードのコピペで、WordPressのカスタマイズを行うことができる。

1つ目

“Highlighting Code Block”の背景の不具合を直すことができるようになります。

もちろんですよね笑

そのための記事ですから笑

2つ目

CSSソースコードがわからなくても、サイトで紹介されているソースコードをコピペするだけでWordPressのカスタマイズを行うことができるようになります。

本サイトでは、WordPressテーマである「Stork19」のカスタマイズ記事を投稿しております。

こちらのカスタマイズ記事も、CSSソースコードをコピペするだけでWordPressのカスタマイズが行えます。

こちらから、ぜひ見て下さい!

アイキャッチ画像

今回の問題点(悩んでいる点)

今回の問題点は以下の2つです。

今回の問題点
  1. コメントを書くと、周りに白い枠で出てくる。
  2. コードの後ろに、背景色が付いている。

また、初めにこの問題が発生している環境をまとめておきます。

同じ環境の方は、本記事の解決方法で解決できると思います。

問題が発生している環境

では、問題が発生しているときの環境についてまとめていきます。

WordPressのテーマは「Stork19」を使っています。

また、WordPressやプラグインのバージョンの確認します。

WordPressなどバージョン
WordPrees5.8.1
WordPressテーマ「Stork19」2.7.0
Highlighting Code Block1.3.0
バージョンの確認

WordPressのテーマが「Stork19」だから、おきている不具合かもしれません。

ですが、他のテーマでもCSSのコードを貼り付けることで不具合を改善することができます。

問題1:コメントアウトを書くと、周りに白い枠線が出てくる。

編集画面では、キレイに表示されています。

しかし、プレビュー画面でチェックしてみると以下のような表示になっています。

不具合1
不具合1
カズトン

この白の枠線はなんなんだ!この枠線いらね〜〜

問題2:ソースコードの背景に不必要な背景色がある。

こちらも編集画面では、なんの問題もなくキレイに表示されています。

プレビューで見てみると、以下のような表示がされています。

不具合2
不具合2
カズトン

余計な背景色はいらないんだよな〜!いる人はもちろん残してていいよ?

解決方法

では、早速ですがこの問題を解決していきたいと思います。

まず初めに、「解決する手順」を説明します。

その後に、それぞれの問題に分けて解決方法を解説していきます。

問題1では、白い枠線を消す方法を解説します。

問題2では、後ろの背景色を消す方法を解説します。

問題2の方では、「この背景色は残しておきたい!」って方もおられると思います。

そんな方は、問題2をスキップしてください。

解決する手順

2つの問題を解決する手順は以下の通りです。

解決手順
  1. カスタマイズするためのCSSコードをコピーする。
  2. WordPressの追加CSS項目にペーストする。

解決手順は、たったの2つです。

すごくカンタンですよね!

問題1の解決方法

では、問題1で取り上げられた「コメントアウトの周りできる白い枠線」を解決していきます。

手順

Step1

以下のCSSコードをコピーしてください。

/*コメントアウトの周りの白い枠線を消去*/
.comment{
  border:none;
}

Step2

「WordPressのダッシュボード」の画面を開いて下さい。

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

次に、「外観」→「カスタマイズ」の順に進んでください。

外観からカスタマイズに

左欄の一番下にある「追加CSS」を開いてください。

追加CSS

Step3

追加CSSの左欄に先ほどコピーした「CSSのコード」をペースト(貼り付け)してください。

CSSのコード1

貼り付けができたら、上にある「公開」をクリックします。

公開

これで、完了です。

チェック

実際にカスタマイズができたか、プレビューでチェックしてみてください。

問題1解決
問題1解決

無事に、白い枠線がなくなっていることが確認できました。

カズトン

問題1の解決クリア!!お疲れ様!

問題2の解決方法

続いて、問題2の「ソースコードの不必要の背景色」を消して解決しましょう。

手順

Step1

以下のCSSコードをコピーしてください。

/*ソースコードの不必要な背景色を消去*/
.hcb_wrap pre code{
  background:none;
}

Step2

「WordPressのダッシュボード」の画面を開いて下さい。

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

次に、「外観」→「カスタマイズ」の順に進んでください。

外観からカスタマイズに

左欄の一番下にある「追加CSS」を開いてください。

追加CSS

Step3

追加CSSの左欄に先ほどコピーした「CSSのコード」をペースト(貼り付け)してください。

CSSコード2

貼り付けができたら、上にある「公開」をクリックします。

公開

これで、完了です。

チェック

こちらのちゃんとカスタマイズができたか、プレビューで確認してみましょう。

問題2解決

ソースコードの背景色が消えていることが確認できました。

カズトン

問題2も解決完了です!お疲れ様!

補足説明:プラグインの設定・使い方

補足で”Highlighting Code Block“の設定項目や使い方について説明していこうと思います。

「設定」→「使い方」の順番に説明していきます。

各種設定の説明

まずは、”Highlighting Code Block”の設定画面を開きたいと思います。

「WordPressのダッシュボード」から、「設定」→「[HCB]設定」と進んでください。

設定画面

すると、設定画面が開きます。

HCBとは、Highlighting Code Blockの頭文字だけを取った略です。

基本設定

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

基本設定(Highlighting Code Block)
基本設定の項目説明
  1. 言語の表示
  2. 行数の表示設定
  3. コピーボタンの有無
  4. フォントスムージング
  5. コードカラーリング(フロント側)
  6. コードカラーリング(エディター側)
  7. フォントサイズ(PC)
  8. フォントサイズ(SP)
  9. コードの”font-family”

①言語の表示

言語の表示にチェックをすると、どの言語のコードかを一緒に表示してくれます。

②行数の表示設定

行数の表示設定にチェックをすると、コードの行数が表示されるようになります。

③コピーボタンの有無

書いたソースコードの全文をこぴーしてくれるボタンをつけるか、つけないかの選択ができます。

④フォントスムージング

フォントスムージングをオンにすると、フォントを拡大したときの輪郭をキレイに補正してくれます。(コードを拡大することはあまりないのでいらないかと)

⑤コードカラーリング(フロント側)

フロント側とは、サイト(プレビュー)で見た色のことです。

Light(白) or Dark(黒)のどちらかを選択できます。

サイト表示の見た目

⑥コードカラーリング(エディター側)

エディター側とは、記事を編集する画面で見た色のことです。

こちらも、Light(白) or Dark(黒)のどちらかを選択できます。

記事編集画面での見た目

⑦フォントサイズ(PC)

PCのときの、フォント(文字)の大きさを指定できる。(デフォルトでいいかと)

⑧フォントサイズ(SP)

スマホのときの、フォント(文字)の大きさを指定できる。(デフォルトでいいかと)

⑨コードの”font-family”

fontの変更ができる。(特にこだわりのフォントがなければデフォルトでいいかと)

高度な設定

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

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

高度な設定説明が長くなるので割愛したいと思います。

高度な設定を詳しく知りたい場合は、こちらの記事を見て下さい。

アイキャッチ画像

実際の使い方

記事作成画面での使い方を説明していきます。

ソースコードの作成方法

Step1

ブロックから”Highlighting Code Block”をクリックしてください。

使い方1
使い方2

Step2

ソースコードを記述する。

使い方3

Step3

今回記述するプログラミング言語を選択

「-Lang Select-」をクリック

使い方4

記述するプログラミング言語を選択します。

使い方5

Step4

書いているファイルを指定

例えば、CSSを書くなら「style.css」で、HTMLを書くなら「index.html」など。

使い方6

Step5

特定の行を目立たせたいときは、data-line属性値に目立たせたい行数を記述。

使い方7

2行目に選択すると、以下のような白いラインが表示されます。

使い方8

プレビューでは?

プレビューでの操作確認を一つしたいと思います。

基本設定でも触れたコピーボタンです。

右端のボタンをクリックする。

すると、ソースコード全体が選択されます。

コマンド+C(コピー)をすると、楽にコピー作業ができます。

終わりに

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

最後まで、読んでくれてありがとうございます!

無事に解決することができましたか?

もし解決ができなかった場合は、TwitterのDMでもください!

コメントを残す

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