Bloggerブログでフォントを変更する方法 結城永人 -2022年2月23日 (水) Bloggerでのフォントの変更はテーマデザイナーかテンプレートのソースコードの編集で行う。何れも管理画面のテーマに入り、前者はカスタマイズ、後者はメニュー(▼)のHTMLを編集かバックアップと元に戻すで可能だ。 目次ガジェットのフォントの変更英数字のフォントのカスタマイズCSSによるフォントの変更ソースコードの指定先についてVariableタグから変更するWebフォントを導入する ガジェットのフォントの変更 テーマデザイナー|Blogger Bloggerのテーマデザイナーの詳細設定でブログのガジェットのフォントを変えることができる。 テンプレートによって項目の種類や数は変わる。 公式テーマのContempoで変更可能なフォント ページのテキスト(個別に指定されない全て)ブログタイトル(ヘッダー)タブのテキスト(項目のみ)投稿投稿タイトルのフォント投稿タイトルのストリームのフォント投稿テキストのフォント(人気の投稿を含む)引用のフォント検索(入力文字) 公式テーマのSimpleで変更可能なフォント ページのテキスト(個別に指定されない全て)ブログのタイトル(ヘッダー)タブのテキスト(項目のみ)投稿タイトル(投稿とスニペット)日付ヘッダー(投稿タイトルの直下)ガジェット(タイトル) テーマデザイナーによるフォントの変更はテーマ毎に決められていて太さと向きも併せて直ぐに設定できる。 英数字のフォントのカスタマイズ テーマデザイナーによるフォントの変更は簡単で便利だけど、ただし注意しなくてはならないのは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|Mozilla 通常のフォント指定(Webフォントを使わない)ではデバイスに搭載されないフォントはブラウザに反映しないし、ブログに表示されない。だから様々なデバイスの色々な状況に対応するには複数のフォント名を入力する必要があるし、最後にはどんな場所でも使えるような一般的なフォント名(これはデバイスの同じ種類の主要なフォントを使ってブログを表示するのと等しい)を指定しておくと望み通りのデザインを作り易い。 どんなフォントが使えるか、デバイス毎に違うし、組み合わせも色々と考えられるので、自分で調べながら選ぶ。 関連ページBloggerブログのフォントを日本語向けで表示するカスタマイズ ソースコードの指定先について 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タグから変更する 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フォントを導入する 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なので、一部を書き換えないとエラーで保存できなくなる。 関連ページ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のマークアップを追加する。 コメント 新しい投稿 前の投稿
コメント