スマホの操作性を考え、STINGER5のメニュー部分を色々カスタマイズしましたスマホの操作性を考え、STINGER5のメニュー部分を色々カスタマイズしましたSTINGERのメニュー部分はすごくシンプル。これはカスタマイズして個性を出したいところです。IPhone6などの大画面スマホでもストレスのない操作ができるよう心がけました。よろしければ参考にしてみてください。スポンサーリンク[toc]メニューをカスタマイズするその前にカスタムメニューのクラス名を削除WordPressのカスタムメニューには自動でクラス名などが付いてきてカスタマイズするのにちょっとわかりにくいので、自分でクラス名を付け直してしまいます。【WordPress】カスタムメニューのクラスやidを削除したり、liに任意のクラスを付けたり。Shufulifeスマホでも操作性向上を目指したメニュークリックしやすいタイプメニューに変更STINGER5のメニューはデフォルトだと小さく、目立たないのでクリックしやすくし、ヘッダーロゴの下、記事が始まる前に設置しました。Shufulifeフッター固定のスライド式のメニューを設置それでもスクロールしてしまうとメニューが見えなくなってしまうので、フェイスブックのようなスクロールしてもずっとついてくるメニューにしました。フッターメニューには『前の記事へ』、『次の記事へ』、『トップへ戻る』、『カテゴリ』を表示しています。ShufulifeフッターメニューにJQuery【Sidr】を設置フッターメニューの『カテゴリ』ボタンには、カスタムメニューに対応させたJQueryプラグインSidrを実装しています。Sidrはクリックで横からにゅ~っとメニューが出てきます。スマホで操作がしやすくなるかも。Shufulife【Sidr】に『閉じる』ボタンの設置Sidrの操作性をより良くするためにデフォルトではついていない『閉じる』ボタンを設置しました。ShufulifePCでのナビの表示もちょっとカスタマイズPC画面はSTINGERのデザインをCSSやアイコンフォントで、自分仕様に変更!メニューの項目の頭にアイコンフォントをつけるちょっとかわいいかなと思ってつけてみました。カスタムメニューをSidrにも同じものを使うと、スマホのメニューにもアイコンが表示されます。Shufulife見た目はCSSのみでカスタマイズ布の背景画像なのでメニューも縫い物っぽい感じにしたつもりです。Shufulifeまとめ最近コツコツとカスタマイズしていたので忘れないように自分的な備忘録となってしまいました。使いやすいメニュー、使いやすいサイトをめざしていきたいと思います。それではちゅんこ@shufulifeがお送りしましたー100日チャレンジ32日目分。Share!!ツイートするシェアするはてブするこの記事のタイトルとURLをコピーする記事タイトルスマホの操作性を考え、STINGER5のメニュー部分を色々カスタマイズしました記事URLhttps://shufulife.com/stinger-menu/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。