AFFINGER トップページカスタマイズ

【AFFINGER6】スマホトップページのヘッダー高さ・アイコンの調整方法解説

2021年10月26日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

 

 

今回は、WordPressテーマ「AFFINGER」における、スマホヘッダーのデザインのカスタマイズ方法について解説していきます。

 

紹介するカスタマイズは以下の通りです。

ポイント

  • ハンバーガーメニューの設定
  • ヘッダーエリアに影をつける
  • スマホ用ヘッダーエリアの高さの調整方法

について紹介していきます。

 

今回は、CSSにてデザインの編集を行っていくので、作業前に必ずバックアップをとておくようにしておきましょう！

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

ハンバーガーメニューとは

 

ハンバーガーメニューとは、ヘッダー部分に表示されているクリックするとメニューが開かれるアイコンのことを指します。

 

下の赤枠が「ハンバーガーメニュー」です。多くの人がスマホでブログなどを利用した際に見かけたことがあるかと思います。

 

ハンバーガーメニューの設定

 

それでは、まず初めに「ハンバーガーメニュー」の表示設定を行なっていきます。

 

WordPress管理者画面より、「AFFINGER管理」→「メニュー」→「スマホスライドメニュー」を選択して下さい。

 

 

せなお
この設定画面から「ハンバーガーメニュー」の設定ができます。

 

上記の設定画面の項目を簡単に紹介していきますので、参考にしてみて下さい。

 

アイコンデザインのカスタマイズ

アイコンのデザインについての項目です。それぞれノーマル、クール、リストの３つがあります。それぞれがどのようなメニュー表示になるか解説します。

 

ノーマル

クール

リスト

アイコン下の「MENU」の表示ON/OFF

次にリストメニューの「MENU」の表示切り替えです。以下のように設定が行えます。

表示設定『ON』

表示設定『OFF』

メニュー位置を変更する

メニューの位置の切り替えの設定です。ここではメニューアイコンを左右反転させることができます。

メニューアイコンを「左」に設定

メニューアイコンを「右」に設定

スマホヘッダーエリアのロゴ画像の設定

 

次にスマホヘッダーエリアのアイコンの設定を行なっていきます。

 

WordPress管理画面より、「外観」→「カスタマイズ」を選択してください。

 

 

次に、カスタマイズ設定画面より、「ロゴ画像／サイトのタイトル」を選択して下さい。

 

 

「スマホロゴ画像」にて、スマホのヘッダーアイコンの画像が設定できます。自分でお好みの画像を選択し、設定を行なって下さい。

 

せなお
以上の設定で、スマホヘッダーエリアのアイコンの表示設定は完了です！次はCSSにて、カスタマイズを行いましょう！

 

ヘッダーエリアに影をつける方法について

CSSにて、ヘッダーエリア下に影をつけていきましょう。

 

具体的にどのような仕上がりになるかと言いますと、以下のような感じに仕上がります。

 

設定前

設定後

 

「外観」➔「カスタマイズ」から「追加CSS」を選択します。

 

⬇︎⬇︎以下のCSSコードをコピペでOKです！⬇︎⬇︎

追加CSS

@media print, screen and (max-width: 599px) {

/*ヘッダーに影を入れる*/

#s-navi dt {

box-shadow: 0 3px 6px rgba(0, 0, 0, .18);

}

}

 

せなお
実際のCSS設定画面は以下のような感じになります！

 

 

CSSに記入が完了できていて、実際に設定が反映されているか確認をしてみましょう！

 

スマホ用ヘッダーエリアの高さの調整方法

他にも、ヘッダーメニュー上にサイトロゴのアイコンを表示しているときの高さの調整をしていきたいと思います。

 

実際にヘッダー上にアイコンロゴ画像を挿入しただけでは以下のように、かなり高さの幅がなく狭いイメージになってしまいます。そのため、もう少しゆとりがある設定に変更していきましょう！

 

 

せなお
先ほど同様にCSSの設定を簡単に行なっていきます！

 

 

⬇︎⬇︎以下のCSSコードをコピペでOKです！⬇︎⬇︎

追加CSS

@media print, screen and (max-width: 599px) {
 /*ヘッダーアイコンの高さ*/
#s-navi dt.trigger {
height:80px;
}

}

 

せなお
実際のCSS設定画面は以下のような感じになります！

 

 

作業が完了したら、以下の画像のようにヘッダーアイコンの高さが変更できていることがわかります。あとは自分好みに高さを変更してカスタマイズを行なって下さい！

 

 

せなお
簡単にできたと思います！お疲れ様でした！

 

まとめ

今回は、アフィンガーのスマホヘッダーエリアのカスタマイズ方法について紹介しました。「AFFINGER」はカスタム性に優れていますが、初心者の方にとっては難易度が高いことも事実としてあります。

 

今回の記事など他にも、カスタマイズや設定方法について解説しているしているので、ぜひ参考にしてみて下さい。

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, トップページカスタマイズ
-, ,