WordPress記事でコマンド結果をターミナル風に表示したい

ターミナル風に tech

“技術ブログ感”を演出したかった

塵積ぶろぐは、きほん技術情報系記事を更新していく予定なので、コマンドやその結果をコピペした記事もどんどん量産予定です。

WordPress+Cocoonテーマでは、それっぽい見た目を作ることができなかったため、CSSカスタマイズで “それっぽく” してみました。

前提

  • WordPress 5.4.2
  • テーマはCocoonを使用(Cocoon子テーマを適用)

デフォルトだとこんなかんじ

まずはデフォルト状態のご紹介。

WordPress フォーマットブロックの コード を使用しています。

カスタマイズ前

うーん。。。

わたしのサイトテーマがかなりミニマルなこともあり、色味がにていて 映えないですよね。。。

ぱっと見でターミナル感を出すならやっぱり黒に近い色がいいでしょう。

CSSクラスの確認

それではカスタマイズのための下準備その1です。

CSSをカスタマイズするにあたり、前述 コード ブロックがCSS上どのクラスに指定されているかを確認する必要があります。

Chromeブラウザで自分のブログ記事へアクセスし、コード表示部分にカーソルを合わせて 右クリック → 検証 を選択します。

Chrome検証機能

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

HTMLソース

お、どうやら「wp-block-code」というクラス指定になっているようですね。

HTMLの確認はここまででOKです。

マネしたいサイトからカラーコードを抽出

カスタマイズのための下準備その2です。

今回は技術情報共有のプラットフォームで有名なQiitaのデザインをパクって参考にしてみました。

今回Webページからカラーコードを抽出するツールとして、Chromeプラグインの ColorPick を使用しました。この手のツールは山ほどあるのでなんでもいいと思います。

適当なQiita記事へアクセスして、ColorPickを起動します。

コマンドなどが書かれているところにカーソルをあわせるとカラーコードがわかります。

ColorPick

これで、背景色は「364549」、文字色は「E3E3E3」ということがわかりました。

カスタマイズの下準備は以上になります。

上書き用CSSを記述

いよいろCSSカスタマイズにはいりましょう。

WordPressの管理画面にログインして、左側メニューの 外観 → テーマエディター を選択します。

WordPress管理画面

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

わたしの場合は、Cocoon子テーマです。

テーマ選択

あとはCSSを記述するだけです。

さきほど確認したコードブロックのクラスに対して、文字色と背景色を指定しましょう。

/* "コード"ブロックに関するカスタマイズ */
.wp-block-code {
	color: #E3E3E3;
	background-color: #364549; 
}

更新を保存して、動作確認。

自分のブログ記事にアクセスしてみます。

カスタマイズ後

ターミナル感(Qiita感?)がでてくれました!

ほんとはフォントも変えようと思ったのですが、まぁそこまでこだわりもないのでこれくらいにしておきましょう。

それでは今回は以上です。

それじゃあまたね。

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