GitHub Pagesのテーマを変更したい
2024/10/15
このブログは GitHub Pages を使っている(使っていた)。
裏で Linux が動いたりはしないので作ることができるのは静的なページだけであるが、ブログであればそれで十分である。
Netlify は Public リポジトリなら無料で使えたと思うので、ビルドするようなサイトだったらそちらの方が楽かもしれない。
普通に HTML ファイルを置いていく方法もあるが、MarkDown を HTML に変換する機能があるためそれを使っている。
その際、何もしないと見た目がよろしくないのでテーマを設定できる。
以下のようにカスタマイズもできるのだが、面倒なのでデフォルトで使用できるいくつかあるテーマから pages-themes/cayman を選んでいる。
Jekyll を使用して GitHub Pages サイトにテーマを追加する
デフォルトのテーマはここに見えているリポジトリのどれか。
軽いカスタマイズであれば各テーマの README に書いてあるとおりにやるとできる。
Caymanだとここで、サイトのタイトルや ダウンロード表示の有無、Google Analytics の ID くらいであれば config ファイルを変更するだけでできる。
もう少し細かいカスタマイズだと CSS を変更したり基本レイアウトの HTML ファイルを持ってきて編集することもできる。
ここのサイトで変更しているのはこの辺りか。
- faviconを出す(default.html)
- Google Analyticsのタグ埋め込み(configで変更できるのをこれを書いていて知った。。。)
- フッタにホームに戻るリンクを追加(default.html)
H3～H6は文字の前に深さを表す|を出す(CSS)
Cayman でよいと思って採用していたのだが、文字と背景のコントラストがまあまあ低い。
というか、文字が真っ黒でない。
私がどうもコントラストがきっちり付いていないと目がきついようで、フォントでアンチエイリアシングがきついと目が文字を追わなくなるくらいである。
なので MSゴシック系を愛用しているのだが、まあフォントのことは今回は良かろう。
Hackerにしよう
というわけで、コントラストがしっかりしてそうな hacker にしよう。
_config.ymlだけ書き換えると・・・なんか左にびたっと張り付いてしまった。
Caymanのdefault.htmlとHackerのdefault.htmlに違いがあるためのようだ。
まあ、それはそうか。
ということでdefault.htmlを書き換え、なるべくincludes/head-custom.htmlなどに書いて次回の変更作業が楽になるようにする。
<li><ol>のリストが ＞＞ なのが気になったので丸画像に置き換える。
が、ちょっと上下がずれる。なぜだ。
