yuichi.co

ゆういちのノートブック

【Stinger7】ヘッダー画像上のブログタイトル文字をグーグルフォントでカスタマイズ

2016/05/11
 3479

Stinger7ヘッダー画像上のタイトル文字をGooglefontでカスタマイズ

@yuichico_です。今回は自分のブログの題名でもある、ヘッダー画像を削除してその上のサイトタイトルをGoogle Fontsで簡単にカスタマイズします。グーグルフォントはグーグルが商用、非商用にかかわらず提供しているWebフォントです。有料のフォントはなく、すべて無料で利用できます。完成図です。

【Stinger7】ヘッダー画像上のタイトル文字をグーグルフォントでカスタマイズ 完成図



ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは必須です。必ずインストールしてください。

子テーマへアップロード

header.phpとanalyticstracking.php、st-font.phpの3つ、子テーマへアップしてください。analyticstracking.phpをアップしないとトラッキングコードが取得されませんので必ずアップロードしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

ヘッダー画像の削除

なぜ削除するかの理由は、下に2つ書いてあります。削除方法は以下の通りです。

外観→カスタマイズ

ヘッダー画像削除の仕方 カスタマイズ

ヘッダー画像

ヘッダー画像削除の仕方 カスタマイズ ヘッダー画像

アップロード済みの画像右上のバッテン印をクリックして削除

ヘッダー画像削除の仕方 カスタマイズ ヘッダー画像 クリックして削除

保存して公開

ヘッダー画像削除の仕方 カスタマイズ ヘッダー画像 保存

以下削除理由です。

WiFi環境が悪い人に向けて

画像を読み込むのに時間がかかります。フィリピンのセブにいた時、PC環境が悪かったので、画像を読み込むのに時間がかかりました。もし、そのようなところに住んでいる人に向けて発信していくのであれば、ヘッダー画像入りません。

デザイナーではない

デザイナーじゃない人がヘッダー画像を使っちゃいけないとは言っていません。私にとって、黄金比とか、配色とか写真の撮り方とかわかりません。少し考えすぎじゃない?と言われそうですが、いいえ、そんなことはありません。そのような考えの人は少なからずいると思います。

グーグルフォントを使う理由

5つメリットがあります。デメリットはないかと思われますが、あるのであればコメントやメッセージに残していただければ幸いです。

簡単

コードを取得してコピーして貼り付けるだけで利用できます。手軽に設置できます。

軽い

サイトページの読み込みを軽くします。Googleから提供されていますので、Adobeフォントや他Webフォントより、とにかく表示スピードが速いです。ページ読み込みを早くすることで、Googleからの評価も上がります。

おしゃれ

デザイナー素人でもコードを取得して貼り付けるだけで、カッコイイブログタイトルになります。

ブラウザ

Chromeはもちろんのこと、Firefox、Opera、internetexprolerすべてに対応済みです。

SEO

文字で検索されることが多いため、文字で掲載するほうがSEO的に有利です。

グーグルフォントを取得

リンク Google Fonts

Google Fontsへアクセスしましょう。トップはこんな感じです。

グーグルフォント トップ

Preview Text

プレビューテキストは、自分が付けたいブログタイトル、たとえば yuichi.co を入力すると その下のフォントが yuichi.co に反映されます。スクロールするとフォント形式は違いますが、すべて yuichi.co に変わっているのがわかります。

グーグルフォント プレビューを入力すると反映

1 font famiy shown

フォント名がわかっていれば、 1 font family shownの中にフォント名を入力すれば、反映されます。

グーグルフォント もし、フォント名がわかっていたら入力

Filters

フィルターにチェックを入れれば自分にあったフォントを探せます。筆記体っぽいフォントがよかったので、Handwritingにチェックをいれました。Dancing Script がカッコイイと思いますし、このフォントにしたいと思います。右下の右矢印マークをクリック

グーグルフォント フィルター チェックを入れる

各コードをコピー

スクロールしていくと、このようなテキストがあらわれます。

※1 header.phpへ貼り付けますので、選択してコピーしてどこかに貼り付けておいてください。

headertop10

※2 style.cssへ貼り付けますので、選択してコピーしてどこかに貼り付けておいてください。(2016/5/11追記。この下の画像は間違いです。)

グーグルフォント 下へスクロール 選択してコピー ヘッダー

※2 style.cssへ以下を選択してコピーしてどこかへ貼り付けておいてください。(こちらが正解でした。)

グーグルフォント 下へスクロール 選択してコピー CSS

カスタマイズ

以下を各ファイルへコピペしてください。

header.php

外観→テーマ編集→header.phpへ。

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>
<html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>
<html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!-->
<html <?php language_attributes(); ?>>
	<!--<![endif]-->
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>" >
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<meta name="format-detection" content="telephone=no" >
		
		<?php if ( is_home() && !is_paged() ): ?>
			<meta name="robots" content="index,follow">
		<?php elseif ( is_search() or is_404() ): ?>
			<meta name="robots" content="noindex,follow">
		<?php elseif ( !is_category() && is_archive() ): ?>
			<meta name="robots" content="noindex,follow">
		<?php elseif ( is_paged() ): ?>
			<meta name="robots" content="noindex,follow">
		<?php elseif ( trim($GLOBALS["stdata9"]) !== '' &&  ($GLOBALS["stdata9"]) == $post->ID ): ?>
			<meta name="robots" content="noindex,follow">
		<?php elseif ( is_category() && trim($GLOBALS["stdata15"]) !== ''): ?>
			<meta name="robots" content="noindex,follow">
		<?php endif; ?>

		<link rel="alternate" type="application/rss+xml" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> RSS Feed" href="<?php bloginfo( 'rss2_url' ); ?>" />
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" >
		<link href='https://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet' type='text/css'>
		<?php include_once( "st-font.php" ) //googlefont ?>

		<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

		<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<script src="<?php echo esc_url( get_template_directory_uri() ) ; ?>/js/html5shiv.js"></script>
		<![endif]-->
		<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
		<?php wp_head(); ?>
		<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>
	</head>
	<body <?php body_class(); ?> >
	
		<div id="wrapper" class="<?php st_wrap_class(); ?>">
			<header>
			<div class="clearfix" id="headbox">
			<!-- アコーディオン -->
			<nav id="s-navi" class="pcnone">
				<dl class="acordion">
					<dt class="trigger">
					<p><span class="op"><i class="fa fa-bars"></i></span></p>
					</dt>
					<dd class="acordion_tree">
						<?php
							$defaults = array(
							'theme_location' => 'primary-menu',
							);
						?>
						<?php wp_nav_menu( $defaults ); ?>
						<div class="clear"></div>
					</dd>
				</dl>
			</nav>
			<!-- /アコーディオン -->
			<div id="header-l">
				<!-- ロゴ又はブログ名 -->
				<p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
						<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
							<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
						<?php else: //ロゴ画像が無い時 ?>
							<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
						<?php endif; ?>
					</a></p>
				<!-- キャプション -->
				<?php if ( is_home() ) { ?>
					<h1 class="descr">
						<?php bloginfo( 'description' ); ?>
					</h1>
				<?php } else { ?>
					<p class="descr">
						<?php bloginfo( 'description' ); ?>
					</p>
				<?php } ?>

			</div><!-- /#header-l -->
			<div id="header-r" class="smanone">
				<?php if ( isset($GLOBALS['stdata43']) && $GLOBALS['stdata43'] === 'yes' ) {
					get_template_part( 'st-footer-link' ); //フッターリンク 
				} ?>
				<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
			</div><!-- /#header-r -->
			</div><!-- /#clearfix -->

				<?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>

			</header>

Google Fonts設定

<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

さきほどコピーしたコードです。※1 お好きなフォントを選んで35行目に貼り付けてください。

CSS

外観→テーマ編集→style.cssへ。以下をコピーして一番下へ貼り付けてください。

header .sitename a {
    font-family: 'Dancing Script', cursive;
    font-size: 64px;
    margin-left: 20px;
    margin-right: 20px;
}

グーグルフォントで取得したフォントファミリーをCSSへ貼り付けます。※2

ついでに、フォントサイズも大きくしてマージンでブログタイトルの右と左幅を小さくします。(iPadで表示するとブログタイトルがはみ出るため)

まとめ

設置方法は、

  1. Google Fontsのコードを取得、コピー
  2. header.phpへ貼り付け
  3. CSSへ貼り付け

です。いかがでしたか?サイトタイトルは、ファーストビューで必ずサイト訪問者に見られますので、フォントを変えることで印象が変わると思います。カスタマイズしておくべきでしょう。参考にしてください。

※2016/5/11追記 コメントにて※2のstyle.cssの画像が間違えているとの指摘がありましたので追記いたしました。コメントしていただいた びー さま、ありがとうございます。

Stinger7 カスタマイズ