スマホ版のメニューバーを作ってみた

 

こんにちは。

『やさしいブログの作り方』の松田です。

 

最近、個別コンサルの方のブログのカスタマイズを手掛けています。

 

アメブロカスタマイズって一時期競合多数で、ブログ記事でそのやり方を公開されているブログもたくさんありました。

 

最近はあまり聞かなくなりましたね、なんとも寂しい。

 

 

で、そのときにふと

 

「スマホ版のメニューバーってあった方がいいんじゃないの？」

 

と思ってしまいました。

 

 

アクセス解析を見ていても、ブログアクセスの大半はスマホからのアクセスですから、いくらパソコン版のブログを整えても、スマホ版にはヘッダー画像やメニューバーは表示されません。

 

であれば、記事エリアにメニューバー（のような整列したボタン）がある方が多少なりとも誘導効果があがるのではないかと。

 

 

で、こんな感じで作ってみました。

 

 

スマホは機種によって画面の幅が異なるため、縦一列に並ぶようにしました。

 

加えて、スマホ版のアメブロでは表示されますが、パソコン版では表示されないようにしています。

 

すでにパソコン版でメニューバーを設置されている方にとっては、二重になってしまいますしね。

 

 

今はまだHTMLやCSSの記述が粗削りなので、整理がついたらまた公開させていただきますね。

 

 

 

最後までお読みいただきありがとうございました。