TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

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

 

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

使用例

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

googlefont8

 

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

googlefont9

 

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

 

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

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

 

Fredericka the Great

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

googlefont10

 

Atomic Age

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

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

googlefont11

 

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

 

まとめ

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

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

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

よく読まれている記事

エンジニア独立

2018/1/28

手数料公開のエンジニア案件紹介サービス『Lancers Top』に登録してみた

日本最大のクラウドソーシングサービスであるランサーズを運営するランサーズ株式会社が今年の10月2日より開始したサービスであるLancers Top。 僕自身既に複数の案件紹介サービスに登録しているのですが、このLancers Topでは色々と面白そうな試みをしており、興味が湧いたため、登録して個人面談まで行ってきました。 今回は実際にLancers Topを利用してみての感想や他のフリーランスエージェントと比べたときの特色などについて紹介していこうと思います。 ランサーズとは? ランサーズといえば言わずと ...

続きを読む

エンジニア独立

2018/1/2

稼げるエンジニアになるには

最近SNSやブログなどで『優秀なエンジニアとは?』みたいな議論で盛り上がっているのを良く見ます。どのようなことができれば優秀なエンジニアと言えるのか、みたいな。 正直言って僕はエンジニアとして優秀であるか否かについてはさほど興味を持てません。優秀であればその優秀さに伴った報酬を得られる職業であったのなら、僕も素直に優秀さを追い求めていたことでしょう。 しかしプログラマーとして未経験の言語に転身したにも関わらず、収入が2倍以上になった経験からそんな単純な職業ではないことを思い知ってしまいました。 優秀なエン ...

続きを読む

エンジニア独立

2018/1/1

エンジニア歴2年の僕がポテパンフリーランスの個人面談を受けてきた

特定派遣会社の正社員からフリーランスエンジニアを目指す活動の一環として、フリーランス初心者に特化したエージェントであるポテパンフリーランスの個人面談に行ってきましたので、その感想と特徴について書いていきます。 前提として僕はエンジニア暦2年半、化石のような超マイナーフレームワークでの開発経験しかないというちょっと残念なエンジニアです。 そんな僕でもフリーランスエンジニアとして活動できるという実感を今回の個人面談で得ることができました。 フリーランスという働き方に興味を持ってはいるが、具体的にどうすれば実現 ...

続きを読む

エンジニア独立

2018/1/2

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

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

続きを読む

エンジニア独立

2018/1/2

本当は紹介したくない穴場フリーランスエージェント『IT求人ナビ』

エンジニアがフリーランスとして独立することを考えたとき、重要になってくるのが案件紹介エージェント選び。 プログラマー・SEという職業がバブル状態である近年、そういった案件紹介サービスは大量に存在しています。しかもどのサービスも『高単価』『案件多数』など似たような売り文句ばかりで選ぶ側としては結構困ってしまいますよね。 そういった場合、業界最大手であるギークスジョブやレバテックフリーランスなどを手堅く利用するのが常套手段となりますが、あまり名前が知られていなくても、豊富な案件数や充実したサービスを提供してく ...

続きを読む

-WordPress
-

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