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

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

FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など
2019/06/14 0
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#GoogleFonts #GoogleFontsの使い方 #Googleフォントの使い方 #FC2ブログ #FC2ブログカスタマイズ #FC2ブログタイトル #FC2ブログタイトル装飾 #WebFont #Webフォント #ウェブデザイン

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はさまざまに活用することが出来ますので、慣れてきたらいろんなことに挑戦してみるのも良いかもしれません。

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

 0

There are no comments yet.
FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など