↑トップへ

スポンサーリンク
スポンサーリンク
2015年07月30日

グローバルナビゲーションとハンバーガーメニューの実装

とうとう私のブログにもグローバルナビゲーションが!


グローバルナビゲーション.gif

灰色のボタンがグローバルナビゲーション

ドットインストールで勉強したボタンにしていて、押したときちゃんとボタンらしく引っ込むのがうれしい。


今回のカスタマイズで、PC表示ではグローバルナビゲーションが、スマホ表示ではグローバルナビゲーションの代わりにハンバーガーメニューが表示されるようになっています。
また、ブログのデザイン自体いろいろ変更しました。
幅広くしたり、文字大きくしたり。
読みやすいブログになってるといいんですが。


ハンバーガーメニュー.gif

右上の「≡」が例のハンバーガー

ちなみにハンバーガーメニューのことはドロワーメニューとも言うそうですが、私はハンバーガーメニューの方が気に入ってしまったので、かたくなにこっちで呼びます。笑


以下、今回参考にさせていただいたサイト・ブログ様のご紹介です。


グローバルナビゲーションの実装


結構大変かと思ったら、リストでリンク作ってCSSで飾ればいいだけでした。
こちらの記事を参考にしました。
シーサーブログにグローバルナビを設置する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う
いやー何事にも偉大な先人様がいらっしゃるもんですね。
本当に助かっております。


ちなみに私はカテゴリをグローバルナビゲーションにしました。


ハンバーガーメニューの実装


こちらはなかなかに苦労しました。
CSSのみで作っていますが、CSSをこれ以上長くしたくなくてアニメーション(ビャッて出てくる処理)は諦めました。
参考にさせていただいたのはこちら。
CSS3:CSSだけで作るドロワーメニュー | Hack
本当は画面が暗くなったりしてもっと素敵なメニューなんですけど、難しそうなとこはすっ飛ばして最低限機能するようにだけしました。
初心者がいきなりレベル他界(誤字)の作ろうと思っちゃダメですよね。


実装してみての感想


難しそうに思えても、やればできる。笑


実装前のデータを測り忘れたので比較できませんが、今のこのブログはPageSpeed Insightsでユーザーエクスペリエンツ91/100ですので、現状スマホユーザーにとっての閲覧しやすさという面では悪くないんじゃないでしょうか。


まあ速度が69/100と遅いんですけどね。
CSSを最適化しろって言われてるんですが、なかなか…。
PC表示も81/100と速くないので、ここは今後の課題です。


それでも少しずつ理想のブログに近づいてきてとてもうれしいです。


え?パンくず?後でやるって。



スポンサーリンク

スポンサーリンク
にほんブログ村 小遣いブログ SOHO・在宅ワークへ
posted by あらいぐま at 04:11 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。