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/15

【地方も強いフリーランスエージェント】PE-BANKを徹底分析

ITエンジニアという職業の魅力についてはこのブログでなんども書いていますが、その中でもフリーランスエンジニアという働き方は、 年収1000万以上も珍しくない高収入 リモートワークや時短勤務などの自由な働き方 を実現する可能性を秘めています。 しかし有名どころのエージェントは基本的に都内、関東のみしか扱っていないケースが多いです。 また現状ITエンジニアがフリーランスとしてやっていく場合、都内で働くことが案件数・単価の都合上もっとも効率がいいです。 しかし地元に愛着があったり、離れることが難しい状況下にある ...

続きを読む

エンジニア独立

2019/3/30

プログラマーはIT土方なのか

プログラマーという働き方について、調べたときに必ずといって良いほど出てくる単語であるIT土方。 実際に土木関係に従事する人たちがどのような労働環境におかれているかは置いといて、基本的には以下のような状況を揶揄して使われている言葉です。 毎日終電まで残業させられる 納期のプレッシャーに追われる 忙しいのに低賃金 とにかく辛い そういった過酷な環境であるから、『プログラミングを楽しいと思っていたり、理数系の才能がある人間じゃなければ絶対になるな』という言葉もよく聞きます。 今回はプログラマーが世間でIT土方と ...

続きを読む

エンジニア入門

2019/5/30

エンジニアにとっての理想的な職場とは

こんにちは、フリーランスエンジニアのてぃすです。 この記事を読んでくださっているということはITエンジニアかと思いますが、皆さんエンジニアとして働くならどんな環境で働きたいですか? スーツ勤務が嫌、言われたことをモクモクとこなすのが好き、など人によって理想として掲げる働き方って大きく異なります。 僕はこれまでエンジニアとして、SES企業やノリノリのベンチャー企業、起業したてのスタートアップ企業における業務を経験してきました。 今回は僕の経験や周囲のエンジニアから聞いた話を交えて、エンジニアにとっての働き方 ...

続きを読む

エンジニア独立

2019/5/29

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

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

続きを読む

エンジニア独立

2019/4/15

自分の市場価値を把握しようとしないエンジニアは搾取される

こんにちは。フリーランスエンジニアのてぃすです。 エンジニア需要の高まり、待遇の向上からエンジニア・プログラマを目指す人が急増してきている昨今。 確かにエンジニアという職業はこれから高収入・柔軟な働き方を目指そうとした時に、最も適切な選択肢です。 そんな高収入かつ将来性のある職業であるエンジニアですが、自分のエンジニアとしての市場価値を知っておかないと、本来得られるはずの収入よりも少ない額で働くことになる可能性があります。それでも中小企業のサラリーマンよりは稼げますが。 今回は何故市場価値を把握しようとし ...

続きを読む

-WordPress
-

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