“技術ブログ感”を演出したかった
塵積ぶろぐは、きほん技術情報系記事を更新していく予定なので、コマンドやその結果をコピペした記事もどんどん量産予定です。
WordPress+Cocoonテーマでは、それっぽい見た目を作ることができなかったため、CSSカスタマイズで “それっぽく” してみました。
前提
- WordPress 5.4.2
- テーマはCocoonを使用(Cocoon子テーマを適用)
デフォルトだとこんなかんじ
まずはデフォルト状態のご紹介。
WordPress フォーマットブロックの コード を使用しています。

うーん。。。
わたしのサイトテーマがかなりミニマルなこともあり、色味がにていて 映えないですよね。。。
ぱっと見でターミナル感を出すならやっぱり黒に近い色がいいでしょう。
CSSクラスの確認
それではカスタマイズのための下準備その1です。
CSSをカスタマイズするにあたり、前述 コード ブロックがCSS上どのクラスに指定されているかを確認する必要があります。
Chromeブラウザで自分のブログ記事へアクセスし、コード表示部分にカーソルを合わせて 右クリック → 検証 を選択します。

するとHTMLソースが参照できるので、コードブロックがHTML上どの様な記述となっているか確認してみましょう。

お、どうやら「wp-block-code」というクラス指定になっているようですね。
HTMLの確認はここまででOKです。
マネしたいサイトからカラーコードを抽出
カスタマイズのための下準備その2です。
今回は技術情報共有のプラットフォームで有名なQiitaのデザインをパクって参考にしてみました。
今回Webページからカラーコードを抽出するツールとして、Chromeプラグインの ColorPick を使用しました。この手のツールは山ほどあるのでなんでもいいと思います。
適当なQiita記事へアクセスして、ColorPickを起動します。
コマンドなどが書かれているところにカーソルをあわせるとカラーコードがわかります。

これで、背景色は「364549」、文字色は「E3E3E3」ということがわかりました。
カスタマイズの下準備は以上になります。
上書き用CSSを記述
いよいろCSSカスタマイズにはいりましょう。
WordPressの管理画面にログインして、左側メニューの 外観 → テーマエディター を選択します。

テーマエディターが開いたら、画面右側の選択されているテーマが意図したものになっているか必ず確認しましょう。
わたしの場合は、Cocoon子テーマです。

あとはCSSを記述するだけです。
さきほど確認したコードブロックのクラスに対して、文字色と背景色を指定しましょう。
/* "コード"ブロックに関するカスタマイズ */ .wp-block-code { color: #E3E3E3; background-color: #364549; }
更新を保存して、動作確認。
自分のブログ記事にアクセスしてみます。

ターミナル感(Qiita感?)がでてくれました!
ほんとはフォントも変えようと思ったのですが、まぁそこまでこだわりもないのでこれくらいにしておきましょう。
それでは今回は以上です。
それじゃあまたね。