本棚にねこまんま

本棚にねこまんま

ねこ と ごはん

【カスタマイズ】階層式メニューバーの設置方法【グローバルナビゲーション】

まる一日PCとにらめっこしながらやっとメニューバーを設置できたのでまとめていきます。
TOP画像を変更したついでにちょちょっと変えようかなってぐらい軽い気持ちだったんですが、まさかこんなに四苦八苦することになるとは…!
というわけで今回は、CSS?HTML?なにそれ美味しいの?な素人がメニューバーを設置するまでのお話です。

カテゴリーを階層化していることが前提になりますので、まだの方はパンくずリストの設定から始めましょう。

bulldra.hatenablog.com

blog.wackwack.net

どんなメニューバーが作りたいのかイメージする

ざっくりと自分の書いた記事をカテゴリー分けしていきます。紙にでもエクセルにでも。
他の人のブログを参考にするとイメージを固めやすいですね。

(例)
f:id:hondananinekomanma:20170305235123p:plain

パンくずリスト設定時にカテゴリー分けはしているかと思いますので、イメージに合わせて修正が必要があれば見直しましょう。

カテゴリー分けの修正はこちらの記事を参考にどうぞ。

www.nubatamanon.com


多階層を前提で書きすすめてまいりましたが、メニューバーのカテゴリーが親カテゴリーのみで済むようであればこちらの記事がおすすめです。
maroom.hateblo.jp


有料サイトでメニューバーを作成する場合

[はてなブログのトップにナビゲーション(カテゴリ)メニューを作る!【カスタマイズ】 - すりゴマ・ドットコム]

初めはこちらの記事を参考に「CSS MENU MAKER」という海外サイトで作成しようとしていたのですが、こちら今は有料となっております。
一通り作成してから有料に気づきましたからね。
お金を払わないとCSS・HTMLタグのダウンロードができません。
とはいえ、すごく使いやすいので「有料でもいいからサクッと作りたい!」って人にはおすすめです。
メニューバーのイメージを固めるために試しに作ってみるのも有りだと思います。
個人的にはこれでメニューバーの完成イメージが明確に掴めたので結果オーライでした。

CSS MENU MAKERでつくったのがこちら。
これに近づくように作っていきます。

f:id:hondananinekomanma:20170305221944p:plain

メニューバーの作成

親カテゴリー ⇒ 子カテゴリー
weboook.blog22.fc2.com

親カテゴリー ⇒ 子カテゴリー ⇒ 孫カテゴリー以上
weboook.blog22.fc2.com


自分のイメージに従ってHTMLを編集していきます。
URLは1番最後に入力した方がやりやすいです。

HTMLは『デザイン→カスタマイズ→ヘッダ→タイトル下』に入力します。
入力後はこのように縦に表示されます。

f:id:hondananinekomanma:20170305224508p:plain


CSSは『デザイン→カスタマイズ→デザインCSS』に入力します。

f:id:hondananinekomanma:20170305224737p:plain

タイトル画像の下ががら空きになってしまうのでCSSのmarginの数値をいじります。

#dropmenu {
list-style-type: none;
width: 960px;
margin: 10px auto 10px;
padding: 0;
}

f:id:hondananinekomanma:20170305225316p:plain

メニューバーの色の変更

以下の部分をお好みの色に変更します。
色の参考にこちらのサイトをどうぞ。
WEB色見本 原色大辞典 - HTMLカラーコード


▼文字の色と親カテゴリーの背景色

#dropmenu li a {
display: block;
margin: 0;
padding: 16px 0;
background: #8a9b0f; 親カテゴリーの背景色
color: #fff; 文字の色
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;


▼子カテゴリーの背景色

#dropmenu li ul li a {
padding: 13px 15px;
background: #7c8c0e; 子カテゴリーの背景色
text-align: left;
font-size: 12px;
font-weight: normal;


▼親カテゴリー・子カテゴリーのマウスを乗せた時の背景色

#dropmenu > li:hover > a { background: #7c8c0e }親カテゴリーのマウスを乗せたときの背景色
#dropmenu > li:hover li:hover > a { background: #6e7c0c }子カテゴリーのマウスを乗せたときの背景色
#dropmenu li:hover > ul > li {
overflow: visible;
height: 38px;


▼孫カテゴリーの背景色

#dropmenu li ul li ul li a { background: #616d0b }孫カテゴリーの背景色
#dropmenu li:hover ul li ul li:hover > a { background: #535d09 }孫カテゴリーのマウスを乗せたときの背景色


~完成~
f:id:hondananinekomanma:20170305230404p:plain


CSSやHTMLの知識がないので時間がかかりましたが、おおむねイメージ通りに作れて満足です。
まだ記事数は30程度なのですが、これから増えていくことを考えると早めに手をうてて良かったです。

おまけ①メニューバーの表示にアイコンを使う

f:id:hondananinekomanma:20170305221944p
「CSS MENU MAKER」みたいにアイコンを表示させたい!と思い立ち、やってみました。
HTMLの親カテゴリー名の前後に表示させると良いかと。


方法1.はてなブログで使用できるアイコンを使う

shirokai.hatenablog.com

はてなさんのWEBフォントを使用するとこんな感じ。
f:id:hondananinekomanma:20170305231400p:plain
なかなか可愛いです。しかしアイコンのバリエーションは少々物足りないですね。



方法2.アイコンを探してくる

icon-rainbow.com

素材サイトからアイコンをお借りし、はてなフォトライブラリーにアイコン画像をアップします。通常のHatena Blogフォルダで構いません。
フォルダ横の編集をクリックします。

f:id:hondananinekomanma:20170305232045j

アイコン画像にチェックを入れ、ブログに貼り付けるからHTMLタグをコピーします。
<img src=" 画像URL .png">が画像を貼り付けるタグの部分になりますので、不必要な部分は削りましょう。

f:id:hondananinekomanma:20170305234011p:plain

上の画像タグをアイコンとして組み込んだものがこちら。
f:id:hondananinekomanma:20170305234039p:plain
文字色が白なので、画像加工ソフトでアイコンの色は白に加工してあります。
多少粗くなってしまいましたが、肉球が使えて満足。

おまけ②パンくずリストの位置

ひいい!こんなところにパンくずリストが出ている…!!

f:id:hondananinekomanma:20170305234539p:plain

メニューバーのHTMLの後に改行タグ
を挿入して解決しました。
メニューバーと記事との距離もこれで調節できそう。