【Stingerplus】コピペでOK!グローバルメニュー幅、ボタン幅を均等にする方法!
2017/03/30
wordpressこんにちは。ゆすこです(@shufication)です。
グローバルメニューを使用する方はまだまだ多いですよね。
好みに寄りますが、私自身は、読む方がそのボタンを押すかはさておき、
ボタンがあることで、デザインのメリハリが出て見やすくなると考えています。
今回はグローバルメニューの幅調整、均等、装飾を行う方法をご紹介します。
コピペで実装が可能なので、良ければ参考にして頂ければと思います^^
親、もしくは子テーマのstyle.cssに追加するだけでOKです。
親テーマの場合は、要素を上書くだけでOKです。
修正する前の確認事項
修正したファイルは子テーマ「Stingerplus child」に追加すると安心です。
親テーマ内のファイルを上書きして作業している場合、親テーマをアップデートすると修正箇所が全てディフォルトになってしまうんですよ。
なので、子テーマで修正することをお勧めします。
子テーマで書く場合は必ず以下を確認してください。
初期状態では functions.php と style.css しかないので追加必須です。
◆header.php
◆st-font.php
◆analyticstracking.php
以上のファイルを親テーマから子テーマへコピペすれば完了。
この一連の作業で任意のファイルを子テーマで使用することができます。
修正したファイルをFTPで子テーマフォルダに追加するのを忘れずに!
では、いきましょう!!
メニュー全幅を指定
メニューのボタン数が多いと、こんな感じなったりします。
逆にボタン数が少なくすると、メニュー右端に大きな余白が生まれます。
まず初めにメニュー全幅を指定する必要があります。
要は指定することで、レイアウト崩れを防止し、
ボタン数に合わせてその幅を調整するだけで調整を行うことが出来ます。
このコードをstyle.cssに追加してください。
1 2 3 4 |
/* メニュー全幅調整 */ .smanone.clearfix{ width: 1060px; } |
1060pxとした理由は、
メイン幅(740px)+サイドバー幅(300px)+padding(20px)= 1060px
なので、1060pxにしてあげると、キッチリとした見栄えになるからです。
それらの幅を既に調整している場合は、
合算した数値にしてあげると良いです。
ボタン幅の調整
先ほどお話したボタン幅についてです。
このコードをstyle.cssに追加してください。
1 2 3 |
header .smanone ul.menu li{ width:150.6px; /* ボタン幅 */ } |
当ブログでは、ボタン横の縦線が1px。
6か所あるので、
全幅(1060-6)÷ボタン数(7)の数値に指定しています。
正確には150.57ですが、150.6でも崩れないのでOKとしています。
150から150.6の間で好みに合わせてください。
グローバルメニューの装飾
当ブログではピンクを主体にしているので、
必要に応じてカスタマイズしてください。
ソースはこちら!先ほどのボタン幅も含んでいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav.smanone { border-radius: 4px; /* ボタンを角丸に */ border: solid 1px #fc94ad; /* 縦線の色 */ background: #fc94ad; /* 背景 */ padding:0px 0px; } header .smanone ul.menu li{ width:150.6px; /* ボタン幅 */ border-right:solid 1px #fff; /* ボタン横の縦線 */ } header .smanone ul.menu li a:hover{ color:#fddcdb; /* マウスオバー時の文字色 */ } header .smanone ul.menu li a{ font-size: 14px; /* 文字サイズ */ color:#fff; /* 文字色 */ } |
シンプルな修正ですが、これで完了です^^
もしボタンの丸みが必要ない場合は、
border-radius部分を削除してください。
何かのお役に立てると嬉しいです^^
Sponsored Link
関連記事はこちら
新着記事
-
【Stingerplus】コピペでOK!記事下にSNSシェアボタンを置く方法。
こんにちは。ゆすこ(@shufication)です。 記事上にsnsシェアボタン ...
-
【Stingerplus】コピペで出来る!CSSでリストデザインのカスタマイズ!
こんにちは。ゆすこです(@shufication)です。 項目が多いとき、数字で ...
-
【初心者】wordpressでクラス、要素を一瞬で検索する方法!Stingerplusでも役立つ!
こんにちは。ゆすこです(@shufication)です。 就職当初は分からないこ ...
-
【Stingerplus】すぐに出来る!画面トップのハンバーガーメニューボタンを消す方法!
こんにちは。ゆすこです(@shufication)です。 スマホのレイアウトでこ ...
-
【Stingerplus】簡単!グローバルメニューにホバーエフェクトを実装!
こんにちは。ゆすこです(@shufication)です。 ホバーエフェクトを使用 ...