【AFFINGER4】PC表示のメニューバーを均等中央揃えにして見栄え良くするカスタマイズ方法【wordpress】

投稿日:

こんなこといいな できたらいいな

あんなこと こんなこと いっぱいあるけど

みんなみんなみんな かなえてくれる

ふしぎなボタンで かなえてくれる

ブログを自由にカスタマイズしたいな!

「ハイ!アフィンガー4」

アンアンアン とってもだいすきMAKOえもん♪

今回のお悩み相談は、

AFFINGER4のPC表示のメニューバー(タイトル下のメニュー)は、標準ですと左寄せになります。

私のメニューバーは均等中央寄せ済みなので綺麗です。

 

ただ、今の時代、ブログの訪問者の割合はPC 3割、スマホ 7割の時代です。スマホでは別の方法でメニューバーが表示されるので、左寄せはPC表示の場合のみです。

気にしなければ済む話なのですが、左の寄ってるのが気になる!自分のブログはきっちりとカスタマイズしたい!という方は、きっちりとセンター寄せにして左右のスペースを均等にして見栄えを良くしましょう!

ということで、今回はPC表示のメニューバーを均等中央揃えにして見栄え良くするカスタマイズ方法をお教えします。

他のブログでも均等中央寄せの方法を書いているブログもあるのですが、AFFINGER4はアップデートの度にボタン1つで出来ることが増えていきます。それは同時に余計なCSS設定してしまうと不具合を起こしてしまうことを意味します。私がお世話になっているブログのCSSでは、不具合が起こってしまいます。

 

AFFINGER4のCSSカスタマイズ時によくある不具合は、

①マウスが重なったときに色を変える。

これはCSSでコードを記載する必要はありません。AFFINGER4のカスタマイズ画面で簡単に設定できるので、2重でCSSを設定するとややこしいことになります。

②メニューの色を変える。

これもカスタマイズ画面から簡単に設定できるので必要ありません。

ということを覚えておきましょう!

 

2018年現在のAFFINGER4のバージョンでは、均等中央寄せ以外のメニューのカスタマイズにCSSは必要ありません。

ですので今回紹介するCSSは単純に『均等中央寄せ』するためだけのCSSになります。

方法は

以下のCSSをコピーして、テーマ編集の子テーマからスタイルシート (style.css)に貼り付けてください。

 

表に記載されている下から2段目の数字はブログの幅です。私のブログは1100pxなので1100pxと記入していますが、1150pxの方は1150pxと書き換えてください。

ご自分のブログの幅が分からない方はダッシュボードのAFFINGER4管理▷PC閲覧時のサイトの幅(width※デフォルトは1060px)の下に表示されています。

 

コードが正しい場合でも、反映されるまで暫くかかることがあるので焦らずに待ちましょう!

…どうでしたか?

見栄え良く変わったでしょう!

 

以上が【AFFINGER4】PC表示のメニューバーを均等中央揃えにして見栄え良くするカスタマイズ方法【wordpress】でした。





-WordPress
-,

Copyright© そこに山と金があるから , 2018 All Rights Reserved Powered by AFFINGER4.