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/5/12

エンジニアにとってSESが最良の選択肢ではない3つの理由

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアが正社員として働く上での選択肢として、SES企業というものがあります。 非常に数が多く、特に未経験エンジニアに対して広く門を開けているのでSESを選ぶ人はかなり多い。 しかしこのブログでは度々言っていることですが、ITエンジニアにとっては不幸になる可能性が高い働き方なんですよね。 そこで今日はエンジニアにとってSES企業という選択肢がなぜオススメできないかについて解説していこうと思います。 SESとは? まずSES企業とはどのようなものなのかにつ ...

続きを読む

エンジニア独立

2019/4/25

【正社員並みの保証】安心フリーランスエージェント・Midworksを徹底分析

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

エンジニア入門

2019/4/15

エンジニアは勉強し続けなければいけない職業なのか

こんにちは。フリーランスエンジニアのてぃすです。 最近は就職・転職する際にエンジニアを選択肢に含める人が増えてきています。 しかしエンジニアという職業を候補にあげるにあたって、 エンジニアは働きながら勉強し続けなければいけないのではないか? という疑問もよく見聞きします。 そこで今回はフリーランスエンジニアとして活動している僕の視点からこの疑問についての答えを説明していこうと思います。 結論 先に結論を述べると、 エンジニアは勉強し続けなければいけないのか? という疑問の答えはNOです。 決してエンジニア ...

続きを読む

エンジニア入門 エンジニア独立 働き方

2019/4/15

高収入を目指してエンジニア・プログラマーになることは正しい選択か

こんにちは、フリーエンジニアのてぃすです。 今日お話する内容は、 高収入を目指してITエンジニア・プログラマーになることは正しい選択か というもの。 SNSやブログ、またはプログラミングスクールの謳い文句として「エンジニアになって年収○万を目指そう」などと行った言葉を見ることが最近増えてきました。 またそれに対して、「お金のためにエンジニアになることは間違っている」「実際はそんな稼げない」と行ったような意見も同様に飛び交っています。 僕の個人的な意見としては、高収入な職業につける資格や経験、環境にないので ...

続きを読む

エンジニア独立

2019/4/15

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。もう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると僕のよう ...

続きを読む

-WordPress
-

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