テーマ選定と、デザインCSSによるコードブロック周りのカスタム
はてなブログのテーマ選定
既にこのはてなidでは1つブログを持っているが、ジャンル分けのために本ブログを作ることにした。それにあたり、まずはテーマ選定。
このブログだとコードを書く場面がやたら多いと思うので、そのあたりの実装に重きを置いていそうなプログラマー向けのテーマを選ぶのも考えたが…。自分のキャラ的に、今どきのIT屋さん、特にフロントエンドの方々っぽいものは似合わないなと判断*1。一般向けの中から気に入ったものを探していたところ、こちらを発見した。Roughというテーマで、製作者はKDE (id:jinseirestart)さん。 blog.hatena.ne.jp
上記リンク中にある、
2カラムのシンプルなレスポンシブテーマです。Brutalist Web Design（ブルータリスト ウェブ デザイン） を取り入れて、あえて昔のWebサイトの雰囲気を出した無骨なデザインが特徴になっています。
という言葉通りのデザインに惹かれ導入。
デザインCSS欄を利用したコードブロック体裁カスタム
コードブロック等の表示がどうなるか下記のデモサイトで確認。
hatebu-theme-rought.hatenablog.com
また、実際に自分のブログでプレビューをして挙動を確認した。基本的に一行が長くなると折り返すようになっているようだが、あまりに長いとHOGE=/hoge/hoge:$HOGE...のように、一定以降が省略されてしまう現象があった。
そこで、横スクロール式に変更を検討。
RoughのライセンスがCC-BY-ND 2.1だったので、「あれ？これいじっていいのかな」と思ったが、調べてみたところ、横スクロール化は、はてなブログの「デザインCSS」に追記するだけであり、元のCSSを変更するわけではないようだ*2。
その他、僭越ながらコードブロックの背景色なども変更させていただいた。
最終的には、以下をデザインCSSに追記する形となった。
pre, code { max-height : 500px; overflow : scroll; white-space : pre; text-overflow : clip; } .entry-content code { background-color: #b5cee2; color : #333; } .entry-content pre.code { background-color: #0a2f4d; color : default; }
pre, codeがコードブロックのスクロール部分。
参考にしたのはこちらのブログ。
www.taneyats.com
.entry-content code、.entry-content pre.codeがそれぞれコードブロック、インラインコードの背景色等の変更部分だ。コードブロックの背景はPowerShellターミナルの背景色っぽくしてみたつもりである。
なお、カラーリング変更方法についても先人の知恵を参考にさせていただいた。
kuwamai.hatenablog.com
スクロールの挙動確認をしたところこんな感じ。無事横スクロールが出来ている。
--prefix=test $HOME=/home/User testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
インラインコードについては、本家だと黒背景に白文字という武骨でカッコいいものだったが、薄めの色に慣れていたのもあり（先ほどから何回か登場しているが）現状に至った。まだ暫定ではあるが…。ここに時間を割きすぎて記事がかけなかったら本末転倒である。
