スマホの操作性を考え、STINGER5のメニュー部分を色々カスタマイズしました

公開日:2014/10/7

STINGERのメニュー部分はすごくシンプル。これはカスタマイズして個性を出したいところです。IPhone6などの大画面スマホでもストレスのない操作ができるよう心がけました。よろしければ参考にしてみてください。

スポンサーリンク


メニューをカスタマイズするその前に

カスタムメニューのクラス名を削除

WordPressのカスタムメニューには自動でクラス名などが付いてきてカスタマイズするのにちょっとわかりにくいので、自分でクラス名を付け直してしまいます。

スマホでも操作性向上を目指したメニュー

クリックしやすいタイプメニューに変更

STINGER5のメニューはデフォルトだと小さく、目立たないのでクリックしやすくし、ヘッダーロゴの下、記事が始まる前に設置しました。

フッター固定のスライド式のメニューを設置

それでもスクロールしてしまうとメニューが見えなくなってしまうので、フェイスブックのようなスクロールしてもずっとついてくるメニューにしました。
フッターメニューには『前の記事へ』、『次の記事へ』、『トップへ戻る』、『カテゴリ』を表示しています。

フッターメニューにJQuery【Sidr】を設置

フッターメニューの『カテゴリ』ボタンには、カスタムメニューに対応させたJQueryプラグインSidrを実装しています。Sidrはクリックで横からにゅ~っとメニューが出てきます。スマホで操作がしやすくなるかも。

【Sidr】に『閉じる』ボタンの設置

Sidrの操作性をより良くするためにデフォルトではついていない『閉じる』ボタンを設置しました。

PCでのナビの表示もちょっとカスタマイズ

PC画面はSTINGERのデザインをCSSやアイコンフォントで、自分仕様に変更!

メニューの項目の頭にアイコンフォントをつける

ちょっとかわいいかなと思ってつけてみました。カスタムメニューをSidrにも同じものを使うと、スマホのメニューにもアイコンが表示されます。

見た目はCSSのみでカスタマイズ

布の背景画像なのでメニューも縫い物っぽい感じにしたつもりです。。。

まとめ

最近コツコツとカスタマイズしていたので忘れないように自分的な備忘録となってしまいました。使いやすいメニュー、使いやすいサイトをめざしていきたいと思います。

それではちゅんこ@shufulifeがお送りしましたー

100日チャレンジ32日目分。

Please Share!!

この記事のタイトルとURLをコピーする

記事タイトルスマホの操作性を考え、STINGER5のメニュー部分を色々カスタマイズしました
記事URLhttps://shufulife.com/stinger-menu/

お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。

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

最新情報をお届けします

最新記事をお知らせします
WordPress

Recommend―関連のおすすめ記事―