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

としやの Blog

単なる日記です。子どもたちが大きくなったら読み返す予定。

はてなブログ(PC版)にグローバルメニューをつけてみました

スポンサーリンク

以前からやりたいなぁと思ってたことの1つ。

ブログの記事上(タイトルの下)にグローバルメニューをつけてみました。(PC表示のみです)

はてなブログ標準であるサイドバーのカテゴリーもありますが、記事上のわかりやすい位置にメニューがあると他の記事も見つけやすいと思いますし、他の方のブログを見てる時、自分でもよく使っていました。

うちは記事数だと圧倒的に日記が多いですが、検索で来られる方は日記じゃない記事へのアクセスがほとんどだし、せっかくなので埋もれがちな過去記事も見てもらえたら嬉しいなとも思います。

f:id:fakeplastictrees:20150121221928j:plain

僕の環境(Win8.1:ChromeIEipad2)では表示できていますが、大丈夫でしょうか。

 

まだ完全とは言えないけど、参考になるかもしれないので、メモしておきます。

 

まずは、次のキーワードでググりました。

「グローバルメニュー はてなブログ

そこから http://cssmenumaker.com/ にたどりつきましたが、以前は無料だった(らしい)サービスが有料(14$/年)に変わっていました。

 

CSS MenuMaker | HTML, CSS, & jQuery Menus

試しに作業してみましたが、作ったリストのHTMLまではコピーできますが、CSSや画像のダウンロード以降が有料でした。

かなりいい感じのサービスですが、今回は違う方法にしました。(諦めました)

 

結局、参考にさせてもらったのはこちらです。

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

ここだとCSSだけで、メニュー>>子メニュー>>孫メニュー>>ひ孫メニューと多階層でメニューが作れました。

f:id:fakeplastictrees:20150121224547j:plain

僕のブログでは、今のところ孫メニューまでにしました。

上記の記事を参考に、リストのHTML部分とCSS部分をテキストエディタで修正しました。

f:id:fakeplastictrees:20150121224645j:plain

はてなブログの「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にリストのHTMLのソースを”貼り付け”しました。

f:id:fakeplastictrees:20150121224634j:plain

はてなブログの「デザイン」→「カスタマイズ」→「デザインCSS」にCSSのソースを”貼り付け”しました。

CSS自体の知識が全然無い状態でしたが、何度かプレビューを繰り返しながら、見られる状態にマージンや色を調整しました。(時間があればちゃんとCSSも覚えたいのですが。。)

 

今ではアクセスの半分以上はスマホからです。
なのでスマホ版のグローバルメニューも付けたほうがいいのでしょうが、タイトル下へのHTML記述は「はてなブログPro」でないとできません。
そろそろこれはProにする頃合いかなぁ。