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. インターネットで情報発信!

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)