WordPressの始め方と使い方をわかりやすく解説!

Stork(ストーク)ヘッダーカスタマイズ|お知らせテキスト

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/

https://fox-wp.com/stork-logo-center/

https://fox-wp.com/stork-change-logo-size/

関連記事

FOXWP

Conoha WINGからエックスサーバーにWordPressの引越しを行う手順

Conoha WINGからエックスサーバーに引越しを行う手順 Conoha WINGからエックスサーバーに引越しを行う際の注意点 ネームサーバーがエックスサーバーのネームサーバーに設定されていないと、無料独自SSLの設定

FOXWP

wp-envで構築したWordPressのデータベースへアクセスする手順

wp-envで構築したローカル開発環境のデータベースにサクセスするには、Local WordPress EnvironmentのAccessing the MySQL Databaseに記載されている方法で行えます。 参

FOXWP

【WordPress】はじめてのブロックエディター開発

この記事では、WordPressでブロック開発をした際のメモです。 WordPressで必要最低限のブロックを開発するには、@wordpress/create-blockパッケージを作成することですぐにできます。 参考:

FOXWP

wp-envとは?使い方を解説

wp-envを利用した際のメモです。 wp-envとは? ローカルのWordPress開発環境 wp-envとは、ローカルのWordPress開発環境です。Docker Desktopと合わせて利用します。 wp-env

FOXWP

WordPressのおすすめセキュリティプラグイン6選

WordPressセキュリティプラグインを使えば、専門的知識がない方でも手軽にセキュリティ対策を行うことができます。 マルウェア・ブルーフォースアタック・ハッキングといった様々な障害からあなたを守ってくれます。 この記事

FOXWP

WordPressでおすすめの目次プラグイン8選

記事に目次を挿入すれば、読者に記事の全体像を理解してもらいやすくなります。欲しい情報があるか判断する手助けとなり、読者にとって使いやすいサイトと認識してもらえます。 この記事では、目次を挿入できるおすすめのWordPre