STORK(ストーク)のスマホ表示でハンバーガーメニューを右側に表示する方法

こんにちは!くまぺです。

今回はストークのスマホ表示でハンバーガーメニューを右側に表示するカスタマイズをご紹介します。

右手でスマホを持つ人が多いので、右側にメニューがあった方がタップしやすいですよね。

このカスタマイズでは、右側にある検索ボタンを非表示にして、その位置にハンバーガーメニューを表示します。

検索バーはハンバーガーメニューのウィジェットの中に入れてしまえばOKです。

CSSのコピペだけなのでサクッとカスタマイズしましょう:3

カスタマイズ方法

style.cssのコピペだけでできてしまいます。

まずは「外観」→「テーマの編集」でstyle.cssの編集画面を開きましょう。

ご注意ください
テーマのカスタマイズをする際は子テーマを利用しましょう。
詳しくは公式サイトの説明をご覧ください。
専用「子テーマ」のダウンロード・解説 | OPENCAGE

style.cssの最後に、次のコードを書き加えましょう。

最後の行で改行した後にコピペしてください。

これだけで完了です:3

スマホで確認すると、検索ボタンが非表示になってハンバーガーメニューが右側に表示されているかと思います。

今はロゴを左に寄せているので、もし中央に寄せたい場合は上記のコード3~5行目の

を削除してください。

ロゴが中央寄せになるかと思います。

 

検索バーはウィジェットに

検索ボタンを非表示にしたので、代わりにハンバーガーメニューの中で検索バーを表示しましょう。

「外観」→「ウィジェット」→「SP:ハンバーガーメニュー」に、「検索」ウィジェットを追加すれば完了です。

以上でカスタマイズは終わりです。

お疲れ様でした!

 

もし何かありましたら僕のTwitterまでどうぞ:3



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください