AFFINGER5

【AFFINGER5】トップページのヘッダーを細くする方法【影をつけることも可能です】

・アフィンガーのヘッダー部分を細くするにはどうすればいいの?

・影をつけるやり方も教えてください。

悩んでいる人

こんな悩みを解決します。

この記事を書いている人

この記事を書いている僕は、副業ブログで収益6桁を稼ぐ大学生。
Twitter(@you_blog2912)を運営中。

今回の内容は、以下の2部構成となっています。

この記事の内容

【前半】ヘッダーを細くする方法
【後半】ヘッダーに影をつける方法

デフォルトでは、以下のようなヘッダーになっていると思います。

デフォルトのヘッダー

これを、以下のように「ヘッダーを細く」変えていきます。

ヘッダーを細く

さらに、ヘッダー部分に「影」を入れて立体感のあるヘッダーを作ることが可能です。

ヘッダーの下に影をいれることが可能

どちらか片方のみ設定することもできますので、自分の好みに合わせてカスタマイズしてみてください。

3分もあれば2つとも設定できるので、執筆の気分転換にやってみてください!

ゆーさく

アフィンガーのヘッダーを細くする方法

まずは、アフィンガーのヘッダーを細くしていきましょう。

まずは、WordPress管理画面から『外観』➔『カスタマイズ』を選択して『ロゴ画像』を選択します。

3か所にチェックを入れる

上の画面が開くので、画像の3か所にチェックを入れましょう。

これで、ヘッダーを細くする設定が完了です。

※設定が適応されるまで時間がかかることもあるので、変更されない場合はしばらくお待ちください。

ヘッダーが細くなったときに横に出てくる3本線を『ハンバーガーメニュー』といいます。

このハンバーガーメニューの設定は、『AFFINGER5管理』『メニュー』からすることが可能です。

ハンバーガーメニューのアイコンの形なども変えることができるので、自分なりにカスタマイズしてみてください。

ハンバーガーメニューの色は、「外観(カスタマイズ)」から『メニューのカラー設定』➔『スマホスライドメニュー』➔『スライドメニューアイコン色』から変更可能です。

ハンバーガーメニューの色の変更

デフォルトだと白になっているので、自分のサイトのイメージカラーに合わせて変更してみてください。

アフィンガーのヘッダーに影を入れる方法

それでは、次にヘッダー部分に影を入れる方法を紹介します。

やり方は簡単で、『外観』➔『カスタマイズ』から『追加CSS』を選択します。

追加CSSの部分に、以下のコードをコピペしてください。

CSSコード

/*ヘッダーに影を入れる*/
@media print, screen and (max-width: 599px){
#s-navi dt {
box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
}
/*ヘッダーに影を入れる*/

実際にコピペすると以下のようになります。

コードをコピペした後

上のような状態になっていれば設定は完了なので、実際に反映されているか確認してみてください。

意外と簡単でしたね!お疲れさまでした!

ゆーさく

まとめ:アフィンガーのヘッダーをカスタムして個性を出そう!

今回は、アフィンガーのヘッダーをカスタムする方法について紹介しました。

アフィンガー5自体がカスタム性に優れているので、やり方さえわかれば初心者でも簡単にカスタマイズすることができます。

他にもアフィンガーのカスタマイズについて紹介しているので、参考にしてみてください。

関連記事
AFFINGER5ヘッダー上インフォメーションバーの作り方

アフィンガーカスタマイズ一覧

-AFFINGER5

© 2020 YusakuBlog Powered by AFFINGER5