AFFINGER BLOG

AFFINGER5【アフィンガー5】ヘッダーメニュー(横列)の設定方法を解説

 

PCでサイトのタイトルの横にメニューを作りたい。

色を変更したり二段にする方法は?

 

このような疑問にお答えしていきます。

 

本記事の内容
  • ヘッダーメニュー(横列)の設定
  • カラーを変更する方法
  • メニューを2段にする方法

 

本記事の信頼性

この記事を書いている僕はブログ運営三ヶ月目で4000PVを達成した高校生。

Twitter(hyon1182)でも情報発信を行っています。

 

今回はAFFINGER5(アフィンガー5)のカスタマイズ方法を紹介していきます。

 

ヘッダーメニュー(横列)の設定方法やカラー設定、2段にする方法を解説しているのでアフィンガーのカスタマイズで悩んでいる方は一度目を通してみてください。

 

それでは内容に入っていきましょう。

 

AFFINGER5ヘッダーメニュー(横列)を設定する手順

 

アフィンガー5では、サイトのヘッダーメニューを細かくカスタマイズすることができます。

 

今回はその中で『ヘッダーメニュー(横列)』に絞って話をしていきますね。

 

完成後のイメージはこのようになります。

 

 

赤で囲んである部分がヘッダーメニュー(横列)です。

 

ヘッダーメニュー(横列)を設定する手順➀AFFINGER5管理からメニュー設定を行う

 

まずは『WordPress管理画面』→『AFFINGER5管理』→『メニュー』の順に進みましょう。

 

 

この画面では、この2つの項目をチェックしましょう。

 

  • PC用メインメニューを表示しない
  • ヘッダー用メニュー(横列)を有効化

 

ちなみにPC用メインメニューとはこんな感じです。

 

 

自分は不必要だなと思うので、ヘッダー用メニュー(横列)のみを利用しています。

 

好みに合わせて、いろいろ試してみてください。

 

ヘッダーメニュー(横列)を設定する手順②メニューを作成する

 

次に『外観』→『メニュー』からカスタマイズを行っていきましょう。

 

 

最初に、『新しいメニューを作成』をクリックしてください。

 

 

この画面ではヘッダー用メニュー(横列)を表示する準備をします。

 

  1. メニュー名を決める:自由でOK
  2. ヘッダーメニュー(横列)をクリック

 

上記の2つをチェックすれば完了です。

 

ヘッダーメニュー(横列)を設定する手順③メニュー項目を追加する

 

ここまででメニュー自体は作れたので、次は具体的な項目を作りましょう。

 

 

メニュー項目を追加』から表示させたいメニューやカテゴリーを追加すればOKです。

 

このブログの場合だと、お問い合わせメニューなどを追加していますよ。

 

これでヘッダーメニュー(横列)を設定できました。

 

AFFINGER5ヘッダーメニュー(横列)の細かい設定

それでは次に、ヘッダーメニュー(横列)の細かい設定方法を解説していきますね。

 

  • 文字の色を変える設定
  • 2段にする設定

 

自分はこの文字の色を変える設定が全然できなくて、非常に悩んだ経験があります。

 

皆さんにスムーズにカスタマイズしてもらうためにも、しっかり解説していきますね。

 

AFFINGER5の細かい設定➀文字の色を変える方法

 

それでは文字の色を変える方法について解説します。

 

外観』→『カスタマイズ』→『基本エリア設定』→『ヘッダーエリア』→『電話番号とヘッダーリンク』の順に進みましょう。

 

 

上記のカラーパレットから好みの色を選んでいただければOKです。

 

おすすめの色をいくつか紹介しておきますね。

 

  • 灰色:7f7f7f
  • 黒色:333333
  • 薄赤:eb8686
  • 水色:78bbe6

 

カラーコードを入手したい場合はCOOL COLORSHappy Huesなどがおすすめです。

 

AFFINGER5の細かい設定②2段にする方法

 

次はヘッダー用メニュー(横列)を2段にする方法を解説します。

 

完成後のイメージを先にお見せするとこんな感じです。

 

 

まずは『外観』→『ウィジェット』の順にクリックしてください。

 

 

表示オプションと、タイトル属性をチェックできたら2段にする準備は整いました。

 

次は、2段に分けて項目を作っていきます。

 

 

どういうことか簡単に説明するとこんな感じです。

 

  • ナビゲーションラベル:1段目として表示される文字
  • タイトル属性:2段目として表示される文字

 

ナビゲーションラベルの方が、文字が太めとなっています。

 

入力が完成するとこのようになりますよ。

 

 

ぜひタイトル属性を使用して2段にしてみてください。

 

最後に:ヘッダー用メニュー(横列)を有効化しよう

 

今回は、PC用ヘッダーメニューのカスタマイズであるヘッダーメニュー(横列)について説明しました。

 

通常のPC用メニューと比べてすっきりとしたヘッダーメニューを作ることができるのでおすすめの設定です。

 

カスタマイズをする際はバックアップに気を付けて、素晴らしいサイトを作ってみてください。

 

バックアップはUpdraftplusで決まり【バックアップから復元まで】

続きを見る

 

本記事の内容はここまでです。

-AFFINGER, BLOG

© 2021 HYON BLOG Powered by AFFINGER5