AFFINGER

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

2021年10月26日

 

 

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

 

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

ポイント

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

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

 

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

 

この記事を書いた人

プロフィール画像

 

Twitterへ

Instagramへ

YouTubeへ

＼ 当ブログ使用テーマ ／

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第１位
  • SEO対策と広告収入UP機能を標準装備！

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

参考AFFINGERのカスタマイズ方法一覧はこちらから

 

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

 

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

 

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

 

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

 

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

 

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万PV｜SNS運用｜ITスキルとライフハックをアウトプット｜プログラミングも独学中｜より良い学びと習慣のノウハウを発信｜ 詳細はブログに掲載していきます。

-AFFINGER
-, , ,