【STORK(ストーク)】トップページのカスタマイズ~ヘッダー下お知らせテキストの設定方法と背景色の変更方法~

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」でヘッダー下お知らせテキストの設定方法と背景色の変更方法を説明します。

STORK(ストーク)ではヘッダー下(グローバルメニュー下)にお知らせテキストを表示させ、リンクを設置する機能がついています。

この記事を書いている時点では私のブログにはヘッダー下お知らせテキストは設定していませんが、特別に読者さんにお知らせしたい情報などがある場合、ヘッダー下はとても目立つ位置なのでここにテキストを表示しておくと読者さんの目に留まる確率はとても高いはずです。

また、この機能を使ったことがある方はデフォルトだと背景色を変更できないことに不満を感じている人もいるかもしれないので、背景色を変更する方法も併せて説明しますね。

 

ヘッダー下お知らせテキストの設定方法

それではヘッダー下お知らせテキストを設定していきましょう。

まずはダッシュボード画面左にある「外観」より「カスタマイズ」をクリックして下さい。そうするとテーマのカスタマイズ画面が開くので「グローバル設定」をクリックしましょう。

グローバル設定を開くと一番上にヘッダー下お知らせテキストの設定項目があるのですぐに分かると思います。

「ヘッダー下お知らせテキスト」の項目には表示させたい文章を入力します。その下の「ヘッダー下お知らせリンク」にはヘッダー下お知らせテキストに設置するリンクのURLを入力します。そのリンクをクリックした時に別タブで開く設定にしたい場合はその下の「リンクを別タブで開く」にチェックを入れて下さい。

ちなみにヘッダー下お知らせテキストはリンクを設置しないと表示されませんので注意して下さいね。

では実際に設定してみましょう。

はい出来ました。グローバルメニュー下にテキストが表示されましたね。設定は簡単なのですぐにできると思います。

 

ヘッダー下お知らせテキストの背景色の変更方法

ここまででヘッダー下お知らせテキストの設定方法はお分かりいただけたと思います。次は背景色の変更方法を説明します。

先ほどの画像でご覧いただいた通り、ヘッダー下お知らせテキストの背景色は濃いオレンジみたいな色で固定されていて標準では変更することができません。

ブログ全体の色味やイメージによってはこの色だと合わないということもあるはずなので、ヘッダー下お知らせテキストの背景色を変更していきましょう。

先ほどのカスタマイズ画面にある「追加CSS」をクリックし、下記CSSを貼り付けて下さい。

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

上記CSSの「#1d6d41」の部分がカラーコードになるので、ここを変更することでヘッダー下お知らせテキストの背景色を変更することができます。

では実際にやってみましょう。今回は試しに明るい緑色にしてみます。追加CSSに上記CSSを貼り付け、カラーコードを変更しました。すると、

出来ました!色が変わったのがお分かりいただけるでしょうか。

自分のブログを作り込んでいくと愛着が出てきてこういった細かなところも自分の思い通りにしたいという気持ちが出てくると思います。ぜひこの記事を参考にしてカスタマイズを進めていって下さいね。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。