このはてなブログのデザインを変更した

なんとなくこのブログのシンタックスハイライトのデザインを変えたいなぁと思って、せっかくだからブログのテーマごと変更するかーってテーマストアを眺めてたら、自分で自分が好きな感じのテーマを作ってみるのも面白い・・・か、と思ったのでやってみた。

スマホ

わりと気に入っている。

コード

たまに間違えて上書きして消してしまったりするので、念のためGitHubに置いといた。

https://github.com/bufferings/hatenablog-my-theme

自分が使ってる機能だけ対応

はてなブログにはいろんな機能や設定があるけど、それを全部サポートするのは僕には無理なので、自分が使ってる機能だけに絞って対応した。ブログのコメント機能とか、はてなのキーワード機能とかはオフにしてるから対応してない。CSSにはボイラープレートのままのコードがあるだけ。

細かいことは気にしない

自分が見た目を気に入ればいいやという気持ちでCSSを直接ごにょごにょしながら作った。中で float:left を使おうと !important を使おうと、共通の色を変数化してなかろうと問題ない！動けばよかろうなのだー！

レスポンシブ対応

レスポンシブ対応で作った。PC用とスマホ用を別々に作るの無理だと思ったので。

コードのシンタックスハイライト

これがいちばん対応したかったやつ。もともとは highlight.js でごにょごにょしてたので、今回は Prism を使ってみようと思って↓こちらのブログを参考に設定した。感謝。

tech.natsuneko.blog

CSSには、TOMORROW NIGHTを選んだ。何日か前に書いたTypeScriptのコードはこんな感じにハイライトされるようになった。満足。

type A = Extract<MyUnion, { tag: "a" | "b" }>

type cases = [
    Expect<Equal<A, { tag: "a" | "b", value: boolean }>>,
]

ちょこっと触ったところ

参考にした記事にも書かれているとおり、はてなのCSSが !important でシンタックスハイライトの色付けをしてるので、それを上書きしないといけない。だからCSSをダウンロードしたあとに、色関係は !important してる。

はみ出した部分

はてなのCSSでは、preタグではみ出した部分は三点リーダーにするようになってるのでアンセットしといた。ついでにフォントはちょこっと小さくしといた。

    /* 追加 */
    text-overflow: unset;
    font-size: 0.8em;

`code` 要素を足しといた

pre の中に code がある方がいいかなと思ったので、なんとなく足しといた。

document.addEventListener("DOMContentLoaded", (event) => {
    document.querySelectorAll("pre.code").forEach((pre) => {
        const code = document.createElement('code');
        code.textContent = pre.textContent;
        code.className = `code language-${pre.getAttribute('data-lang')}`;
        pre.innerText = '';
        pre.appendChild(code);
        window.Prism.highlightElement(pre);
    });
});