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

自分の写真結城永人 -

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

ガジェットのフォントの変更

Bloggerのテーマデザイナーのページのテキストのフォントの編集
テーマデザイナー｜Blogger

Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。

テンプレートによって項目の種類や数は変わる。

公式テーマのContempoで変更可能なフォント
  • ページのテキスト（個別に指定されない全て）
  • ブログタイトル（ヘッダー）
  • タブのテキスト（項目のみ）
  • 投稿
    • 投稿タイトルのフォント
    • 投稿タイトルのストリームのフォント
    • 投稿テキストのフォント（人気の投稿を含む）
  • 引用のフォント
  • 検索（入力文字）
公式テーマのSimpleで変更可能なフォント
  • ページのテキスト（個別に指定されない全て）
  • ブログのタイトル（ヘッダー）
  • タブのテキスト（項目のみ）
  • 投稿タイトル（投稿とスニペット）
  • 日付ヘッダー（投稿タイトルの直下）
  • ガジェット（タイトル）

テーマデザイナーによるフォントの変更はテーマ毎に決められていて太さと向きも併せて直ぐに設定できる。

英数字のフォントのカスタマイズ

テーマデザイナーによるフォントの変更は簡単で便利だけど、ただし注意しなくてはならないのはBloggerで用意されるフォントは英数字しかない。

つまり日本語のブログでテーマデザイナーの選択肢からフォントの変更を行っても実際に反映するのは英数字だけだからそれ以外のフォントの変更には使えない。

CSSによるフォントの変更

BloggerのテーマデザイナーのCSSを追加
テーマデザイナー｜Blogger

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

関連：CSSはどう使えば良いのか｜タグ自体とidとclassの指定先とstyleタグとインラインの記述法

CSSでフォントを変更する場合はfont-family要素でフォント名を指定する。

font-family:'Times New Roman', sans-serif

複数ならば半角コンマ（,）で区切ってフォント名にスペースが含まれるものは半角引用符（一重か二重／''か""）を付ける。

font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは限りません。むしろ、フォント選択は 1 文字ずつ行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです。あるフォントが一部のスタイル、[種類](/ja/docs/Web/CSS/font-variant、大きさでのみ利用可能な場合、これらのプロパティがフォントファミリーの選択に影響する可能性があります。

font-family｜MDN

通常のフォント指定（Webフォントを使わない）ではデバイスに搭載されないフォントはブラウザに反映しないし、ブログに表示されない。だから様々なデバイスの色々な状況に対応するには複数のフォント名を入力する必要があるし、最後にはどんな場所でも使えるような一般的なフォント名（これはデバイスの同じ種類の主要なフォントを使ってブログを表示するのと等しい）を指定しておくと望み通りのデザインを作り易い。

どんなフォントが使えるか、デバイス毎に違うし、組み合わせも色々と考えられるので、自分で調べながら選ぶ。

関連：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の紹介

通常のフォントの指定は>ガジェットでも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&amp;display=swap" rel="stylesheet"/>

Bloggerのテンプレートのファイル形式はXMLなので、一部を書き換えないとエラーで保存できなくなる。

関連：BloggerのHTML編集でエラーを起こさないための注意点

CSSのソースコード

* {font-family: 'Noto Sans JP', sans-serif}

Google Fontsのサイトの説明通りならば外部ファイルのソースコードをテンプレートのheadタグの内側に記載する。

<head...>
  （中略）
外部ファイルのソースコード
  （中略）
</head>

Google Fontsのマークアップは三つのlinkタグで行われて最初の二つはrel-preconnectという外部ファイルの読み込みを速めるためのもの（事前接続）で、最後の一つのrel-stylesheetのものがWebフォントを指定している。

だから最後の一つだけあれば大丈夫で、場合によってはどれもテンプレートのbodyタグの内側に記載しても誤りではないし、動作する。

変更するときはrel-preconnectのものはrel-stylesheetのものの接続を速やかにするためにあってそれよりも前に置かないと意味がないから二種類のマークアップの順番だけは入れ換えてはならない。

Webフォントの外部ファイルは普通に使うとブログの表示速度などのパフォーマンスを下げる。読み込みに時間がかかるためで、特に日本語だと文字数が多くてファイルの容量が大きいから厳しいんだ。

少しでも改善するためには外部ファイルのソースコードにrel-preloadを組み込む方法があって表示速度なとのパフォーマンスに非常に有効だから使うべきだろう。

linkタグを記載したらフォント名を指定した通常通りのCSSのマークアップを追加する。

コメント