フォントでGoogle Fontを使いたい場合
HTMLにちょっと書き足す＆カスタマイズにCSSを書き加えることで変更できます。
通常であれば「Copy Code」をそのまま使えば良いのですが、Bloggerではそのまま使用できません。
必ずタグを閉じなければいけないなどさまざまなルールがあるため、下記のように書き換えます。
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link href='https://fonts.gstatic.com' link='crossorigin' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Kiwi+Maru&subset=japanese' rel='stylesheet'/>
Bloogerにログインし、左側のメニューから「テーマ」を選びます。
▼をクリックして、「HTMLを編集」を選びます。
<head></head>の中に先ほど修正したコードをペーストします。
保存（フロッピーマーク）をクリックして問題なく保存できたことを確認し、戻ります。
今度は「カスタマイズ」をクリック。
「詳細設定」をクリック。
「ページのテキスト」をクリックする。
「CSSを追加」を選択
これでCSSを入力できるようになるので、下記のように入力。
（※Kiwi Maruの部分を<head></head>で入力したフォント名に変更してください）
!important を入れないと私は無理でした。
* { font-family: "Kiwi Maru", serif; }
.post-title { font-family: "Kiwi Maru", serif; !important;}
.post-title a { font-family: "Kiwi Maru", serif; !important;}保存して、サイトのフォントが変更されているか確認してください。
タイトルや見出しを装飾する
h2やh3のCSSをカスタマイズの部分でCSSを記入することでいい感じにできます。
Bloogerにログインし、左側のメニューから「テーマ」を選びます。
カスタマイズをクリックし、「詳細設定」から「CSSを追加」を選びます。
h3をCSSで装飾することで、「記事のタイトル」の見た目を変更できます。
（同盟名部分）
h2をCSSで装飾することで、「見出し」の装飾を変更できます。
↓例
h3 {
padding: 1rem 2rem;
color: #fff;
background: #ffcc00;
-webkit-box-shadow: 5px 5px 0 orange;
box-shadow: 5px 5px 0 orange;
}
h2 {
padding: 1rem 2rem;
border-left: 6px double #000;
background: #f4f4f4;
}
h2の見出しは、例えば上記のように「参加資格」など見出しにしたい部分を選択し、上のメニューから「見出し」を選びます。
CSSが適用され、CSSに記載された通り同盟名が黄色いボックス、見出しが左側二重線になっています。
見出しのCSSは下記記事を参照させていただきました。
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！