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

 2014/10/07

stinger-menu-1

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

スポンサーリンク


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

STNGER5

Please comment!

  

Messege




現在トラックバックはありません。