びーきゅうらいふ!

 ホラー映画やアニメやゲームを好きに語る感想サイト。ネタバレ多め。

はてなブログ スマホ版にグローバルナビゲーションをつけてみました!~はてなブログ初心者のカスタマイズ奮闘記!

f:id:basiliskos:20151025210402j:plain

ども!comomoです!
以前
b9life.hatenablog.com
という記事で「このブログを読んでくださる方はiPhoneの方が凄く多い!」ということを書きました。
そして早急にスマホ版のカスタマイズをやらねばいかん!ということも・・・
そこで!
まだ初めて1ヶ月ちょいですが、皆々様のお力を借りてやってみました!カスタマイズを!!

グローバルナビゲーションを追加しました!

当ブログは私がガラケーしか持っていないためレスポンシブデザインではなく、PC版・スマホ版と別々にカスタマイズしています。

はてなブログのスマホ版のレイアウトデザインはすっきりしていて非常に見やすいのですが、ネックだったのがカテゴリ欄が無いということ。
記事のタイトルの下の「TOP>カテゴリ名」をクリックして頂ければいいのですが、どんなカテゴリがあるのかPC版のように一目で判るものが無い。
そこでブログタイトルの下に「ナビゲーションメニュー」を追加してみることに!
akiueo.hatenablog.com
こちらの記事を参考に、横幅がサイズによって自動で変わる「可変タイプ」のナビゲーションを作成。
設置は出来ました。
が、問題発生!
CSSもHTMLもほぼコピペして使っているのになぜか左端に謎の空白が出来てしまう!
横幅も「width: 100%」にしてるのに!
一体ナゼじゃぁぁぁ!!

・・・と延々と悩んでおりましたが、やはりはてなブロガーの方々は凄い!!
san3san.hatenablog.com
こちらの方の記事に左端の空白を無くす方法が書かれておりました!
『g_nav ul の欄に「padding: 0」を追加』
とのこと!

無事スマホ版のページにグローバルナビゲーションを入れる事が出来ました!
たった1行で直る事が解らないという・・・自分の圧倒的知識不足に愕然としますね・・・
(レスポンシブデザインでは無く、スマホ版を別にカスタマイズしていて、もし同じ症状?でお悩みの方がいらっしゃいましたら、上記の記事を一読してみることをオススメいたします!)

とはいえPCから閲覧してる方々には何のこっちゃという話なんですが。
(他にもPC版もパンくずリストだったりサブカテゴリの追加だったりソーシャルボタンだったりと色々やっているのですが、あとでまとめてご紹介させて頂こうかと思います)

次の目標は、スマホ版でサブカテゴリもきちんと表示できるドロップダウンメニューを作ること!(カーソルを合わせた時に下にずら~っとサブカテゴリの一覧がでるやつ!)

ただ、これが超難しい!
サブカテゴリの欄が下に潜り込んでしまって表示されない!!
まだぺーぺーの自分にはレベル高すぎました・・・

そもそも通常のブログすら、自分一人の力では出来ないことがたくさんあります。
既に色々な人の知恵や力をお借りして、ようやく拙いながらも人様に見せれるレベルになっているんですよね。

紹介させて頂いたお二方の記事、そしてはてなブログのカスタマイズ関連の記事をあげて下さっている方々、初心者でも何とかカスタマイズ出来るのは皆様のおかげです。本当に本当にありがとうございます!!
もっと勉強してパソコン版もスマホ版も見やすいブログに徐々にしていきたいと思います。

ほんっとぉ~にちょこっとずつですが日々改良していきますので、どうぞはてなブログ初心者の奮闘に今しばらくお付き合い頂ければ幸いです!