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

      2016/03/21

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

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

 

Sponsored Links

 

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

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

160309 googlefonts 01 

 

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

160309 googlefonts 02

 

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

160309 googlefonts 03

 

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

160309 googlefonts 04

 

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

160309 googlefonts 05

 

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

160309 googlefonts 06

 

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】の要素を編集します。

 

変更前と変更後

変更前>>

160309 sitetitle font 01

 

変更後>>

160309 sitetitle font 02

 

まとめ

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

参考になれば幸いです。

 

Sponsored Links

 - TwentyFifteen, Webサービス(WP)
 -