ストーク(STORK)のヘッダーや記事レイアウトのカスタマイズ方法|初心者向けマニュアル
ストーク(STORK)のヘッダーや記事レイアウトのカスタマイズ方法|初心者向けマニュアル

今回は、WordPressテーマ「ストーク」 「ヘッダー下お知らせテキスト」のカスタマイズ方法を解説したいと思います。

「ヘッダー下お知らせテキスト」とは?

「ヘッダー下お知らせテキスト」とは、ヘッダー下に表示される下記のようなテキスト(リンク)のことです。

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

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

サイト訪問時に必ず目に入るところに表示されるので、ユーザーにおすすめのページを紹介するときなどに使うと便利な機能です。

「ヘッダー下お知らせテキスト」を表示する方法は、下記の記事を参考にしてみてください。

「ヘッダー下お知らせテキスト」のカスタマイズ方法

子テーマを準備する

「ヘッダー下お知らせテキスト」のカスタマイズは、この記事で紹介するコードをstyle.cssにコピペするだけで簡単にできます。

カスタマイズする際は万が一に備え、必ず子テーマのstyle.cssに追記するようにしましょう。

ストークの子テーマについては、下記の記事を参考にしてみてください。

style.cssにコードを追記する

WordPressダッシュボードのサイドメニューにある『外観』にマウスを合わせ、さらに表示された『テーマエディター』をクリックします。

『外観』にマウスを合わせ、表示された『テーマエディター』をクリック

『外観』にマウスを合わせ、表示された『テーマエディター』をクリック

テーマの編集画面が開きます。

画面右上の「編集するテーマを選択」が「stork_custom」になっていることを確認します。

「編集するテーマを選択」が「stork_custom」になっていることを確認

「編集するテーマを選択」が「stork_custom」になっていることを確認

なっていれば、style.cssにこの記事で紹介するコードを追記しましょう。

コードを追記したら『ファイルを更新』ボタンをクリックします。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

これで、「ヘッダー下お知らせテキスト」にカスタマイズが反映されます。

「ヘッダー下お知らせテキスト」カスタマイズ一覧

コードを追記する準備が整ったところで、早速「ヘッダー下お知らせテキスト」のカスタマイズ例をご紹介したいと思います。

これから紹介するカスタマイズで気になったものがあれば、コードをstyle.cssにコピペしてみてください。

 コードは自分好みにカスタマイズして使ってください。

背景色を変える

背景色を変える

背景をグラデーションにする

背景をグラデーションにする

背景をストライプにする

背景をストライプにする

背景を画像にする

背景を画像にする

テキストの色を変える

テキストの色を変える

テキストのサイズを変える

テキストのサイズを変える

テキスト前のアイコンを変える

テキスト前のアイコンを変える

アイコンのユニコードの確認方法

アイコンの種類を示すユニコードは、FontAwesomeの各アイコンのページで確認することができます。

FontAwesomeのサイトにアクセスし、任意のアイコンのページを開きましょう。

下記のような画面が開きます。

この「Unicode:」の右に記載されているコードをコピペして使いましょう。

「Unicode:」の右に記載されているコードをコピペ

「Unicode:」の右に記載されているコードをコピペ

テキスト前のアイコンの色を変える

テキスト前のアイコンの色を変える

テキストの前後にアイコンを表示する

テキストの前後にアイコンを表示する

テキスト前も任意のテキストに変える

テキスト前も任意のテキストに変える

テキストの前後に任意のテキストを表示する

テキストの前後に任意のテキストを表示する

テキストを太字にする

テキストを太字にする

テキスト前のアイコンや文字を太字にする

テキスト前のアイコンや文字を太字にする

上にボーダーを引く

上にボーダーを引く

 solidを変更すると線の種類を変更できます。

  • solid → 実線
  • double → 二重線(3px以上必要)
  • dashed → 破線
  • dotted → ドット

下にボーダーを引く

下にボーダーを引く

下に影を付ける

下に影を付ける

テキスト周りの余白を調整する

テキスト周りの余白を調整する

一括でカスタマイズする

今回ご紹介したカスタマイズ方法は、下記のように一括で設定することができます。

一括でカスタマイズしたお知らせテキスト

一括でカスタマイズしたお知らせテキスト

まとめ

今回は、ストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法を解説しました。

ストークユーザーも多い中、他のブログとの見た目の差別化は必須になってきています。

今回ご紹介したカスタマイズ方法を使って、あなただけのオリジナリティ溢れるブログを作りましょう。

スポンサーリンク

スポンサーリンク

おすすめの記事