うさぼうの人生ダッシュボード化計画

仕事や家族との生活、読書や体験から考えたことを書き綴り、人生をゲームのように楽しむヒントを発信中

はてなブログにナビゲーションバー(カテゴリ)を設置

うさぼう(@usabo_tweet)です。

当ブログもヘッダーにナビゲーションバーを設置できる日が来ました。

 

ナビゲーションバーとは

ブログ上部に常に表示されているメニューバーのことです。マウスカーソルをあてるとサブメニューが表示されます。サイドバーにもカテゴリはありますが、下までスクロールしなくてよいので目につきやすく、移動しやすいです。

f:id:usabo:20161018161908j:plain

設置手順

  1. メニュー構成を決める
  2. HTMLとCSSソースコードを作成
  3. HTMLソースコードを「タイトル下」に設置
  4. CSSソースコードを「デザインCSS」に設置

詳細は以下の参考記事をご覧ください。

 

メニュー構成は2.の手順の中で試行錯誤するのもお勧めです。3.と4.ははてなブログのデザイン>カスタマイズ画面でできます。

参考にした記事

はてなブログでどんなカスタマイズができるかは以下記事が参考になります。

hacogaki.hatenablog.com

▼ナビゲーションバー(グローバルナビゲーション)のメニューを作る方法はすりゴマ・ドットコムさんの記事を参考にしました。

ground-sesame.hatenablog.jp

CSSになじみのない私にも、

CSS MenuMaker | Drop Down Menu Generator

というサイトで簡単に生成してくれるので助かりました。スクリプトを保存したりダウンロードするには19$かかりますが、迷わず課金しました。

ところがまだ課題が・・(→10/19解決!)

せっかく設置したメニューですが、右側のメニューが記事に隠れてしまいます。試行錯誤していますが、解決策のわかる方は教えて頂けると嬉しいです!

→トツオさん(@iTotuo)に教えて頂きました。しかるべき場所にz-index:1を指定したことで無事表示されるようになりました。トツオさん、ありがとうございます!

 

定期購読のお願い

最後まで読んで頂きありがとうございました。よければシェアお願いします。

また、定期購読も心待ちにしています。うさぼう(@usabo_tweet)でした。

follow us in feedly