シュフィケーション

元IT戦士による主夫ブログ

【Stingerplus】コピペでOK!グローバルメニュー幅、ボタン幅を均等にする方法!

2017/03/30

wordpress

title

こんにちは。ゆすこです(@shufication)です。
グローバルメニューを使用する方はまだまだ多いですよね。
好みに寄りますが、私自身は、読む方がそのボタンを押すかはさておき、
ボタンがあることで、デザインのメリハリが出て見やすくなると考えています。

今回はグローバルメニューの幅調整、均等、装飾を行う方法をご紹介します。
コピペで実装が可能なので、良ければ参考にして頂ければと思います^^

親、もしくは子テーマのstyle.cssに追加するだけでOKです。
親テーマの場合は、要素を上書くだけでOKです。

Sponsored Link

修正する前の確認事項

修正したファイルは子テーマ「Stingerplus child」に追加すると安心です。
親テーマ内のファイルを上書きして作業している場合、親テーマをアップデートすると修正箇所が全てディフォルトになってしまうんですよ。
なので、子テーマで修正することをお勧めします。

子テーマで書く場合は必ず以下を確認してください。
初期状態では functions.php と style.css しかないので追加必須です。

◆header.php

◆st-font.php

◆analyticstracking.php

以上のファイルを親テーマから子テーマへコピペすれば完了。
この一連の作業で任意のファイルを子テーマで使用することができます。
修正したファイルをFTPで子テーマフォルダに追加するのを忘れずに!

では、いきましょう!!

メニュー全幅を指定

メニューのボタン数が多いと、こんな感じなったりします。

menu

逆にボタン数が少なくすると、メニュー右端に大きな余白が生まれます。

menu

まず初めにメニュー全幅を指定する必要があります。
要は指定することで、レイアウト崩れを防止し、
ボタン数に合わせてその幅を調整するだけで調整を行うことが出来ます。

このコードをstyle.cssに追加してください。

1060pxとした理由は、
メイン幅(740px)+サイドバー幅(300px)+padding(20px)= 1060px
なので、1060pxにしてあげると、キッチリとした見栄えになるからです。
それらの幅を既に調整している場合は、
合算した数値にしてあげると良いです。

ボタン幅の調整

先ほどお話したボタン幅についてです。
このコードをstyle.cssに追加してください。

当ブログでは、ボタン横の縦線が1px。
6か所あるので、
全幅(1060-6)÷ボタン数(7)の数値に指定しています。
正確には150.57ですが、150.6でも崩れないのでOKとしています。
150から150.6の間で好みに合わせてください。

グローバルメニューの装飾

当ブログではピンクを主体にしているので、
必要に応じてカスタマイズしてください。

ソースはこちら!先ほどのボタン幅も含んでいます。

シンプルな修正ですが、これで完了です^^
もしボタンの丸みが必要ない場合は、
border-radius部分を削除してください。

何かのお役に立てると嬉しいです^^

Sponsored Link

この記事を書いた人ってどんな人?

元IT会社員の管理人ゆすこです。

マイペースにみんなで週に2~4記事更新中!

管理人ゆすこのプロフィールはこちらより

良かったらシェアをお願いします!mm

関連記事はこちら

shufi_161029-i
【Stingerplus】コピペでOK!記事下にSNSシェアボタンを置く方法。

こんにちは。ゆすこ(@shufication)です。 記事上にsnsシェアボタン ...

shufi_161001-i
【Stingerplus】コピペで出来る!CSSでリストデザインのカスタマイズ!

こんにちは。ゆすこです(@shufication)です。 項目が多いとき、数字で ...

shufi_160929-i
【初心者】wordpressでクラス、要素を一瞬で検索する方法!Stingerplusでも役立つ!

こんにちは。ゆすこです(@shufication)です。 就職当初は分からないこ ...

shufi_160924-i
【Stingerplus】すぐに出来る!画面トップのハンバーガーメニューボタンを消す方法!

こんにちは。ゆすこです(@shufication)です。 スマホのレイアウトでこ ...

shufi_0916_title-i-min
【Stingerplus】簡単!グローバルメニューにホバーエフェクトを実装!

こんにちは。ゆすこです(@shufication)です。 ホバーエフェクトを使用 ...

-wordpress
-,