Twenty Thirteenでサイトのロゴをヘッダーに表示

サイト名をロゴに変えると、サイトのイメージが一気に変わってきます。「Twenty Thirteen」でサイトのロゴをヘッダーに表示します。

はじめに

「Twenty Thirteen」でサイトのロゴをヘッダーに表示します。
・サイトのロゴ画像を準備
・スタイルシート（style.css）でリストマーカーを表示

サイトのロゴ画像を準備

サイトのロゴ画像を用意し、WordPressのimagesフォルダにアップロードします。

テンプレート（header.php）でロゴ画像を設定

テンプレート（header.php）でサイト名の代わりに、ロゴ画像を設定します。
＜設定例＞

		<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<div class="site-title" id="logo"><img src="/images/site_logo.png" alt="<?php bloginfo( 'name' ); ?>"></div>
				<div class="site-description"><?php bloginfo( 'description' ); ?></div>
			</a>

スタイルシート（style.css）でロゴ画像の位置を調整

スタイルシート（style.css）でロゴ画像の位置の調整を行います。サイト説明（キャプション）も合わせて調整します。

＜使用例＞

.site-title {
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 24px 0 6px;
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

.site-description {
	font: 300 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0;
	padding: 3px 12px;
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

おわりに

「Twenty Thirteen」でサイトのロゴをヘッダーに表示しました。サイトの顔になる部分ということもあり、ロゴの図案作成に一番時間がかかりました。

関連記事（Twenty Thirteenの各部個別の表示をカスタマイズ）

1. Twenty Thirteenのメニューから検索フォームを削除
2. Twenty Thirteenのフッターにコピーライトを表示
3. Twenty Thirteenで見出しのデザインを変更
4. Twenty Thirteenで記事に枠を表示
5. Twenty Thirteenでリストマーカーに画像を設定
6. Twenty Thirteenでサイトのロゴをヘッダーに表示

関連記事（目次）

1. インターネットで情報発信！