MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

XeoryExtensionのスマホメニューを右上にするカスタマイズ。

      2016/05/18

ワードプレス4.5にアップデートした後に起こった「Xeory Extensionの不具合」も無事に解決し、早数日。

「何かためになる記事でも書けないかなー」と思っていたんですが、そういえばありましたよ。

Xeory Extensionのスマホメニュー(ハンバーガーメニュー)の位置気になりません?

黒の背景のメニューが中心にあるんですが、僕はかなり気になっていたので、早々にカスタマイズしてたんです。

デフォルトのメニュー位置。

xeory-extension-menu-2-1

 

メニューを開くとこんな感じ。

xeory-extension-menu-2-2

ヘッダーの右上に固定するカスタマイズ

「めっちゃ気になる!早く教えろ!」という方は、ぜひ見てください。それ以外の方も見てください。

先に言っておくと、今回のカスタマイズはめちゃくちゃ簡単です。一回でもカスタマイズをした方は難なく終わるはずです。

カスタマイズ後はこんな感じになります。

xeory-extension-menu-2-8

 

カスタマイズ後のメニューを開いた状態。

xeory-extension-menu-2-7

カスタマイズ方法

今回カスタマイズするのは、スタイルシート(style.css)のみ。

ワードプレス→管理画面→テーマの編集と進み、style.cssを編集します。

(※必ずバックアップをとってからお試しください)

 

では、早速カスタマイズしてみましょう。

最初に、下記のコードを探します。デフォルトでは2589行目にあります。

これを下記のように修正します。

回り込みを解除せずに上下に余白を作るというコードです。

今後のためにも、消さずにコメントアウトしてます。わかる方は消しちゃっても大丈夫です。

 

次に、その少し下にあるこちらのコードを全てコメントアウト(削除)します。

↓こうなればOKです。

 

実は、これだけでハンバーガーメニューが右上に固定されます。

xeory-extension-menu-2-9

 

あとは、微調整だけ。例えば、2209行目にあるこのコード。

この最後のコードをコメントアウト(削除)すると、黒背景が消えます。

こっちの方がかっこいいですよね。

xeory-extension-menu-2-5

 

ハンバーガーメニューをもう少し右にずらしたければ、先ほどのコードのすぐ上にある、こちらのコードを修正します。

「width」の値を変えると左右にずれるので、お好みで修正してみてください。僕は40pxにしています。

40pxにするとスッキリします。

xeory-extension-menu-2-6

まとめ

簡単なカスタマイズで、デフォルトのメニューよりもカッコよくなった気がします。

もう一度、カスタマイズ後のメニューを見てみましょう。

xeory-extension-menu-2-8

 

メニューを開いた状態。

xeory-extension-menu-2-7

 

子テーマでカスタマイズしている方もいるかもしれませんが、元のファイルをカスタマイズした方が簡単です。

アップデートの影響でメニューがデフォルトの状態に戻ってもダメージがないし、また簡単にカスタマイズできるので、挑戦してみてはいかがでしょうか?

参考にしていただければ嬉しいです!

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします