Jewelry ∞ Life

時間・場所に捉われない自由な働き方を応援するブログ

IT ブログ

画像不要。ブログタイトルはGoogle Fontsが美しい

投稿日:


ブログのタイトルを変更するのをきっかけに、Google Fontsを使ってみました。

google fonts

Google Fontsは端末の環境に依存しない

タイトルのフォントをもっとお洒落にしたい。

でも、お洒落なフォントはブラウジングしている端末の環境に依存するためうまく表示されない場合がある・・そう思っていました。

そこで今回見つけたGoogle  Fonts。(プロの間では「Webフォント」と呼ばれているそうです)

Webフォントはサーバー上に置かれたフォントファイルを呼び出して使用します。

ということは、ブラウジングする側の環境に依存することなく、自由なフォントを表示することができます。

しかも、画像を使わなくて良いので作成、変更が楽。

更に、テキストなのでCSSを設定すれば自由なスタイルを作れるし、SEO的にも効果があります。

(ただ、Google Fontsの場合は英語用で日本語用のフォントはありません

Google Fontsでのフォントの選び方

まず、Google Fontsのサイトにアクセスします。

Google Fonts

すると、様々なフォント例が出てきます。

右のバーから特徴を選択することによって絞り込むことができます。

category

  • Serif :明朝体(文字のストロークの端に小さな飾りがあるフォント)
  • Sans-serif :ゴシック体(Serifの飾りなしフォント)
  • Display :装飾系フォント
  • Handwriting :筆記体・草書体のフォント
  • Monospace : 等幅のフォント

その他、「Thickness(太さ)」「Slant(傾斜)」「Width(幅)」などからも絞ることができます。

other

また、それぞれのフォントにカーソルを置くと作りたいタイトルを入力することができ、イメージを確認することができます。

test blog

Google Fontsの設定の仕方

気に入ったフォントを見つけたら、右上のプラスボタンを押します。(クリックするとマイナス表示に変わります)

そうすると、「1 Family Selected」としたのバーに表示されますので開きます。

(複数のフォントを選ぶことも可能です)

1 family selected_LI

ブログのヘッダーに張り付けるコードと、CSSファイルに張り付けるコードが出てきますのでそれぞれコピーします。

Code_LI

 

WordPressを使っている場合には、外観→テーマの編集を開きます。

先ほどの2つのコードのうち、

<link href=”https・・・>

のほうは、テーマヘッダー(header.php)ファイルの<head>と</head>タグの間に貼付けします。

また、

font-family: ‘〇〇〇’, 〇〇〇;

の記述はスタイルシート(.cssファイル)に貼付けします。(ブログタイトルの部分)

例えばStinger8の場合、次の箇所に貼付けしました。テーマによって表示が異なります。

/*ブログタイトル*/
header .sitename {

font-family: ‘〇〇〇’, 〇〇〇;

なお、これはいまいち理由が分からなかったのですが、どうやら子テーマとの関係で、上記のCSSの記載では私の場合上手く表示してくれませんでした。

調べたところ、最後に!imoportantを付けたらうまくいきました。

(これをつけることによってCSSファイルの読み込みの優先順位を高めてくれるようです。)

font-family: ‘〇〇〇’, 〇〇〇; !important;

もしうまくいかなかったら試してください(^^;

まとめ

Google Fontsの選び方、設定の仕方をまとめてみました。

誰でも気軽にお洒落なフォントを使えるのはうれしいです。

英語でお洒落なロゴっぽいフォントを使いたいという方は是非試してください。

編集後記

週末は、とても寒くなりましたがお互いの親のお墓まいりへ。

お彼岸に行けなかったので、行けて満足です。


横浜市西区のクラウド会計専門「戸村涼子税理士事務所」

クラウド会計導入支援、ネットビジネス・海外取引に力をいれております。主に個人事業主様・中小企業の社長様・副業を行っているサラリーマンの方向けにサービスを提供しております。 事務所ホームページはこちら 代表プロフィール 事務所の特徴
【主な業務内容】
税務顧問
・スポットサービス
決算・申告サービス
クラウド会計ソフト導入支援
対面相談
メール相談
少人数セミナー

スポンサーリンク



スポンサーリンク



-IT, ブログ

執筆者:

関連記事

130本目の記事。ブログを始めてから苦労したこと、よかったこと

いつものように今朝ブログネタに悩んでいた時の事。 ふと記事数を見ると「130」という数字が飛び込んで … Read more

メンテナンスをルーティン化することの大事さ。

最近、仕事でメンテナンスを怠っていたことにより2つの失敗をしてしまいました。 HPとブログのお問い合 … Read more

クラウドワークス体験記~スキルを生かして在宅勤務を行うメリット~

クラウドワークスで仕事してみた 近年、会社に通勤せずに個人間や個人法人間で仕事を直接取引する仕組みを … Read more

ブログを書き続けて約1年。テーマ・タイトル変更、サイトアイコン設定など

私は約1年前の2016年4月26日にこのブログを開設しました。 書き始めから約1年、これを機にブログ … Read more

Excelで扱っているのはデータベース部分と表計算部分。きちんと分けて考える。

以前、Excelは表計算ソフトではなく、シミュレーションソフトであるという記事を書きました。 エクセ … Read more

戸村 涼子
ファイル 2017-03-24 15 12 37

30代税理士。横浜市在住。
クラウド会計専門。ネットビジネスに強み。主に副業を行っているサラリーマン、フリーランス、小規模ベンチャーのお手伝いをさせていただいております。
既存の税理士業業界に常に疑問を持ち税理士としてどのように社会貢献していくか日々模索中。
オフィシャルページはこちら

スポンサーリンク