WordPressでサイト名にフォントを指定してロゴっぽく仕上げる
WordPressに限らず「サイト名」は全ページに表示される重要なパーツです。一般的には単調な文字に見えてしまうかもしれませんが、フォントを指定することで、こんな感じにロゴっぽく仕上げることができます。
![サイト名にフォントを指定してロゴ風に仕上げる](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-49-15-1.jpg)
ここでは、Webフォントを使ってサイト名をロゴ風に仕上げる例を紹介します。
この記事の内容
フォント指定はユーザー環境に依存する
一般的にフォント指定というと次のようにフォント名をfont-familyに指定することもできますが、これはユーザーのPCにフォントがインストールされていないと意味がありません。
#header #site-title { font-family: 'メイリオ', Meiryo; }
指定したフォントがインストールされていないユーザーが見ると、サイト名は意図しないスタイルになってしまいます。
Webフォントならユーザー環境に依存しない
そんなときは、Google Fontsなどの「Webフォント」を使う方法があります。サーバーにインストールされたフォントを使うので、ユーザー環境に左右されずにWebサイトのフォントを指定することができます。
フォントサイズなどの各種属性も指定できるので、ちょっとしたタイトルであれば、バナー画像を作るよりも簡単に柔軟な文字に仕上げることができます。
Google Fontsを使ってサイト名のフォントを指定する
Google Fontsはユーザー登録などが不要で、すぐに簡単に使えます。Google Fontsを使うには、以下のサイトにアクセスします。
![Google Fonts](http://www.nishi2002.com/wp-content/uploads/2013/11/2017-05-30-17-10-52.jpg)
ひとまず、表示したいサイト名を入力(1) して、「APPLY TO ALL FONTS」をクリック(2) してみましょう。
![フォント指定したい文字を入力する](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-29-42.jpg)
それぞれのフォントの仕上がりイメージを見ることができます。
![各フォントの仕上がりイメージを見る](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-33-38-1.jpg)
良さそうなフォントが見つかったら、「Select this font」をクリックします。
![使いたいフォントを選択](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-35-59.jpg)
他にもフォントを選ぶことができますが、ひとまずこのフォントを使うのであれば、画面下の「1 family selected」をクリックします。
![選択したフォントの設定を表示する](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-38-13.jpg)
フォントを読み込むLinkタグ(1)と、フォントのスタイル(2)が表示されるので、サイトに組み込めば、フォントが使用可能になります。
![サイトでフォントを使うためのコード](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-39-28.jpg)
2つのコードをWordPressサイトに入力していきます。
フォントファイルの読み込み
フォントを読み込むLinkタグはテーマのheader.phpのheadタグ内に入力するか、次のコードを子テーマのfunctions.phpなどに入力して読み込むことができます。
/* フォントの読み込み */ add_action('wp_enqueue_scripts','my_wp_enqueue_scripts'); function my_wp_enqueue_scripts(){ wp_enqueue_style('web-font', "https://fonts.googleapis.com/css?family=Shrikhand"); }
フォントスタイルの記述
あとは、サイト名に対してfont-familyを指定すれば完成です。
/* フォントの指定 */ #header #site-title { font-family: 'Shrikhand', cursive; }
これで、指定したフォントが反映されます。
![サイト名のフォントが変わる](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-43-50.jpg)
あとはフォントサイズや色、影などを指定していけば、こんな感じにロゴ画像っぽく仕上がります。
![ロゴっぽく仕上がるサイト名](http://www.nishi2002.com/wp-content/uploads/2017/05/2017-05-30-20-49-15.jpg)