mitopi はてなブログ版

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

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

スポンサードリンク

当ブログのグローバルメニューについて

私はこのブログのPC版のヘッダのところにグローバルメニューを設置しています。
以前、当ブログのこの記事で紹介した「スキナモノート」というサイトからお借りしたコードを利用しています。

www.sukinamonote.com

当ブログのグローバルメニューはもともと1行だった

設定した時からグローバルメニューのメニュー数が増えたら、どうしようかと考えていました。

なぜなら、元のHTMLとCSSをそのまま使った場合、1行に4つまでしかメニューが入らないからです。

5つ以上メニューを入れると、5つ目以降のメニューが枠からはみ出して表示されてしまいます。

f:id:EnjoyFreeApp:20170720204428p:plain

↑「ブログのコンセプト」っていうメニュー名のメニューだけはみ出てますよね?


でも、意外とこの弱点は簡単に解消できました。
今はこのようにメニューが5つあって2行で表示されていますよね?
(といっても、PCで見てる人じゃないと分からないですね…すみません)

f:id:EnjoyFreeApp:20170720203425p:plain

グローバルメニュー全体の縦幅が2倍になったため、背景全体も白くなっていて違和感ないと思います。


変えたのはCSSのたった一か所です。

CSSのどこを変えてグローバルメニューを2行にしたの?

当ブログのCSS

#globalmenu{
width: 100%;
margin: 0 auto 40px;
height: 118.5px;
padding: 0;
list-style-type: none;
background: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#globalmenu li{
position: relative;
float: left;
text-align: center;
width: 25%;
margin: 0;
padding: 0;
}
#globalmenu li a{
display: block;
margin: 0;
padding: 17px 0 20px;
color: #000;
font-size: 15px;
text-decoration: none;
}
#globalmenu li:hover > a{
background: #ccc;
color: #fff;
}
#globalmenu li ul{
position: absolute;
top: 100%;
color: #fff;
left: 0;
margin: 0;
padding: 0;
list-style: none;
z-index:10000;
}
#globalmenu li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
}
#globalmenu li ul li:hover > a{
background: #EDA47C;
color: #fff;
}
#globalmenu li:hover ul li{
overflow: hidden;
height: 40px;
border-bottom: 1px dotted #ffffff;
}
#globalmenu li ul li a{
font-size: 13px;
padding: 15px;
background: #ddd;
text-align: left;
}

上に貼り付けたコードの赤字にしてある部分です。

"height"って書かれた行ですね。

heightは英語で高さなので、なんとなくこれがタテ幅なんじゃないかなぁと思って実験してみたわけです。

もとのコードの値は50pxだったから、倍の100pxから順に調整していったところ、メニューの2行表示で一番しっくりきた値が118.5pxでした。
おそらく余白の都合で倍より大きめの値になるんでしょうね。

3行表示に変えたいときは、またheight(高さ)を168.5pxあたりから微調整していこうかなぁと思います。

一応ついでなので、当ブログのHTMLも下に載せておきます。感覚的にCSSだけのっけてるのが気持ちが悪いので…。
CSSは共通ですが、HTMLはサイトごとに青色の箇所を変える必要があります。

(ドロップダウンメニューはさらに<ul>と</ul>ではさみ込む必要があります。)

当ブログのHTML

<nav>
<ul id="globalmenu">
<li><a href="カテゴリURL">オシャレしたい!</a>
</li>
<li><a href="カテゴリURL">カスタマイズ・使い勝手向上</a>
<ul>
<li><a href="小カテゴリURL">はてなブログを使いこなす</a></li>
<li><a href="カテゴリURL">作業時短</a></li>
<li><a href="小カテゴリURL">iPhone</a></li>
</ul>
</li>
<li><a href="カテゴリURL">ヘルス&ビューティ</a>
<ul>
<li><a href="小カテゴリURL">目がピクピクする</a></a></li>
<li><a href="小カテゴリURL">菌活</a></li>
<li><a href="小カテゴリURL">甘酒</a></li>
<li><a href="小カテゴリURL">ヘアケア</a></li>
<li><a href="小カテゴリURL">エクササイズ</a></li>
</ul>
<li><a href="カテゴリURL">ホビー・クラフト</a>
</li>
<li><a href="カテゴリURL">ブログのコンセプト</a>
</li>
</ul>
</nav>

ついでにコードを記述する方法を紹介

はてなブログにコードってどうやって貼り付けるの?って内心思っていたので調べたら、

<pre><code>と</pre></code>ではさみ込んだ中の部分がコードとして認識されるらしいですね。

このブログではさらに引用タグ<blockquote>と</blockquote>ではさみ込んでますが。

今後もコードを記述する時はこのようにしようと思います。