• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

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

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / Stork(ストーク)ヘッダーカスタマイズ|お知らせテキスト

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

最終更新日:2021年10月5日

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

ヘッダーのお知らせテキスト

目次 非表示
1 お知らせテキストって何?
2 ヘッダーのお知らせテキストの表示・非表示を切り替える
3 ヘッダーのお知らせテキストのCSSカスタマイズ
3.1 背景色を変更する
3.2 文字色を変更する
3.3 文字サイズ(フォントサイズ)を変更する
3.4 文字の太さを変更する
3.5 上に線を入れる
3.6 上に線(点線)を入れる
3.7 幅を調整する
4 お知らせテキストのカスタマイズまとめ
5 ヘッダー関連のカスタマイズまとめ

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

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

ヘッダーのお知らせテキスト

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

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

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

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

テーマカスタマイザーを開く

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

グローバル設定を開く

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

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

お知らせテキストを設定する

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

ヘッダーのお知らせテキストを表示する

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

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

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

Stork(ストーク)の子テーマを導入する方法

背景色を変更する

背景色を変更するカスタマイズ

.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; /* 余白(主に上下) */
}

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

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

Stork(ストーク)ヘッダーカスタマイズ|サイトディスクリプション

Stork(ストーク)でロゴ画像を設定する方法

Stork(ストーク)でロゴ画像を中央寄せにする方法

Stork(ストーク)でロゴ画像のサイズを大きくする方法

カテゴリー:WordPress タグ:Stork(ストーク)

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « Stork(ストーク)ヘッダーカスタマイズ|サイトディスクリプション
Next Post: エックスサーバーの申し込み手順と注意点を画像付きで解説 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.