TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

WordPress

【WordPress】ブログタイトルにGoogleフォントを使ってみる

更新日:

ブログのヘッダーはアクセスしてくれた人の目に一番最初に入るところですので、できる限りこだわりたいですよね。

でもロゴ画像やオリジナル画像を用意するには技術や時間が結構必要になってきてしまいます。

 

 

すぐにそのような画像を用意するのが厳しいけど、オリジナリティのある外観にしたい・・・

そんな方にオススメしたいのが、

Googleフォント

をタイトルに適用するという手法です。

 

Googleフォントとは?

GoogleフォントとはWeb上にあるフォントをブラウザで表示させる技術によって提供されているサービスです。

自分の環境にフォントデータをダウンロードする必要がなく、無料で手軽に使用でき、

たくさんの種類の中から自分好みのフォントを選ぶことができます。

 

タイトルテキストへの適用方法

私の現在の環境は

WordPressバージョン:4.4.2

使用テーマ:Stinger7

となっておりますので、それに沿って説明を進めさせていただきます。

他のテーマを使用している方でもそこまで違いはないかと思いますので、是非参考にしてみてください。

 

Googleフォント設定用コードの取得

まずは使用したいGoogleフォントのページへと移動します。

トップページから自分好みのフォントを探すのは結構骨のある作業ですので、

サンプルを表示してくれているサイトを参考にして使用してみることをオススメします。

検索ワードは

『Googleフォント おすすめ 2016』

『Googleフォント オシャレ』

などなど自分の求める要素を含めたものがオススメです。

 

今回は私のブログタイトルにも使用している

Expletus Sans

 

を例にして手順を説明していきます。

ページに移動したら、画面の一番下までスクロールしてください。

するとOpen 'フォント名' in Google Fonts

というリンクがあるので、そちらをクリックしてください。

 

googlefont1

 

すると使用したフォントのサイズや太さを選択などを選ぶことができます。

タイトルに使う場合、Boldタイプのものが使いやすいように思います。

 

googlefont2

 

下のほうにスクロールしていき、ブログに適用させる為に必要なテキストを取得していきます。

googlefont3

 

上の赤枠の中がGoogleフォントとWordPressをリンクしてデータを取得する為の情報になります。

デフォルトだとHTMLファイルの中で使用できるコードになっていますが、

個人的にはCSSで管理した方がラクだと思っていますので、タグの『@import』をクリックして、

CSS用のリンクコードをコピーしてメモ帳等に貼り付けておきます。

こちらを便宜的にGoogleフォント用コード①

としておきます。

googlefont4

その下に実際に修正したテキストにCSS設定する為のコードをコピーしておきます。

こちらはGoogleフォント用コード②とします。

googlefont5

 

ブログに適用

取得したコードをWordPressのCSSファイルに貼り付けていきます。

WordPress管理画面で『テーマの編集』をクリックします。

googlefont6

 

私は現在テーマ『Stinger7』を子テーマ付きで使用していますので、

その環境下での設定手順を進めていきます。

実際に他のテーマで試しての確認はできていませんが、ご容赦ください。

 

コード記載手順の基本は以下の通りです。

Googleフォント用コード①をCSSファイルの先頭部分に記載

Googleフォント用コード②をタイトルテキストのCSS設定の中に追加する

だけです!

私の環境では下記の通りの記載で適用できております。

googlefont7

@import url(https://fonts.googleapis.com/css?family=Expletus+Sans:400,700);

/*
ヘッダーフォント
 */
header .sitename a {
 font-family: 'Expletus Sans', cursive;
 font-size:50px;
 color: #2E2E2E !important;
 margin-top: 20px;
}

 

記載した後、『ファイルを更新』をクリックすれば適用完了です。

使用例

ちなみに私のサイトでは標準ですとこんな感じで、

googlefont8

 

適用後はこうなりました!

googlefont9

 

テキストのみでも個性を演出できるオシャレなフォントですので、大変気に入っております。

 

その他オススメGoogleフォント

実際に私のブログに適用してみた見た目と共に個人的にお気に入りのGoogleフォントを紹介します。

 

Fredericka the Great

カジュアルな雰囲気が気に入って、一時期使用していました。

googlefont10

 

Atomic Age

独特でインパクト大で気に入ったのですが、なんと書いてあるかが大変分かりにくくなってしまったので、お蔵入りでした・・・

サイト名によっては大変個性的なタイトルにできると思います。自分もいつかどこかで使ってみたいと思います。

googlefont11

 

こちらは随時更新していきたいと思います。

 

まとめ

いかがだったでしょうか。

Googleフォントは気軽に使用できることが最大のメリットだと思います。

色々な種類のフォントを自分のサイトで試して、ブログの顔であるヘッダーをオシャレにカスタマイズしてみましょう。

よく読まれている記事

office

エンジニア独立

2019/5/29

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアとして働くことの実情

こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供できるよう更新を再開していこうと思いますので、引き続きよろしくお願いいたします。 フリーランスエンジニアの実情 このブログではフリーランスエンジニアとして働くことの利点や、実際にどのようなステップでフリーランスエンジニアになるかについての記事をなんども書いてきました。 しかし実際にフリーランスエンジニアとして ...

続きを読む

エンジニア独立

2019/5/29

エンジニアが会社員のままでいるのはヤバいなと感じた理由

現在会社員エンジニアからフリーランスエンジニアへの転身を目論んで活動中のてぃすです。 今回は僕が感じた会社に雇われた状態でエンジニアを続けることのデメリットについて語っていきます。 エンジニアは多くの現場で幅広い技術を習得するべきである 会社員としてエンジニアを続けることの最大のマイナスポイント。 それはキャリアのコントロールしにくいという点です。 エンジニアが携わるITの世界というのは、技術の流行り廃りが他の業界に比べて断トツで早いんですよね。 そうなるとその技術で生計を立てていくエンジニアという存在は ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

-WordPress
-

Copyright© TIS ENGINEER NOTE , 2020 All Rights Reserved Powered by AFFINGER5.