【はてなブログ】スマホページで横スクロールするグローバルナビを設置
スポンサード リンク
はてなブログスマートフォン用ページでプルダウン形式のグローバルナビ設置方法の記事を書いてから丁度1年が経過しました。
もうちょっと洒落た感じのナビゲーション作りたいなと思って試行錯誤してみたところ、横スクロール出来るグローバルナビが出来たのでご紹介します。
↑設置後はこんな感じの表示になります。これは画像なんでスクロールしませんが、実際にはちゃんと横スクロールしてくれます（汗。
早速設置方法を紹介していこうと思うのですが、その前に注意点が一つ。
今回のグローバルナビ設置方法はスマホページのタイトル下にHTMLコードを書いていくことになるので、はてなブログPROにしている方しか設置することが出来ないのでご了承ください。
設置方法
HTML
↑HTMLはこんな感じです。今回はリストタグを使用して作ってみました。
「カテゴリ○のURL」「カテゴリ○」部分はご自分のブログのカテゴリに変更してください。
「li」タグを増やすことで表示させるカテゴリ数を増やすことも出来ます。
「⇒」は横にスクロール出来るよって意味で書いただけなので、いらなければ消してしまってもいいです。
このコードを「デザイン」→「スマホのマーク」→「ヘッダ」→「タイトル下」に貼り付けます。
CSS
↑CSSはこんな感じ。
「background-color」「font-size」「color」「line-height」はお好みで変更してOKです。
貼り付ける場所はスマホページに反映される場所（head内とかスマホページ用のヘッダ、フッタとか）ならどこでもいいと思います。
私は後々分かりにくくならないように上のHTMLコードの直下に書き込みました。
