【CSS】コードブロックの見た目をVBA用に変えてみた話。

お久しぶりです。ブログが更新できていなくてごめんなさい。

最近は、もっぱらVBAとGASでせこせこ写経に取り組んでいます。
それで、学んだコードの記録ついでに、ちょこっとだけリファレンスを更新したんです。
【随時編集】VBAリファレンス集 - ゆるおたノート
でも、なんか見た目が気に入らなくて…

前々から気になってたことでもあって、先生のサイトみたいな見た目にしたかったけど、これはインストールとか要るみたいで~~なんかめんどくさくて~~。
よくお世話になっているブログも最近見た目が変わって、カッコイイなーと思っていました。

…ふと「そう言えばちょっと前にProgateというサイトでCSSを学んでたなー」と思い出して、その復習と腕試しも兼ねて、ソースコードの見た目を弄ってみました。
自分のVBEがモデルですが、結果的にちょっとQiita風味にもなって「プログラミング勉強してます感」が増したので満足しています。

ただ、作業にあたってVBA プログラマー向けの記事を見つけられなかったので、教えることは2度学ぶことというノンプロ研（というか主宰タカハシさん）の教えに則り、僭越ながらそのコードについてご紹介します。

※ついでに、このブログ本文の文字も少し小さくしました。
読みづらい等ありましたら、ご遠慮なくコメントいただければと思います。

サンプル
カスタマイズのコード
参考記事

サンプル

Sub test1()
    'これはVBA向けの表示サンプルです。コードは適当です。
    Dim tmpMsg As string
    tmpMsg = "こんな" & ThisWorkbook.ActiveWorksheet.Cells(1,1).Value & "感じです。"
    msgbox tmpMsg
End Sub

はてなブログとしてはマイナーな言語なのか、セレクタ *1の基準がちょっと微妙なので、一部ヘンなところで色が変わるところもあります。

（それさえ目を瞑れば）おおむね私のVBEの表示に近くなったので、とりあえずは良しとします。

カスタマイズのコード

今回のソースコードを残しておきます。色だけでなくフォントも弄りました。

<2019/05/07追記>
フォントを基本的に等幅のものになるよう変更し、少しサイズも下げました。

<2020/10/30追記>
フォントと色を（個人的に）より読みやすいものに変更しました。

/*--------------------------------------
  シンタックス・ハイライトのフォント
--------------------------------------*/
.entry-content pre.code {
  line-height: 1.5em; /* 行間を詰める */

  font-size  : .85em;
  font-family: 'Roboto Mono',
               'BIZ UDゴシック',
                Consolas,
               'メイリオ',
                Meiryo,
               'ヒラギノ角ゴ ProN',
               'Hiragino Kaku Gothic ProN',
               'ＭＳ ゴシック',
               'MS Gothic',
                sans-serif;

  color           : #f0f0f0; /* white 文字色 */
  background-color: #000000; /* black 背景 */
}

/* シンタックス・ハイライト */
.synSpecial    { color: #66FFFF; } /* (明るめの水色) 特殊文字・記号（←変数名とか？） */
.synType       { color: #66FFFF; } /* (明るめの水色) 型 */
.synComment    { color: #FF33CC; } /* (ピンク)  コメント */
.synPreProc    { color: #f0f0f0; } /* White    プリプロセッサ */
.synIdentifier { color: #FFD700; } /* Gold     識別子 */
.synConstant   { color: #F0E68C; } /* Khaki    定数 */
.synStatement  { color: #00CCCC; } /* DarkTurquouse ステートメント */

使い方

余裕と需要があったら、あとで画像を追加します。

はてなブログの管理画面に入る
サイドバーから デザインを選択
をクリックしてカスタマイズタブを開く
デザインCSSを選択
表示されたテキストボックスに、↑のコードをコピペ
※お好みでline-height～sans-serif;の部分は削ってください。

色指定のクラス

コメントにも入れてありますが、分かっている範囲で簡単に表にしてみました。
まだ勉強不足で？だらけですが…

クラスとプロパティ	意味	カラーコード	VBA用語	例
.entry-content pre.code { background-color: ***; }	コードブロックの背景	#000000 Black（背景）	-	-
.entry-content pre.code { color: ***; }`	通常の文字色	#f0f0f0 White	オブジェクト、変数名、プロパティなど	`Thisworkbook`, `tmpMsg`, `FormatConditions`, ...
.synSpecial { color: ***; }	特殊文字・記号	#66FFFF （濃い目の水色）	（その他の予約語とか変数名？）	`start`, ...
.synPreProc { color: ***; }	プリプロセッサ	#f0f0f0 White	（一部のプロパティとメソッド？）	`Count`, `Add`, ...
.synComment { color: ***; }	コメント	#FF33CC （濃い目のピンク）	コメント	`'ほげほげ`
.synType { color: ***; }	データ型	#66FFFF （濃い目の水色）	データ型	`String`, `Long`, `Variant`, ...
.synStatement { color: ***; }	ステートメント	#00CCCC DarkTurquoise	キーワード	`Sub`, `With`, `If`, ...
.synConstant { color: ***; }	定数	#F0E68C Khaki	真偽値、名前付き引数等の定数、数字など	`True`, `xlUp`, `0`, ...
.synIdentifier { color: ***; }	識別子	#FFD700 Gold	識別子（とVBA関数？）	`Msgbox`, `UBound`, `InStr`, ...

補足

フォントは上から順に優先度が高く、読者の環境に合わせて適用されるようになっています。
同じ黄色と水色でちょっと差をつけているのは、気分です。
使い勝手によっては後で変えるかもしれません。
line-Heightプロパティで、コードブロック内の行間も詰めてあります。
遊びで試しに 50% にしてみたらとんでもないことになりました笑
VBA（というかVB）向けに調整してあるため、他言語のコードブロックとしては少し見づらいかもしれません。
CSSは「マークアップ言語のひとつで云々…」なので、プログラム警察に怒られるかなと迷いましたが、今回は「プログラム」カテゴリの記事としてアップしてます。
マークアップ関係の記事は今のところ書いてない~~し、そんなに読まれる記事でもないと思う~~ので…
気になる方はごめんなさい。