Stork（ストーク）ヘッダーカスタマイズ｜サイトディスクリプション

サイトディスクリプションって何？

サイトディスクリプションとは、あなたのサイトの簡単な説明を表すキャッチフレーズのことです。

このキャッチフレーズは、WordPress管理画面より設定できます。メニューより、設定 ≫ 一般をクリックします。

一般設定画面の上の方に、キャッチフレーズという項目が見つかります。表示したい文言はここで変更ができます。

ヘッダーのサイトディスクリプションの表示・非表示を切り替える

Stork（ストーク）でヘッダーのサイトディスクリプションの表示・非表示はテーマカスタマイザーを使って切り替えることができます。

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

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

グローバル設定の項目に、[ヘッダー]サイトディスクリプションを表示するが見つかります。表示したい場合はチェックを入れて、公開ボタンをクリックします。

サイトディスクリプションを表示すると、ヘッダーは次のような表示になります。

ヘッダーのサイトディスクリプションのCSSカスタマイズ

ヘッダーのサイトディスクリプションのカスタマイズを紹介します。紹介するのはCSSでのカスタマイズです。

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

関連記事Stork（ストーク）の子テーマを導入する方法

背景色を変更する

p.site_description {
	background: #1bb4d3;
}

このままだと見た目が不恰好ですよね。きれいに整えたい方は、テーマカスタマイザーのグローバル設定より変更可能です。

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

そうするとロゴ部分のヘッダー背景色が広がり、整った見た目になります。

文字色を変更する

p.site_description {
	color: #fff;
}

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

p.site_description {
	font-size: 15px;
}

文字の太さを変更する

p.site_description {
	font-weight: bold;
}

下線を入れる

p.site_description {
	border-bottom: solid 1px #eee;
}

下線（点線）を入れる

p.site_description {
	border-bottom: dashed 1px #eee;
}

カスタマイズまとめ

ヘッダーのサイトディスクリプションは、次のCSSでまとめて設定できます。

p.site_description {
	background: #1bb4d3; /* 背景色 */
	color: #fff; /* 文字色 */
	font-size: 15px; /* 文字サイズ */
	font-weight: bold; /* 文字の太さ */
	border-bottom: solid 1px #eee; /* 下線 */
}

ヘッダーのロゴ画像のカスタマイズを行いたい方は、次の記事を参考にしてください。

関連記事Stork（ストーク）でロゴ画像を設定する方法

関連記事Stork（ストーク）でロゴ画像を中央寄せにする方法

関連記事Stork（ストーク）でロゴ画像のサイズを大きくする方法