【Twenty Fifteen CSS編集メモ】サイトタイトルを好みのフォントに変更する

デフォルトのフォントだと少し寂しい感じがしたので、サイトタイトルを自分好みのフォントに変更してみました。

今回はGoogle fontsというwebフォントのサービスを使っています。

Google FontsというWebフォントのサービスを使ってみた

まずはGoogle Fontsのサイトから好みのフォントを探します。＞＞

赤枠の文字を変更することで、実際の文字も確認可能です。＞＞

フォントサイズも変更可能＞＞

気に入ったフォントを見つけたら、右側の【Quick use】というボタンをクリック＞＞

下記の画面となりますので、下のコードを【header.php】のheadタグに追記し、＞＞

下のコードを【style.css】の中のサイトタイトルにあたる部分に入れます。＞＞

header.phpに追記

テーマファイルのheader.phpを編集します。

編集する箇所はheadタグ。

下記のように追記します。（この時にはAlluraというフォントで編集しています。）

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <!--Google Fonts 追加分-->
        <link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
        <!--[if lt IE 9]>
	<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

style.cssを編集

style.cssの中のサイトタイトルの部分を編集します。

Twenty Fifteenの場合は【.site-title】の要素となります。

style.cssの一番下に下記のコードを追記すればOK。

/*サイトタイトル用 フォント指定*/
.site-title a {
        font-family: 'Allura', cursive; /*Google fontsからコピペ*/
}

フォントサイズについては、レスポンシブのテーマなので、それぞれの【.site-title】の要素を編集します。

変更前と変更後

変更前＞＞

変更後＞＞

まとめ

今回はサイトタイトルにだけ適用させましたが、もちろん他の要素にも適用可能です。（各記事のタイトルなど）

参考になれば幸いです。