Bloggerのカスタムテーマでグーグルフォントを利用する時は、少しコツが必要だったので覚書メモです。

2021年7月29日木曜日

Blogger サイト作成

グーグルフォント日本語。

Bloggerのカスタムテーマでグーグルフォントを使う際に色々と引っかかって苦労したので備忘録です。

グーグルフォントをBloggerで使うには、少しコツが必要でした。

Bloggerでグーグルフォントを利用する手順。

Google Fonts

Making the web more beautiful, fast, and open through great typography

まず、今回私は日本語フォントを使ったので、日本語対応のフロントページにアクセスします。

使いたいフォントをクリックし、個別ページに移動します。私が使ったのは、Yusei Magicです。

+ Select this style をクリック。

+ Select this styleという部分をクリックすると、横にHTMLソースが出てきます。

コピペに必要な部分。

  <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">

という部分のみをコピーしてください。その後、

 &display=swap

の部分のみを削除して、

 <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic" rel="stylesheet"/>

にします。最後に「 /（スラッシュ）」を必ず入れないとエラーを起こします。ここまで来ると、コピーしたソースコードを<head></head>内にペーストすると準備OKです。その後、スタイルを反映したい要素に

 font-family: 'Yusei Magic', sans-serif;

をペーストするんですが、そのまま使うとエラーが起きるので、フォントファミリーのシングルクォーテーションをダブルクォーテーションに書き換えます。

 font-family: "Yusei Magic", sans-serif;

私の場合の不具合なのかもしれませんが、シングルクォーテーションだとテンプレート保存時にエラーが起きてしまったのですが、ダブルクォーテーションにするとちゃんと動作しました。

ちなみに当ブログのグーグルフォント使用サンプルは、個別記事ページの見出しなどです。

グーグルフォント。

Google Fonts

Making the web more beautiful, fast, and open through great typography

サイト作成関連の書籍。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana | 2019年03月18日頃発売 | Web界隈やデザイナーに大人気! Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML+CSS+Webデザイン本HTMLとCSSとWebデザインを一気にまるごと学べる1つのサイトを実際に作りながら学んでいくやさしい作り●対象読者・これからHTMLとCSSを学びたい人・Webデザイナーにないたい人・この1冊で全部学びたい人におすすめ

HTML5＆CSS3デザインレシピ集

狩野祐東 | 2017年02月発売 | HTML5とCSS3によるWebデザイン制作の、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。テキスト／リスト／リンク／画像／ボックス／テーブル／フォーム／ナビゲーション／レイアウト／レスポンシブWebデザインなど、パーツの種類別にレシピを整理。「あのデザインはどう作るんだろう？」が、スグにわかります。デザイナーからWebプログラマーまで、HTMLを扱うすべての方にお届けします。

図解！　HTML&CSSのツボとコツがゼッタイにわかる本

中田　亨 | 2020年12月15日頃発売 | Chapter01 【基礎】Webサイトの仕組みを学ぼう!Chapter02 【基礎】Webページの構造を決めるHTMLの基礎Chapter03 【基礎】WebページをデザインするCSSLの基礎Chapter04 【応用】表現の幅が広がるCSSの応用テクニックChapter05 【応用】CSSでWebページをレスポンシブにしよう!Chapter06 【実践】Webサイトの共通部分を作成しよう!Chapter07 【実践】トップページを作成しよう!C…

カナリの備忘録。