JekyllのChirpyテーマをカスタマイズしたい
デザインが部分的に気に入らない
このブログに使っているのはChirpyというテーマ。
デフォルトでは左上にアイコン(アバターというらしい)がでかでかと表示されるようになっているが、好みに合わない(いらない)。
あと漢字がちょっと怪しい感じになっているので、フォントを変えて日本スタイルの漢字にしたい。
それからサブタイトルがイタリックなのも気に入らない。
どうやって変えるのー。
調べると、テーマのrepoのassets/css/jekyll-theme.scssを自分のところの同パスにコピーするといいらしい。
自分のブログの一番上から見てこのパスになる位置だ。一番上は私の場合はblog/というディレクトリ。
ここから見て同じパスに配置するので、blog/assets/css/jekyll-theme.scssを作る。通り道になるはずのフォルダがなければ素直に作る。リポジトリのファイルを落としてきているならassets/css/jekyll-theme.scssをそっちからこっちにそのままコピペすればいい。単純だ。
ちなみに中をのぞくとこんな感じで、なんと親切に「ここに追記してね」というコメントがある。
1
2
3
4
5
6
7
8
9
10
11
---
---
@import 'main
{%- if jekyll.environment == 'production' -%}
.bundle
{%- endif -%}
';
/* append your custom style below */
ここに書けばできるということなのか。ほんとかー？
真実はやればわかる。いざ確認。
…とはいえ、CSSをいじっていなければどちらにせよ変化がないので判断できない。だったらいじればいいじゃない、ですね。
SCSSって使ったことないけど、見た目ほぼCSSな気がする。というわけで雑にCSSのつもりで書く。
とりあえず、ただの輪っかになっているアイコンの円を消したい。
CSSはセレクタの書き方によってどの効果を適用するか変わってしまうので、開発者ツールでどんなセレクタでどう指定されているのか入念に確認する。
Chromeなら、このままクリックすれば、Stylesタブで適用されているスタイルの一覧が見れる。
見せ方を指定するdisplayのある部分は、
1
2
3
4
#sidebar #avatar {
display: block;
/* 略... */
}
こうなっていた。ので、多分#sidebar #avatarでdisplay: none;とでも指示してやれば理論上はうまくいく。多分。ということで、/* append your custom style below */の後に
1
2
3
4
5
6
7
8
/* 略 */
/* append your custom style below */
#sidebar #avatar {
display: none;
}
こんな感じで追加してみた。
では、いよいよ検証。
サーバ再起動してリロードしますと、
アイコン枠が消えています。なるほど。
じゃあ、あとの不満もこのノリで解決できるかな。
そうそう、もしあなたにもこのコードが必要なら、どうぞコピペして使ってください。
雑に日本語フォントにする
1
2
3
body {
font-family: "BIZ UDPゴシック", "Source Sans Pro", sans-serif;
}
とりあえず初めからwebフォントが入っていたSource Sans Proは残しといて、sans-serifな気持ちもわかるので残す。もともとあったMicrosoft Yaheiは変な漢字の原因なので消す。最初のBIZ UDPゴシックは私が好きなフォントです。軽やかで優しい雰囲気が素敵だと思うのです。
もちろん、コピペされるご予定の方も何かこだわりがあればそちらに変えてみてください。誰かが自分のこだわりを語っている記事は好きですよ。
header辺りのフォントも日本語フォントにする
1
2
3
4
header .post-desc, .site-title, #search-results a, h5, h4, h3, h2, h1 {
font-family: "Noto Sans Mono", "Source Sans Pro", sans-serif;
font-weight: bold;
}
ヘッダー要素のCSSをDevToolsで漁ってセレクタコピペ。あとは好きなフォントとweight: bold;。
headerは目立たせたい部分ですから、bold感がわかりやすいフォントから選ぶことにしました。
Noto Sans Monoってシマエナガみたいでかわいいと思うんです。
サブタイトルのイタリックを消す
こっちはちょっとめんどくさい。 サブタイトルはこんな指定でイタリックになっている。
!importantがある。上書きできんの？と調べたら、こういう時はもっと強いセレクタを用意しなきゃならないらしい。
でも我々には開発者ツールがある。開発者ツールは素晴らしい。属しているクラスがまるわかりなのだから。
1
<p class="site-subtitle fst-italic mb-0">
ということでこう。
1
2
3
.site-subtitle.fst-italic {
font-style: normal !important;
}
できた。
シンタックスハイライトを付け直す
ダークモードで見ているとなぜかCSSコードブロックのidセレクタの色がありませんでした。
つけましょ。寂しいもん。
1
2
3
4
5
6
7
@media (prefers-color-scheme: dark) {
/* cssではidだった */
html:not([data-mode]) .highlight .nf, html[data-mode=dark] .highlight .nf {
color: #e9b2e3;
}
}
これはclassのセレクタのハイライトからコピペしてきた。class部のハイライトに.ncというクラスが使われていたが、idのは.nfだったのでそこを書き換えた。
それから、ライトモードで見るとclassとは違う色が割り振られていたので色も変えておいた。
この色は私がEmacsでCファイルを開いたときに#include等のプリプロセッサ命令につく色をもとにした。シャープ始まりなので。
まとめ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* アイコン非表示 */
#sidebar #avatar {
display: none;
}
/* 基本のフォント変更 */
body {
font-family: "BIZ UDPゴシック", "Source Sans Pro", sans-serif;
}
/* headerなどのフォント変更 */
header .post-desc, .site-title, #search-results a, h5, h4, h3, h2, h1 {
font-family: "Noto Sans Mono", "Source Sans Pro", sans-serif;
font-weight: bold;
}
/* ブログサブタイトルのイタリック解除 */
.site-subtitle.fst-italic {
font-style: normal !important;
}
/* シンタックスハイライト修正 */
@media (prefers-color-scheme: dark) {
/* cssではidだった */
html:not([data-mode]) .highlight .nf, html[data-mode=dark] .highlight .nf {
color: #e9b2e3;
}
}