Bloggerブログでフォントを変更する方法

結城永人 -2022年2月23日 (水)

Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー（▼）のHTMLを編集かバックアップと元に戻すで可能だ。

ガジェットのフォントの変更
英数字のフォントのカスタマイズ
CSSによるフォントの変更
ソースコードの指定先について
Variableタグから変更する
Webフォントを導入する

ガジェットのフォントの変更 Bloggerのテーマデザイナーのページのテキストのフォントの編集

テーマデザイナー｜Blogger

Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。テンプレートによって項目の種類や数は変わる。

公式テーマのContempoで変更可能なフォント

ページのテキスト（個別に指定されない全て）
ブログタイトル（ヘッダー）
タブのテキスト（項目のみ）
投稿
- 投稿タイトルのフォント
- 投稿タイトルのストリームのフォント
- 投稿テキストのフォント（人気の投稿を含む）
引用のフォント
検索（入力文字）

公式テーマのSimpleで変更可能なフォント

ページのテキスト（個別に指定されない全て）
ブログのタイトル（ヘッダー）
タブのテキスト（項目のみ）
投稿タイトル（投稿とスニペット）
日付ヘッダー（投稿タイトルの直下）
ガジェット（タイトル）

テーマデザイナーによるフォントの変更はテーマ毎に決められていて太さと向きも併せて直ぐに設定できる。英数字のフォントのカスタマイズテーマデザイナーによるフォントの変更は簡単で便利だけど、ただし注意しなくてはならないのはBloggerで用意されるフォントは英数字しかない。つまり日本語のブログでテーマデザイナーの選択肢からフォントの変更を行っても実際に反映するのは英数字だけだからそれ以外のフォントの変更には使えない。CSSによるフォントの変更 BloggerのテーマデザイナーのCSSを追加

テーマデザイナー｜Blogger

テーマデザイナーの紹介設定で用意されてない英数字や日本語を含めてあらゆる言語を完全にカスタマイズするにはテーマデザイナーのCSSを追加かHTMLを編集やバックアップと元に戻すでテンプレートのソースコードのCSSを編集する。

関連ページ

Bloggerブログのフォントを日本語向けで表示するカスタマイズ

ソースコードの指定先について BloggerのHTMLを編集のCSSのソースコード

HTMLを編集｜Blogger

CSSでブログにデザインを付けるにはソースコードのどこなのかを指定しなくてはならない。テンプレートによって違うから調べなくてはならない。

公式テーマのContempoのガジェットの指定先

ページのテキスト（個別に指定されない全て）
body
ブログタイトル（ヘッダー）
.Header h1
タブのテキスト（項目のみ）
.tabs .overflow-button a, .tabs li a
投稿
- 投稿タイトルのフォント
  .post-title
- 投稿タイトルのストリームのフォント
  .post-title a
- 投稿テキストのフォント（人気の投稿を含む）
  .post-body, .PopularPosts,.PopularPosts h3.title a
引用のフォント
blockquote
検索（入力文字）
.search-input input

公式テーマのSimpleのガジェットの指定先

ページのテキスト（個別に指定されない全て）
body
ブログのタイトル（ヘッダー）
.Header h1
タブのテキスト（項目のみ）
.tabs-inner .widget li a
投稿タイトル（投稿とスニペットとコメント）
h3.post-title, .comments h4
日付ヘッダー（投稿タイトルの直下）
h2.date-header
ガジェット（タイトル）
div.widget > h2, div.widget h2.title

CSSは指定先とフォントを記述して初めて動作する。CSSのマークアップ例* {font-family:'Times New Roman', sans-serif}先頭に指定先を置いて半角中括弧（{}）で要素と値を定める。CSSは優先順位があってHTMLの親要素よりも子要素の指定が優先される規則がある。テンプレートのソースコードの状況が分からないと上手く行かないので、そうしたときは「!important」を値の後に追加すると最優先の指定となって反映し易くなる。* {font-family:'Times New Roman', sans-serif !important}半角アスタリスク（*）は全てのコンテンツを対象とするので、テンプレートのソースコードの状況が良く分からなければ「!important」を付けてCSSのマークアップの順番として上書きされる後方に追加すると大丈夫かも知れない。BloggerではテーマデザイナーのCSSを追加からカスタマイズするとブログの中心的なCSSの最後に入るようになっているから使うとおよそ速やかに反映するところにマークアップを置ける。Variableタグから変更する BloggerのHTMLを編集のVariableタグのソースコード

HTMLを編集｜Blogger

Bloggerブログのフォントはテンプレートに設定されていればBloggerの独自タグのfont用のVariableでも変更することもできる。VariableタグはCSSでは個々の要素に値を代入するために使われるもので、テーマデザイナーの変更に対応している。いい換えるテーマデザイナーはVariableタグに基づいて動作してCSSを操作できるようになっているんだ。カスタマイズに使う利点としてはブログのどこを変更できるかはテーマデザイナーと同じなんだけれども入力できない値を入力できる。フォントだとBloggerで用意されてない日本語などのフォント名を入力して所定のガジェットにブログに設定された通りに反映させることができる。CSSを、直接、変更するとテンプレートのソースコードの状況で、上手く行かない場合もあるのを確実に避けられるし、そういった意味ではVariableタグを使う方が早いかも知れないのと必要な部分しかカスタマイズしなくて済むから無駄がなくて良いと思う。Variableタグのマークアップ例<Variable name="body.text.font" description="Font" type="font" default="16px sans-serif" value="16px 'Times New Roman', sans-serif"/>VariableタグはBloggerの管理画面のメニューのHTMLを編集かバックアップと元に戻すからしか書き換えられない。Variableタグがブログのどの部分のデザイン当て嵌まるかはnameの内容に示されている。サンプルだとbody.text.font（英語しか使われない）だからブログの本体の文字を扱うVariableタグだと分かる。フォントの場合は「type="font"」のものがデザインに使われていてテンプレートのCSSに代入されて実際にブログに反映するのは「value」の部分になる。直前に同じようなものとして「default」があるけれどもこれはテンプレートの初期値（テーマデザイナーでカスタマイズを元に戻すときに使われるもの）なので、ブログに使われるデザインとは必ずしも一致しない。Variableタグの「type="font"」の「value」の内容はCSSのfont要素で、font-weight（文字の太さ）とfont-style（文字の様式）とfont-size（文字の大きさ）とfont-family（文字の種類）を一括で指定するのと同じだ。だからフォント名を変更する場合もfont-family要素で指定するのと同じ仕方で入力すれば良い。Webフォントを導入する Google FontsのNoto Sans Japaneseの紹介

Noto Sans Japanese｜Google Fonts｜Google

通常のフォントの指定は>ガジェットでもCSSでもデバイスに含まれるものから使用するので、指定したフォントがデバイスに搭載されてないとブログに表示されることはない。しかしブログでフォントを用意してどんなデバイスでも統一して表示する方法もあってWebフォントを使う。Webフォントは自分のサーバーに保存するか外部ファイルで読み込むかによって用意するけれどもBloggerでは前者は無理なので、後者で行うことになる。Google FontsなどのWeb フォントを提供するWebサービスを使って読み込める。導入する際は管理画面のテーマのメニューのHTMLを編集かバックアップと元に戻すでテンプレートのソースコードに所定の外部ファイルを読み込むためのlinkタグを記載してCSSで通常通りの仕方でフォント名を指定する。Webフォントのマークアップの例Google FontsのNoto Sans Japaneseを使う。外部ファイルのソースコード<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"/>Bloggerのテンプレートのファイル形式はXMLなので、一部を書き換えないとエラーで保存できなくなる。

コメント