Twenty Twenty-One 5, サイトタイトルのサイズとフォントを変えてみた

Twenty Twenty-Oneのサイト名のサイズを大きくして、ついでにフォントを変えてみました。なんかパンチがないよね。

• 

• 

管理画面の『外観 → カスタマイズ → 追加CSS』に下記のコードをコピペです。

/* サイトタイトルの大きさを変える */
.site-title {
  font-size: var(--global--font-size-xl);
}

サイトタイトルのフォントサイズは、テーマの変数を使いました(18rem)。「font-size: 18rem」などと言うように数値の方が分かりやすいカモ。お好みで。

参考：親テーマのFont Family、Font Size、Font Height情報

サイトタイトル文字フォントは、ホームはリンク無し、他のページはリンクあり。なので、2か所変更。例はYu Gothicの場合。

/* サイトタイトルのフォントを変える */
.site-title, .site-title > a {
	font-family:'Yu Gothic',YuGothic,sans-serif;
	font-weight: 600;
}

因みに、サイト名のリンクの下線を外したい人は、上記の最後に「text-decoration: none;」と書き加えるか、もしくは、下記を追記。

/* サイトタイトルのリンク下線を外す */
.site-title a { 
	text-decoration: none;
}