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

すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。2歳児の子育てにも奮闘中。

はてなブログにグローバルナビを実装!ドロップダウンでカテゴリをすっきり整理

ブログカスタマイズ

DSC_7109

久しぶりのブログカスタマイズ。ヘッダーにグローバルナビを実装しました。カテゴリが増えすぎていたこともあって、サイドバーが汚くなっていたのをどうにかしたいと思っていたのですが、なかなかまとまった時間がとれず放置していました。

ようやくやる気が沸いてきて一気に仕上げたのですが、想像以上に大変でした。。(グローバルナビはパソコンからご覧いただいたときしか表示されません)

複数のブログで紹介されていたCSSメニューメーカーがうまく使えない

「はてなブログ グローバルナビ」などのワードで検索してみたところ、多くのサイトで紹介されていたのがCSSメニューメーカというサイト。

CSS MenuMaker | HTML, CSS, & jQuery Menus

これは便利じゃないか!と思って早速使ってみたんですが、CSSのダウンロードができない!HTMLはコピーができるんですが、それだけじゃほとんど意味が無い。。

CSSダウンロードしようとしたら14ドル払えって画面が出てくるんですけど。。無料期間が終了してしまったんだろうか。まともに英語が読めないゆえに、私のやり方が間違っているのかどうかも判断がつかない。。

ちゃんとTOEICの勉強続けないとなぁ。。で、またしてもGoogle先生に協力を仰ぎ、神のようなサイト(以下、神サイト)を発見しました。

CSSだけで作る「多階層」なドロップダウンメニュー|Webpark

こちらにグローバルナビを実装するためのすべてが記載されてありました。こうやってノウハウを無償で提供してくださる方々には頭が上がりません。ほんとありがとうございます。

作成したHTML

実際に打ち込んだHTMLがこちらです。作成済のカテゴリはすべて網羅できるようにしてみました。カテゴリページのURLを取得するのがめんどくさかった・・・

<ul id='dropmenu'>
  <li><a href='http://blog.sukecom.net/'>ホーム</a></li>
  <li><a href='http://blog.sukecom.net/entry/2014/09/04/082127'>撮影機材</a>
    <ul>
      <li><a href='#'>Nikon</a>
        <ul>
          <li><a href='http://blog.sukecom.net/archive/category/Nikon D600 D610'>D600 D610</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/AF-S NIKKOR 85mm f/1.8G'>AF-S NIKKOR 85mm f/1.8G</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/AF-S Micro NIKKOR 60mm f/2.8G ED'>AF-S Micro NIKKOR 60mm f/2.8G ED</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/AF-S NIKKOR 35mm f/1.8G ED'>AF-S NIKKOR 35mm f/1.8G ED</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/TAMRON SP AF 28-75mm f/2.8 A09'>TAMRON SP AF 28-75mm f/2.8 A09</a></li>
        </ul>
      <li><a href='#'>m4/3</a>
        <ul>
          <li><a href='http://blog.sukecom.net/archive/category/LUMIX GX1'>LUMIX GX1</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/LEICA DG SUMMILUX 25mm/F1.4'>LEICA DG SUMMILUX 25mm/F1.4</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/LUMIX G 14mm/F2.5 ASPH'>LUMIX G 14mm/F2.5 ASPH</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/LUMIX G VARIO 14-140mm F3.5-5.6'>LUMIX G VARIO 14-140mm F3.5-5.6</a></li>
        </ul>
      </li>
      <li><a href='http://blog.sukecom.net/archive/category/ストロボ'>ストロボ</a></li>
      <li><a href='http://blog.sukecom.net/archive/category/カメラバッグ'>カメラバッグ</a></li>
    </ul>
  </li>
  <li><a href='#'>写真</a>
    <ul>
      <li><a href='http://blog.sukecom.net/archive/category/カメラバッグ'></a></li>
      <li><a href="http://blog.sukecom.net/archive/category/ポートレート">ポートレート</a></li>
      <li><a href='http://blog.sukecom.net/archive/category/イルミネーション'>イルミネーション</a></li>
      <li><a href='#'>その他</a>
        <ul>
          <li><a href='http://blog.sukecom.net/archive/category/モノクロ'>モノクロ</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/動物'>動物</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/寺・神社'>寺・神社</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/鉄道'>鉄道</a></li>
          <li><a href="http://blog.sukecom.net/archive/category/ダンボー">ダンボー</a></li>
          <li><a href="http://blog.sukecom.net/archive/category/ワンフェス">ワンフェス</a></li>
          <li><a href='http://blog.sukecom.net/archive/category/HDR合成'>HDR合成</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href='http://blog.sukecom.net/archive/category/ライフログ'>ライフログ</a>
    <ul>
      <li><a href='http://blog.sukecom.net/archive/category/グルメ'>グルメ</a></li>
      <li><a href='http://blog.sukecom.net/archive/category/旅行'>旅行</a></li>
      <li><a href="http://blog.sukecom.net/archive/category/イラスト">イラスト</a></li>
      <li><a href='http://blog.sukecom.net/archive/category/欲しいもの'>欲しいもの</a></li>
      <li><a href='http://blog.sukecom.net/archive/category/ブログカスタマイズ'>ブログカスタマイズ</a>
        <ul>
          <li><a href="http://blog.sukecom.net/archive/category/Googleペナルティ">Googleペナルティ</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href='http://blog.sukecom.net/archive/category/レビュー'>レビュー</a></li>
  <li><a href='http://blog.sukecom.net/archive/category/子育て'>子育て</a></li>
  <li><a href='http://blog.sukecom.net/entry/2013/09/20/222601'>プロフィール</a>
    <ul>
      <li><a href="http://blog.sukecom.net/entry/2013/11/10/100237">運営ポリシー</a></li>
    </ul>
  </li>
  <li><a href='http://blog.sukecom.net/entry/2013/10/17/204256'>コンタクト</a>
    <ul>
      <li><a href='http://blog.sukecom.net/entry/2013/10/10/223236'>モデル募集</a></li>
    </ul>
  </li>
</ul>

神サイトで公開されていたHTMLをコピーして編集しただけです。手間はかかるけど簡単。作成したHTMLは管理画面のデザイン編集ページ、「ヘッダ」の「タイトル下」の箇所に入れ込みます。

CSSも同時に編集しておかないと、見栄えが悪くなるので注意が必要かも。

f:id:sukecom:20141202233326p:plain

ナビの実装に合わせてなんとなく問い合わせページも設置。

過去記事をつぶしてGoogleフォームを挿入しただけ。コメント欄にサービス紹介の書き込みをされたことが複数回あったので、何か用があればここから連絡をくれと。滅多に無いのはわかってるんですけど、一応。。

CSSの導入

CSSはこんな感じ。これまた神サイトで公開されていたCSSを少し修正しただけ。管理画面のデザイン編集ページで「デザインCSS」に入れ込んでます。

/* グローバルナビ */
#dropmenu {
	list-style-type: none;
	width: 100%;
	height: 35px;
	margin: 35px 0;
	padding: 0;
}
#dropmenu li {
	position: relative;
	width: 12.5%;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#dropmenu li a {
	display: block;
	margin: 0;
	padding: 10px 0;
	background: #999999;
	color: #fff;
	font-size: 80%;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
}
#dropmenu li ul {
	list-style: none;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}
#dropmenu li ul li {
	overflow: hidden;
	width: 100%;
	height: 0;
	color: #fff;
	transition: .5s;
}
#dropmenu li ul li a {
	padding: 12px 15px;
	background: #909090;
	text-align: left;
	font-size: 60%;
	font-weight: normal;
}
#dropmenu > li:hover > a {
	background: #ff3399
}
#dropmenu > li:hover li:hover > a {
	background: #ff3399
}
#dropmenu li:hover > ul > li {
	overflow: visible;
	height: 35px;
}
#dropmenu li ul li ul {
	top: 0;
	left: 100%;
}
#dropmenu li:last-child ul li ul {
	left: -100%;
	width: 100%;
}
#dropmenu li ul li ul li a {
	font-size: 50%;
	background: #818181
}
#dropmenu li:hover ul li ul li:hover > a {
	background: #ff3399
}
#dropmenu li ul li ul:before {
	position: absolute;
	content: "";
	top: 13px;
	left: -20px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left-color: #454e08;
}
#dropmenu li:last-child ul li ul:before {
	position: absolute;
	content: "";
	top: 13px;
	left: 200%;
	margin-left: -20px;
	border: 5px solid transparent;
	border-right-color: #454e08;
}

これで完成です。グローバルナビの横幅を100%指定(1020px)で、各メニューの横幅はそれぞれ12.5%で均等になるように指定しています。100/8の計算をするためにエクセルを立ち上げた自分が恥ずかしい。

marginやpaddingはヘッダーのデザインに合わせて微調整、グローバルナビの背景色もブログで使用しているメインカラーと合わせています。神サイトのおかげでちょちょいのちょいです。

スマホ版のグローバルナビはどうする

スマホから当ブログをご覧いただいた場合、グローバルナビは表示されません。スマホ版のグローバルナビはいらないかな・・・どうしようかな・・・

そもそもブログの方向性が統一されておらず、カテゴリが増えすぎたことが原因。PC版と同じようなグローバルナビをスマホ版でも実装するのが現実的ではなさそう・・・やっぱりやめておこう。

サイドバーを整理、カテゴリ表示は削除

グローバルナビで全カテゴリを網羅できたので、サイドバーに表示していたカテゴリ一覧は削除しました。実際、サイドバーのカテゴリがクリックされることって少ないような気がする。グローバルナビで多少は見やすくなったんじゃないかと思うので、直帰率が少しでも下げれたら嬉しい。

サイドバーはすっきりできたけど、今度はフッターをどうしよう。これまでフッターもほったらかしてきたけど、テキストのサイトマップを載せるなり、色々やれることはありそう。でもこれもまた手間がかかるなぁ・・

とりあえずAmazonのバナーリンクをはっつけてみたものの、恐ろしく見栄えが悪い・・・早いとこ何とかしようと思います。

ブログにグローバルナビは必要か

f:id:sukecom:20141203202053p:plain

実装して改めて考えてみたんですが、ブログにグローバルナビは必要だろうか。自分自身、いろんなブログを拝見しているけど、サイドバーやグローバルナビから別のカテゴリ、別の記事を見ることって少ない。一つの記事を見て終わりってことがほとんど。

サイドバーがごちゃごちゃと長くなるのはすげー微妙だと思うので、グローバルナビを実装してみたものの、しばらく様子を見てみてやっぱり元に戻すかも。。

神サイトで紹介されていたものをコピペして貼り付けただけですが、はてなブログでグローバルナビの実装を考えている方がいらっしゃれば参考になれば幸いです。