AFFINGER4

AFFINGER4でヘッダーとグローバルメニューを全幅にする方法

投稿日:

こんにちは、まぐろです。
このサイトはAFFINGER4を使用しているのですが、他サイトと差別化ができなくて嫌なのでカスタマイズしました。具体的にはヘッダーとグローバルメニューを全幅にしています。
(もしかしてどこかで設定できたのかもしれませんが、見当たらなかったのでCSSをいじりました。)

今回はその備忘録です。

カスタマイザーでやったこと

  • ロゴ画像の設定
  • ヘッダー画像>現在のヘッダーを削除
  • 基本エリアの設定>ヘッダーエリア>背景色をグレー(#cccccc)にしてみた
  • 基本エリアの設定>ヘッダーエリア>「ヘッダー背景の横幅を100%にする」にチェック
  • メニューのカラー設定>背景色を白(#ffffff)にしてみた

そしてできあがったのがこちらです。

ロゴがでかすぎた…。
なかなかの破壊力です。

ヘッダーの背景画像を作る

ヘッダーにインパクトを!ということで、背景に画像を設定することにしました。
選んだ写真はコレ。写真AC(無料)で探してきました。

まぐろが刺身にされているところです。刺身にならないように、という自戒も込めて。
これをSAIでモノクロにしました。

何かわからなくなっちゃったけど、まいっか!

CSSカスタマイズ実例

ロゴの大きさを直す

ブラウザの幅が600px以上の時はロゴのサイズをMAX幅400pxにしてね、ってことです。

グローバルメニューを全幅に

「メニューのカラー設定」で設定した色と同じにしてください。

ヘッダーに背景画像設定する

「background-size: cover;」でヘッダーの横幅いっぱいまで画像を引き伸ばしてます。

ここからはお好みで。サイト上部に線を引く

メリハリをつけたかったので、サイトの上部に15pxの黒い線を引いています。
カスタマイザーから設定すると全幅にならないのでCSSにて設定。

スマホ時、メニュー部分の背景を黒くする

スマホから見てもメリハリがつくように、折りたたみメニューのところを黒くしました。

↑こんな感じです。

折りたたみメニューの文字色を変更

メニューの文字が黒のため非常に見づらいので白(#ffffff)にしました。
もしかしたらカスタマイザーで設定できるかも?(面倒なので未確認)

で、完成したのがこちら

うん、インパクトと引き締まってる感があっていいんじゃないでしょうか。
以上ただの自己満足でした。

-AFFINGER4

Copyright© まぐろ小屋 , 2018 All Rights Reserved.