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のマークアップを追加する。 コメント 新しい投稿 前の投稿
吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす 歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます！ を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 伊良部秀輝が大好きだった記憶 Hideki Irabu records hi...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
松本典子の今世紀最大の失敗という笑い話 日本のアイドル黄金時代と呼ばれる1980年代の真っ只中に十六歳で歌手としてデビューして、その後、十九歳から異色にも 志村けん と共にお笑いでも活躍した 松本典子 という芸能人がいた。二十四歳で野球選手の 苫篠賢治 と結婚して芸能界から殆ど姿を消して、大分、経っているので、今は知ら...
ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳 十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン （1835）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属...
結城永人
結城永人
コメント