Twenty Thirteenのヘッダーをカスタマイズ

「Twenty Thirteen」のヘッダーをカスタマイズします。

はじめに

「Twenty Thirteen」のヘッダーをカスタマイズします。
・ヘッダーの高さを変更
・サイト名の表示を調整
・サイト説明(キャッチフレーズ)の表示を調整
・ヘッダーの背景画像を変更

ヘッダーの高さを変更

スタイルシート(style.css)で、ヘッダーの高さの変更を行います。以下の例では、230pxから130pxに狭くしています。

<変更後>

.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 130px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

サイト名の表示を調整

スタイルシート(style.css)で、サイト名の表示を調整します。サイト名ハイライト時の表示を、下線表示をありからなしにします。フォントサイズを60pxから32pxに変更し、表示位置も合わせて調整します。

<変更後>

.site-header .site-title:hover {
	text-decoration: none;
}

.site-title {
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 38px 50px 10px 0;
}

サイト説明(キャッチフレーズ)の表示を調整

スタイルシート(style.css)で、サイト説明(キャプション)のフォントサイズを24pxから14pxに変更します。表示位置も合わせて調整します。

<変更後>

.site-description {
	font: 300 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0;
	padding: 3px 4px;
}

ヘッダーの背景画像を変更

ヘッダー用の画像を1600×230のサイズで作成します。ヘッダー用の画像をアップロードし、WordPressの管理画面でヘッダーに設定します。表示する高さをCSSで130pxというように狭くした場合は、上部130px分が表示されます。

おわりに

「Twenty Thirteen」のヘッダーをカスタマイズしました。

関連記事(Twenty Thirteenの共通エリアの表示をカスタマイズ)

  1. Twenty Thirteenのヘッダーをカスタマイズ
  2. Twenty Thirteenのメニューをカスタマイズ
  3. Twenty Thirteenのサイドバー(右)をカスタマイズ
  4. Twenty Thirteenのサイドバー(下)をカスタマイズ
  5. Twenty Thirteenのフッターをカスタマイズ
  6. Twenty Thirteenで記事の高さをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメントを残す

メールアドレスが公開されることはありません。

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