ゆるおたノート

Tomorrow is another day.

【VBA×CSS】ブログの見た目を少し変えてみた話。

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

最近は、もっぱらVBAGASでせこせこ写経に取り組んでいます。

それで、学んだコードの記録ついでに、ちょこっとだけリファレンスを更新したんです。
yuru-wota.hateblo.jp

でも、なんか見た目が気に食わなくて…

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

そう言えば、ちょっと前にProgateというサイトでCSSを学んでたので、
その復習と腕試しも兼ねて、ソースコードの見た目を弄ってみました。

自分のVBEがモデルですが、結果的にちょっとQiita風味にもなって満足しています。

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

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

サンプル

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

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

でも、概ね私のVBEの表示に近くなりました。

CSSのソース

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

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

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

  font-size  : 85%;
  font-family: Consolas,
               'Meiryo UI',
               'メイリオ',
               Meiryo,
               '游ゴシック Medium',
               '游ゴシック体',
               'Yu Gothic Medium',
               YuGothic,
               'ヒラギノ角ゴ ProN',
               'Hiragino Kaku Gothic ProN',
               'MS Pゴシック',
               'MS PGothic',
               sans-serif;

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

/* 特殊文字・記号(←変数名とか?) - white */
.synSpecial    { color: #ffffff; }
/* プリプロセッサ - White */
.synPreProc    { color: #ffffff; }
/* コメント - ピンク */
.synComment    { color: #FF33CC; }
/* データ型 - 水色 */
.synType       { color: #66FFFF; }
/* ステートメント - DarkTurquoise */
.synStatement  { color: #00CCCC; }
/* 定数 - Khaki */
.synConstant   { color: #F0E68C; }
/* 識別子 - Gold */
.synIdentifier { color: #FFD700; }

使い方

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

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

色指定のクラス

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

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

補足

  • 同じ黄色と水色でちょっと差をつけているのは、気分です。
    使い勝手によっては、後で変えるかもしれない。

  • VBないしVBA向けに調整してあるため、CSSとしては少し見づらいかもしれません。
    ご了承ください。

  • フォントは上から順に優先度が高く、読者の環境に合わせて適用されるようになっています。

  • line-Heightクラスで、コードブロック内の行間も詰めてあります。
    遊びで試しに 50% にしたらとんでもないことになりました(笑)

  • CSSは「マークアップ言語のひとつで云々…」なのでプログラム警察に怒られるかなと迷いましたが、
    今回は「プログラム」カテゴリの記事としてアップしてます。
    マークアップ関係の記事は今のところ書いてないし、そんなに読まれる記事でもないと思うので…
    気になる方はごめんなさい。

参照元

以下を参考にさせていただきました。ありがとうございました!

コードブロックのカスタマイズ

載っているコード自体はVBAではなくC#用とのことです。
今回のセレクタの使い方を含め参考にさせていただきました。
takachan.hatenablog.com

セレクタの判別方法

Google Chromeでページの要素を取得して確認しました。
kouten0430.hatenablog.com

VBEの色設定

(コメント以外は)こちらの内容を基にしています。
tonari-it.com

色設定については上記とほぼ同じ内容ですが、VBAコーディングはこちら↓の本から勉強しました。
すべてはここから始まった。

…信者と言われてもかまわないさ。
新刊が楽しみです。