Love2Labo

日常の些細なことやどうでもいいことをあなたに。たまに Wordpress カスタマイズ。

AFFINGER

【AFFINGER4】メニューを均等中央揃えにして少しだけオシャレにするカスタマイズ

投稿日:2016/11/03 更新日:

af-logo

今回はメニュー部分のカスタマイズです。

最終形はこのブログで適用している形(2016年11月3日現在)になります。


稼ぐサイトの設計図-AFFINGER4公式ガイド

AFFINGER4 のメニューで少し残念な部分を変更する

これは好みの問題だと思うので私がとやかく言うことではないかもしれませんが、AFFINGERってメニューが少し残念な気がします。

どこら辺かというと、ズバリ「幅が固定(160px)で左寄せな部分」です。

残念な理由

簡単にまとめると残念な理由は2つ。

  • 左寄せなので右側に隙間がある
  • メニューを7個以上にすると2列になってしまう

なのでこれを解決する方法を考えてみました。

中央寄せにして幅を等分に変更する方法

今回触るのはCSSファイルのみです。初心者向けですね。

コピペでstyle.cssの最終行にでも貼ってください。

あ、バックアップは取ってくださいね。

あくまでも自己責任でお願いします。サポートはしません。

このブログの場合

このブログではさらに2点変更しています。

まず、[外観]→[カスタマイズ]→[メニューのカラー設定]で、『メニューの横幅を100%にする』にチェックを入れます。

次に、CSSの<ul>にもう1行「max-width:920px;」を追加しています。

1カラムの場合はこれをすると記事幅とちょうど一緒になるかと。

※メニューの横幅を100%にしない場合は<ul>じゃなくて nav.smanone とかにwidthを設定するときれいになるかもしれません。

 

変更前と変更後の変化

af-menu_01

af-menu_02

バッチリですね。

メニューを7つにしてみます。

af-menu_03

完璧ですね。

 

まとめ

言いたくないですが、今回も『コピペで大丈夫』です。

ただメニューの文字数が長いと途中で見切れるので要注意です。

スマホで見てる人が多い時代なので、あんまり意味はないかもしれませんが、自己満足のオトモにどうぞ。

あと質問は受け付けていませんが、記事をツイートしていただくとエゴサしてるので気が向けば答えを記事にします。以上です。

af4_336px
稼ぐサイトの設計図-AFFINGER4公式ガイド

-AFFINGER

Copyright© Love2Labo , 2016 AllRights Reserved Powered by AFFINGER4.