WordPressでサイト名にフォントを指定してロゴっぽく仕上げる

WordPress個別サポート

WordPressに限らず「サイト名」は全ページに表示される重要なパーツです。一般的には単調な文字に見えてしまうかもしれませんが、フォントを指定することで、こんな感じにロゴっぽく仕上げることができます。

サイト名にフォントを指定してロゴ風に仕上げる
単調なサイト名にフォントを指定してロゴ風に仕上げる

ここでは、Webフォントを使ってサイト名をロゴ風に仕上げる例を紹介します。

フォント指定はユーザー環境に依存する

一般的にフォント指定というと次のようにフォント名をfont-familyに指定することもできますが、これはユーザーのPCにフォントがインストールされていないと意味がありません。

#header #site-title {
    font-family: 'メイリオ', Meiryo;
}

指定したフォントがインストールされていないユーザーが見ると、サイト名は意図しないスタイルになってしまいます。

Webフォントならユーザー環境に依存しない

そんなときは、Google Fontsなどの「Webフォント」を使う方法があります。サーバーにインストールされたフォントを使うので、ユーザー環境に左右されずにWebサイトのフォントを指定することができます。

フォントサイズなどの各種属性も指定できるので、ちょっとしたタイトルであれば、バナー画像を作るよりも簡単に柔軟な文字に仕上げることができます。

Google Fontsを使ってサイト名のフォントを指定する

Google Fontsはユーザー登録などが不要で、すぐに簡単に使えます。Google Fontsを使うには、以下のサイトにアクセスします。

Google Fonts

https://fonts.google.com/

Google Fonts
Google Fonts

ひとまず、表示したいサイト名を入力(1) して、「APPLY TO ALL FONTS」をクリック(2) してみましょう。

フォント指定したい文字を入力する
フォント指定したい文字を入力する

それぞれのフォントの仕上がりイメージを見ることができます。

各フォントの仕上がりイメージを見る
各フォントの仕上がりイメージを見る

良さそうなフォントが見つかったら、「Select this font」をクリックします。

使いたいフォントを選択
使いたいフォントを選択

他にもフォントを選ぶことができますが、ひとまずこのフォントを使うのであれば、画面下の「1 family selected」をクリックします。

選択したフォントの設定を表示する
選択したフォントの設定を表示する

フォントを読み込むLinkタグ(1)と、フォントのスタイル(2)が表示されるので、サイトに組み込めば、フォントが使用可能になります。

サイトでフォントを使うためのコード
サイトでフォントを使うためのコード

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");
}
functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

フォントスタイルの記述

あとは、サイト名に対してfont-familyを指定すれば完成です。

/* フォントの指定 */
#header #site-title {
    font-family: 'Shrikhand', cursive;
}
「#header #site-title」はBizVektorの例です。他のテーマでは記述が異なる場合があります。

これで、指定したフォントが反映されます。

サイト名のフォントが変わる
サイト名のフォントが変わる

あとはフォントサイズや色、影などを指定していけば、こんな感じにロゴ画像っぽく仕上がります。

ロゴっぽく仕上がるサイト名
ロゴっぽく仕上がるサイト名