“技術ブログ感”を演出したかった
塵積ぶろぐは、きほん技術情報系記事を更新していく予定なので、コマンドやその結果をコピペした記事もどんどん量産予定です。
WordPress＋Cocoonテーマでは、それっぽい見た目を作ることができなかったため、CSSカスタマイズで “それっぽく” してみました。
前提
- WordPress 5.4.2
- テーマはCocoonを使用（Cocoon子テーマを適用）
デフォルトだとこんなかんじ
まずはデフォルト状態のご紹介。
WordPress フォーマットブロックの コード を使用しています。
うーん。。。
わたしのサイトテーマがかなりミニマルなこともあり、色味がにていて 映えないですよね。。。
ぱっと見でターミナル感を出すならやっぱり黒に近い色がいいでしょう。
CSSクラスの確認
それではカスタマイズのための下準備その１です。
CSSをカスタマイズするにあたり、前述 コード ブロックがCSS上どのクラスに指定されているかを確認する必要があります。
Chromeブラウザで自分のブログ記事へアクセスし、コード表示部分にカーソルを合わせて 右クリック → 検証 を選択します。
するとHTMLソースが参照できるので、コードブロックがHTML上どの様な記述となっているか確認してみましょう。
お、どうやら「wp-block-code」というクラス指定になっているようですね。
HTMLの確認はここまででOKです。
マネしたいサイトからカラーコードを抽出
カスタマイズのための下準備その２です。
今回は技術情報共有のプラットフォームで有名なQiitaのデザインをパクって参考にしてみました。
今回Webページからカラーコードを抽出するツールとして、Chromeプラグインの ColorPick を使用しました。この手のツールは山ほどあるのでなんでもいいと思います。
適当なQiita記事へアクセスして、ColorPickを起動します。
コマンドなどが書かれているところにカーソルをあわせるとカラーコードがわかります。
これで、背景色は「364549」、文字色は「E3E3E3」ということがわかりました。
カスタマイズの下準備は以上になります。
上書き用CSSを記述
いよいろCSSカスタマイズにはいりましょう。
WordPressの管理画面にログインして、左側メニューの 外観 → テーマエディター を選択します。
テーマエディターが開いたら、画面右側の選択されているテーマが意図したものになっているか必ず確認しましょう。
わたしの場合は、Cocoon子テーマです。
あとはCSSを記述するだけです。
さきほど確認したコードブロックのクラスに対して、文字色と背景色を指定しましょう。
/* "コード"ブロックに関するカスタマイズ */
.wp-block-code {
color: #E3E3E3;
background-color: #364549;
}
更新を保存して、動作確認。
自分のブログ記事にアクセスしてみます。
ターミナル感（Qiita感？）がでてくれました！
ほんとはフォントも変えようと思ったのですが、まぁそこまでこだわりもないのでこれくらいにしておきましょう。
それでは今回は以上です。
それじゃあまたね。
