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フォントは気軽に使用できることが最大のメリットだと思います。

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

よく読まれている記事

エンジニア独立

2019/4/28

月80万円も目指せるフロントエンドエンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアといえば、JavaやRubyを駆使するサーバーサイドエンジニアの方がイメージとして強いですよね。 ただWeb系で活躍するエンジニアには他にもフロントエンドエンジニアという働き方があります。 今日はこのフロントエンドエンジニアについて、 よくある誤解 どれくらい稼げるのか どうすればなれるのか 将来性 キャリアアップのコツ などの観点からお話していきます。 フロントエンドエンジニアとは フロントエンドエンジニアとは、簡単に言えばユーザーが操作する画 ...

続きを読む

エンジニア独立

2018/8/22

【厳選】現役フリーエンジニアが勧めるフリーランスエージェント2選

こんにちは、フリーエンジニアのてぃすです。 エンジニア、特にプログラマーがフリーランスになろうとしたとき、人脈豊富なスーパーエンジニアでもない限り、最も現実的な選択肢がフリーランスエージェントを利用した働き方です。 とはいえエンジニアバブルの昨今、そういったエージェントサービスは数多存在しており、戦国時代状態です。 選択肢が多いということは嬉しいことであり、同時にどれを選べばいいかという悩みにもなります。 各サイトではメリットや自サービスの長所しか書かれていません。当然ですが。 そうなると選ぶ側としては迷 ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/5/29

パーソルテクノロジースタッフの派遣でエンジニア歴2年の僕が時給2000円を余裕で超えた話

今いる会社を辞めることとなり、今後のエンジニアとしての身の振りを検討中のてぃすです。 今回とある派遣会社にて、業務経験なしのRuby on Railsの案件を紹介してもらい、その時給が2000円を超えていました。 月給換算したら1,2年目の正社員の給与を余裕で超えてきます。派遣という働き方の印象がガラッと変わる体験をしました。 今回はエンジニア歴2年の僕にそんな素敵な待遇を提供してくれたパーソルテクノロジースタッフについて、実体験を交えて語っていこうと思います。 エンジニア派遣の「パーソルテクノロジースタ ...

続きを読む

エンジニア独立

2018/1/28

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

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

続きを読む

-WordPress
-

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