ブログのヘッダーはアクセスしてくれた人の目に一番最初に入るところですので、できる限りこだわりたいですよね。
でもロゴ画像やオリジナル画像を用意するには技術や時間が結構必要になってきてしまいます。
すぐにそのような画像を用意するのが厳しいけど、オリジナリティのある外観にしたい･･･
そんな方にオススメしたいのが、
Googleフォント
をタイトルに適用するという手法です。
Googleフォントとは？
GoogleフォントとはWeb上にあるフォントをブラウザで表示させる技術によって提供されているサービスです。
自分の環境にフォントデータをダウンロードする必要がなく、無料で手軽に使用でき、
たくさんの種類の中から自分好みのフォントを選ぶことができます。
タイトルテキストへの適用方法
私の現在の環境は
WordPressバージョン：4.4.2
使用テーマ：Stinger7
となっておりますので、それに沿って説明を進めさせていただきます。
他のテーマを使用している方でもそこまで違いはないかと思いますので、是非参考にしてみてください。
Googleフォント設定用コードの取得
まずは使用したいGoogleフォントのページへと移動します。
トップページから自分好みのフォントを探すのは結構骨のある作業ですので、
サンプルを表示してくれているサイトを参考にして使用してみることをオススメします。
検索ワードは
『Googleフォント おすすめ 2016』
『Googleフォント オシャレ』
などなど自分の求める要素を含めたものがオススメです。
今回は私のブログタイトルにも使用している
を例にして手順を説明していきます。
ページに移動したら、画面の一番下までスクロールしてください。
するとOpen 'フォント名' in Google Fonts
というリンクがあるので、そちらをクリックしてください。
すると使用したフォントのサイズや太さを選択などを選ぶことができます。
タイトルに使う場合、Boldタイプのものが使いやすいように思います。
下のほうにスクロールしていき、ブログに適用させる為に必要なテキストを取得していきます。
上の赤枠の中がGoogleフォントとWordPressをリンクしてデータを取得する為の情報になります。
デフォルトだとHTMLファイルの中で使用できるコードになっていますが、
個人的にはCSSで管理した方がラクだと思っていますので、タグの『@import』をクリックして、
CSS用のリンクコードをコピーしてメモ帳等に貼り付けておきます。
こちらを便宜的にGoogleフォント用コード①
としておきます。
その下に実際に修正したテキストにCSS設定する為のコードをコピーしておきます。
こちらはGoogleフォント用コード②とします。
ブログに適用
取得したコードをWordPressのCSSファイルに貼り付けていきます。
WordPress管理画面で『テーマの編集』をクリックします。
私は現在テーマ『Stinger7』を子テーマ付きで使用していますので、
その環境下での設定手順を進めていきます。
実際に他のテーマで試しての確認はできていませんが、ご容赦ください。
コード記載手順の基本は以下の通りです。
Googleフォント用コード①をCSSファイルの先頭部分に記載
Googleフォント用コード②をタイトルテキストのCSS設定の中に追加する
だけです！
私の環境では下記の通りの記載で適用できております。
@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;
}
記載した後、『ファイルを更新』をクリックすれば適用完了です。
使用例
ちなみに私のサイトでは標準ですとこんな感じで、
適用後はこうなりました！
テキストのみでも個性を演出できるオシャレなフォントですので、大変気に入っております。
その他オススメGoogleフォント
実際に私のブログに適用してみた見た目と共に個人的にお気に入りのGoogleフォントを紹介します。
カジュアルな雰囲気が気に入って、一時期使用していました。
独特でインパクト大で気に入ったのですが、なんと書いてあるかが大変分かりにくくなってしまったので、お蔵入りでした･･･
サイト名によっては大変個性的なタイトルにできると思います。自分もいつかどこかで使ってみたいと思います。
こちらは随時更新していきたいと思います。
まとめ
いかがだったでしょうか。
Googleフォントは気軽に使用できることが最大のメリットだと思います。
色々な種類のフォントを自分のサイトで試して、ブログの顔であるヘッダーをオシャレにカスタマイズしてみましょう。
