スポンサーリンク

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の例です。他のテーマでは記述が異なる場合があります。

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

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

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

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

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

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

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

スポンサーリンク
銀座・スカイプ・出張・メールでWordPressの入門からカスタマイズ・トラブルまで対応しています。便利なマンツーマン対応・料金は安心の後払い方式です。気軽にご利用ください。