ライフスタイル

【初心者向け】AFFINGER5でグローバルメニューを1段にして見やすくする方法

2020年6月21日

ブログ記事を書くと色々の内容の記事になってしまい、記事のカテゴリーを増やしたのですが
グローバルメニューの部分が残念なことになってしまいました。

会社でサイトを運営されている方は、会社概要、商品情報、お問合せなど
メニュー項目を増やしていくと同じように残念なトップ画面になってしまった経験はありませんか?

 

 

トップ画面は「あなたの顔」

 

トップページの乱れは「あなたの乱れ」と言っても過言ではありません!

 

今日は、AFFINGER5お使い初心者の方で
カテゴリーを増やしすぎてしまった。。。
けどトップ画面のグローバルメニューを洗練したものにしたい

という方に解決方法をご紹介していきます。

 

 

この記事を読んで解決できること

グローバルメニューの項目と色を調整していきます。

 

ちなみに「グローバルメニュー」というのは下の画像の赤い線で囲った場所のことです。

 

 

調整前の私のグローバルメニューがこちら

調整前

 

残念な点

  • 「ライフスタイル」が2段になっている
  • 項目に区切りがないので見ずらい

 

そしてこれが調整後

調整後

 

旅アテンダント
1段になってきれいに整えられてホッとしました

 

グローバルメニューが2段になる理由

AFFINGER5では、初期設定ではグローバルメニューに6項目しか入りません。

理由は、サイトコンテンツの幅が1060pxになっているからです。
グローバルメニューの1項目の幅は160pxなので、計算するとグローバルメニューは6項目が限界なんです。

7項目以上は2段目に表示されてしまいます。

では、どうすればいいかというのを次にご紹介していきます。

 

AFFINGER5で幅を広げ、グローバルメニューを1段にする

7項目だと1120pxが必要なので、サイトの幅を広げていきます。
この作業でグローバルメニューに7項目でも入るようになります。

 

step
1
AFFINGER5管理画面より設定を行う

AFFINGER5管理画面→「デザイン」→下にスクロールして「サイト全体のレイアウト一括設定」

step
2
赤枠の部分に「1120」と入力

 

step
3
「SAVE」で設定を保存

以上で幅の設定は完了です。

実はコンテンツ幅を広げるのには、あちこちとCSSのカスタマイズが必要になるので
慣れていないと難しいのですが
AFFINGER5だとこれだけで設定が可能となります。

 

次に、のっぺらぼうのグローバルメニューを見やすく調整していきます。

 

グローバルメニューのカラー設定

項目が分かりやすくなるように、色の設定をしていきます。

設定前

 

外観 → 「カスタマイズ」 → 「メニューのカラー設定」 → 「PCヘッダーメニュー」

 

これで完成です。

 

 

まとめ  AFFINGER5でグローバルメニューを1段にして見やすくする方法

AFFINGER5だと、簡単に様々なカスタマイズができるんですね。

私は、実はよく知識も分かっていない状態でAFFINGER5を購入したのですが
今では有料版でよかったと思っています。

ブログはあなたの顔のようなもの。

美しく整えて、洗練されたページを作っていきましょう。

-ライフスタイル
-

© 2020 おとな開運女子部 Powered by AFFINGER5