読者です 読者をやめる 読者になる 読者になる

チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】スマホページで横スクロールするグローバルナビを設置

 スポンサード リンク

 はてなブログスマートフォン用ページでプルダウン形式のグローバルナビ設置方法の記事を書いてから丁度1年が経過しました。

 もうちょっと洒落た感じのナビゲーション作りたいなと思って試行錯誤してみたところ、横スクロール出来るグローバルナビが出来たのでご紹介します。


f:id:chipsforest:20160215225325j:plain

 ↑設置後はこんな感じの表示になります。これは画像なんでスクロールしませんが、実際にはちゃんと横スクロールしてくれます(汗。

 早速設置方法を紹介していこうと思うのですが、その前に注意点が一つ。

 今回のグローバルナビ設置方法はスマホページのタイトル下にHTMLコードを書いていくことになるので、はてなブログPROにしている方しか設置することが出来ないのでご了承ください。

設置方法

HTML

 ↑HTMLはこんな感じです。今回はリストタグを使用して作ってみました。

 「カテゴリ○のURL」「カテゴリ○」部分はご自分のブログのカテゴリに変更してください。

 「li」タグを増やすことで表示させるカテゴリ数を増やすことも出来ます。

 「⇒」は横にスクロール出来るよって意味で書いただけなので、いらなければ消してしまってもいいです。

 このコードを「デザイン」→「スマホのマーク」→「ヘッダ」→「タイトル下」に貼り付けます。

CSS

 ↑CSSはこんな感じ。

 「background-color」「font-size」「color」「line-height」はお好みで変更してOKです。

 貼り付ける場所はスマホページに反映される場所(head内とかスマホページ用のヘッダ、フッタとか)ならどこでもいいと思います。

 私は後々分かりにくくならないように上のHTMLコードの直下に書き込みました。

結果



 ↑上のHTMLとCSSを書き込んだ結果がこんな感じ。スマホで確認してみてください。

 横スクロールしてくれれば成功です。

 ヘッダーと記事本文内では文字サイズや高さが違うので、多少変な感じになっているかもしれません。

 上のHTMLとCSSをヘッダに書き込んでみて、少し表示がおかしいようなら「font-size」「line-height」「padding」「margin」等の数値を変更することで整えられるかと思います。


 あまり洒落た感じにはならなかったですが、今のところはこれで満足してます^^

PAGE TOP