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

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

訪問時に必ず目にするところに表示できるので、訪問者におすすめしたいページを紹介するのに適しています。
ヘッダーのお知らせテキストの表示・非表示を切り替える
Stork(ストーク)でヘッダーのお知らせテキストの表示・非表示はテーマカスタマイザーを使って切り替えることができます。
WordPress管理画面のメニューより、外観 ≫ カスタマイズをクリックします。

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

グローバル設定の項目に、ヘッダー下お知らせテキストおよびヘッダー下お知らせリンクが見つかります。
お知らせテキストを表示したい場合は両方の欄に入力をして、公開ボタンをクリックします。

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

ヘッダーのお知らせテキストのCSSカスタマイズ
ヘッダーのお知らせテキストのカスタマイズを紹介します。紹介するのはCSSでのカスタマイズです。
カスタマイズは、必ず子テーマのCSSを変更しましょう。子テーマの導入方法は次の記事で詳しく解説しています。
https://fox-wp.com/stork-child-theme-installation/
背景色を変更する

背景色の変更
.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; /* 余白(主に上下) */
}
ヘッダー関連のカスタマイズまとめ
他のヘッダーのカスタマイズの参考になる記事をまとめています。
https://fox-wp.com/stork-header-site-description/
https://fox-wp.com/stork-logo-setting/