はてなブログスマートフォン版にグローバルナビを付けてみました

ブログ村を再開してみました。
下のバナーをクリックするとカテゴリーランキングに飛び、当ブログのランキングが上がります。

にほんブログ村 海外生活ブログへ  にほんブログ村 ライフスタイルブログへ  にほんブログ村 ライフスタイルブログ ミニマリストへ


こんにちは、くみです。
はてなブログスマートフォン版にグローバルナビを付けてみました。

Global_Navi_01


カテゴリの準備

今のメインのカテゴリって移動ぐらしなんですけど、はてなブログはカテゴリの階層化ができないので『移動ぐらし』というものに飛ばすことができないんですよねえ。
なので、『移動ぐらしカテゴリ』をまとめた記事をひとつ作ることにしました。


移動ぐらし関連記事 – @kum_i log

URL、NomadlifeにしちゃったけどNomadic Lifeではないのか。まあいいや。

他の『英語』と『国際交流』は独立したカテゴリなので、面倒だし直接飛ばすことに。
並列で挙動が違うのはユーザの混乱を招くかなとは思ったんですが、面倒だったので…

CSSとHTMLでスマートフォン版にグローバルナビをつける

スマートフォン版のヘッダをいじるので、要Proアカウントです。
以下のサイトを参考にしました。


はてなブログのスマホ表示にグローバルナビゲーションを設置する – AIUEO Lab2

最初、こんな感じで左に空間が出現したんですが↓

Global_Navi_02

ulにpadding-left:0px;を設定する事で空間をなくすことができました。

 

カテゴリ選択と合わせてちょっと冗長に感じるかもしれないですけど、iOSからの閲覧多いですし、なるべくコンテンツに気付いてもらえるようにしたいな〜。

 

はてなブログカスタマイズ関連記事








ブログ村を再開してみました。
下のバナーをクリックするとカテゴリーランキングに飛び、当ブログのランキングが上がります。

にほんブログ村 海外生活ブログへ  にほんブログ村 ライフスタイルブログへ  にほんブログ村 ライフスタイルブログ ミニマリストへ