Stork（ストーク）ヘッダーカスタマイズ｜お知らせテキスト

WordPressテーマのStrok（ストーク）でヘッダーにあるお知らせテキストをカスタマイズする方法を紹介します。

お知らせテキストって何？

お知らせテキストとは、ヘッダー下に表示できるテキストのことです。

訪問時に必ず目にするところに表示できるので、訪問者におすすめしたいページを紹介するのに適しています。

ヘッダーのお知らせテキストの表示・非表示を切り替える

Stork（ストーク）でヘッダーのお知らせテキストの表示・非表示はテーマカスタマイザーを使って切り替えることができます。

WordPress管理画面のメニューより、外観 ≫ カスタマイズをクリックします。

テーマカスタマイザーが表示されますので、グローバル設定をクリックします。

グローバル設定の項目に、ヘッダー下お知らせテキストおよびヘッダー下お知らせリンクが見つかります。

お知らせテキストを表示したい場合は両方の欄に入力をして、公開ボタンをクリックします。

お知らせテキストを表示すると、ヘッダーは次のような表示になります。

ヘッダーのお知らせテキストのCSSカスタマイズ

ヘッダーのお知らせテキストのカスタマイズを紹介します。紹介するのはCSSでのカスタマイズです。

カスタマイズは、必ず子テーマのCSSを変更しましょう。子テーマの導入方法は次の記事で詳しく解説しています。

背景色を変更する

.header-info a {
	background: #1BB4D3;
}

もしお知らせテキストを画面の横幅いっぱいに広げたい場合は、テーマカスタマイザーのグローバル設定より変更可能です。

「ヘッダー」背景設定でフルサイズ（横幅いっぱい）を選択します。

そうするとヘッダーすべてが横に広がり、背景色も画面いっぱいにつきます。

文字色を変更する

.header-info a {
	color: #333;
}

文字サイズ（フォントサイズ）を変更する

.header-info a {
	font-size: .9em;
}

文字の太さを変更する

.header-info a {
	font-weight: bold;
}

上に線を入れる

.header-info a {
	border-top: solid 1px #fff;
}

上に線（点線）を入れる

.header-info a {
	border-top: dashed 1px #fff;
}

幅を調整する

.header-info a {
	padding: .4em;
}

お知らせテキストのカスタマイズまとめ

ヘッダーのお知らせテキストは、次のCSSでまとめて設定できます。

.header-info a {
	background: #1bb4d3; /* 背景色 */
	color: #fff; /* 文字色 */
	font-size: .9em; /* 文字サイズ */
	font-weight: bold; /* 文字の太さ */
	border-top: solid 1px #eee; /* 下線 */
        padding: .4em; /* 余白（主に上下） */
}

ヘッダー関連のカスタマイズまとめ

他のヘッダーのカスタマイズの参考になる記事をまとめています。