あなたの興味を広げる話題を。

鍋ヶ滝©熊本県(Licensed under CC BY 4.0

【Google Fontsの使い方】FC2ブログのタイトルをWebフォントで装飾してみた

2019年06月14日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

Webフォントのイメージ画像

Webサイトブログにとって、一番の顔とも言えるのは「タイトル」ですよね。カスタマイズするうえで便利なのがWebフォント。なかでもお手軽とされるのが Google Fontsグーグル・ウェブフォント)です。
簡単に文字を装飾できるというのですから、ボクのFC2ブログでも、実際にGoogle Fontsを使ってブログタイトルをカスタマイズしてみることにしました。

Google Fontsとは?

ちなみにWebフォントとは、サーバーからフォントデータを読み込んでWebサイトやブログに表示させる仕組みのことです。

Google Fontsは、Webフォントを無料で使用できるサービスで、商用利用も可能です。

Webフォントを使えば、たとえWebページ閲覧者の端末にフォントがインストールされていなくても、サーバーから読み込むことでどの端末でも共通のフォントを表示させることができます。

Google Fontsを使用するとページの読み込み速度は遅くなる?

ボクが自分のFC2ブログにGoogle Fontsを使用するうえで、一番気になるのは、ページの読み込み速度が遅くなるのでは?ということ。

しかし、Googleは高速サーバーですし、ブログタイトルだけのカスタマイズであれば、読み込みについてそれほど気にしなくても大丈夫ですね。

Google Fontsの導入手順

Google Fontsの導入方法については何通りかあります。
今回はボクが実際に導入した手順を書き記しておきます。

Google Fontsにアクセス

まずはGoogle Fontsにアクセスしてページを開きます。

Google Fonts

すると、利用できるWebフォントがずらっと表示されましたね。
この中から使いたいフォントを選ぶのですが、検索フォームから日本語などを探すことも可能です。

使用するWebフォントの選び方

Google Fontsで使用するフォントの決定ボタン

使用するWebフォントが決まったら、画像の矢印のボタンをクリックします。
選んだフォントは、画面下側のリストの中に表示され、追加されたことがわかります。

HTMLのheadにフォントの読み込みコードをコピペする

Google Fontsの埋め込みコード1

EMBED」をクリックしますと、下側に<link rel...というコードが表示されましたね。
FC2ブログテンプレート編集画面を開き、<head>~</head>の中にコピペします。

次に、もうひとつ「font-family:’◯◯’…」というフォント名のコードがありますが、これをブログタイトルに指定する必要があります。

Google Fontsの埋め込みコード2

クラス名を付けてCSSに記述するのが基本ですが、ボクの場合はHTMLに直接style属性を使ってブログタイトルを囲む形で挿入しました。

▼ こんな感じ。

【例】<span style="font-family: 'Kosugi', sans-serif;">ゆうらり</span>

この方法なら、フォントサイズや太さなど、わざわざスタイル設定をしなくて済みます(もともとのスタイル設定が適用されるから)ので簡単ですね。

おわりに

Google Fonts使用後のブログタイトル

以上で導入のほうは完了です。ちゃんとGoogle Fontsが表示されましたね!

ブログタイトルに設定したフォントの書体を変更したい場合は、コードをコピペし直せば良いので便利ですね(^^)

また、Google Fontsはさまざまに活用することが出来ますので、慣れてきたらいろんなことに挑戦してみるのも良いかもしれません。

関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5888)
┣  胃がんブログ (259)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5553)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (457)
┣  がんブログ (255)
┗  がんニュース (202)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (135)
┣  Amazonセール (2)
┗  📱kindleセール (132)
おもしろグッズ (10)
今日のエッセイ (92)
ニュース・芸能・話題 (717)
┗  転職・キャリアアップ (7)
恋愛・人間関係 (21)
終活ブログ (10)
グルメ (61)
┣  低糖質レシピ (5)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (212)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (173)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (30)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (26)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (4)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)