MORIAWASE

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

今日の人気記事です!

STINGER5を横スクロールナビにカスタマイズしてみたよ!

      2016/07/29

みんな大好きSTINGERシリーズ!僕もSTINGER5を愛用しています。ENJIさん、素敵なテーマありがとうございます。

さて、今日はメニューバーをカスタマイズしてみたので、その手順を公開してみます。

ハンバーガーメニューってダメなの?

スマホ表示の時、「メニューの位置が少し遠いかなー」「押しづらいよなー」と思っていたのですが、「ハンバーガーメニューって効果悪いらしいよ」という記事をいろんなところで見かけていたので、ガラッと変えることにしました。

デフォルトのメニューバー

stinger5-nav-1

 

デフォルトのメニュー

stinger5-nav-2

 

カスタマイズのゴール

stinger5-nav-3

カスタマイズする前に

今回、メニューバーの変更、横スクロールナビの導入にあたり、コードをシンプルにしてみました。

デフォルトでは、

  • スマホ表示の時→ハンバーガーメニューのナビ
  • パソコン表示の時→横並びのナビ

と、2つのコードをメディアクエリで指定しています。

 

僕がやりたいのは、「横スクロールナビの導入」だったので、ハンバーガーメニューは削除しました。ですので、それを踏まえてご覧ください。

CAUTION

バックアップを取ってからお試しください!

ヘッダーをカスタマイズ

まず、

  1. ワードプレスの管理画面
  2. 外観
  3. テーマの編集
  4. header.php

と進み、ハンバーガーメニューを削除します。

 

※今後ハンバーガーメニューに戻す可能性があるのであれば、コメントアウトの方が良いかもしれません。

body開始タグ直後からwrapper開始タグ直前までのコードがハンバーガーメニューです。

 

次に、メニューのheader閉じタグの直前にある、navの設定をいじります。

このコードの「smanone」というクラスで、スマホでは表示しないでくださいという命令がされているので、これを削除します。

▼こうなればOKですね。

CSS(スタイル)をカスタマイズ

これでスマホ表示の時にハンバーガーメニューがなくなり、パソコンと同じナビが表示されるようになりました。

次に、スマホの時は横スクロールナビ、パソコンの時はデフォルトのナビになるようにスタイルをカスタマイズします。

  1. ワードプレスの管理画面
  2. 外観
  3. テーマの編集
  4. style.css

と進みます。

 

検索フォームの下にメニューという箇所があるので、そこを見つけてください。デフォルトでは、

のようなコードですが、これを、

に変更します。これですでに横スクロールは導入できましたが、パソコンでも同じ表示になるので、パソコンの時はデフォルトのナビになるようにします。

元々あったコードを、パソコン表示時のスタイル指定箇所に追加すると考えれば分りやすいかもしれません。

 

PCサイズのスタイル指定箇所があるので、

ここに、コードを追加します。

▲こうなればOKです。これだけで横スクロールナビを導入できます。デフォルトのデザインに飽きた方、横スクロールナビを導入したい方、ぜひお試しください!

補足:つまづいたポイント

コードもシンプルになってスッキリしました。「テーブルセルにしてー」「ブロック要素にしてー」と思考錯誤しながら取り掛かったのですが、苦労しました。

テーブルセルにしたところまでは良かったのですが、文字が縦になってしまいお手上げ状態。その時出会ったのが、

というコードです。初心者には見慣れないコードでした(汗)

 

このコードは「自動的に改行しちゃダメだよ!」と命令してくれるコードで、これのおかげで無事にカスタマイズできました。

まだまだ勉強不足ですね…!これからも頑張ります!

 - WordPress・カスタマイズ

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

最新情報をお届けします