【自分用備忘録】はてなブログ(無料版)でのグローバルメニューの設定

皆さん、こんにちは(^▽^)/

今回もキャンプと特に関係ありません(こらこら。。。)

不定期に記事を書いているのもあり、記事数の増加ペースがすんごい遅いのですが、さすがに数十記事になってきたので、トップページ(ヘッダー)にメニュー表示をしてみようかと思いつきました。はい、思い付きです(-_-;)　他の方のブログを見ていた時、このメニューとかいいなぁって思って調べてみたら、コードを色々と交換してくださっていたので、試してみました。

f:id:qoo5_camp:20210314104450p:plain

このヘッダー画像の下にあるメニュー(完成形)です。グローバルメニューと言うそうなのですが、設置方法を色々とネットで漁っているときに名前は知りました(^_^;)　今回はこれの設定方法を書いておきたいと思います。

※ここらへんの設定は、Yukihy Lifeさんの記事を参考にさせてもらいました。本当にありがとうございました。

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life

ちなみにYukihyさんのブログにも書かれていますが、ブラウザサイズのW寸法が狭くなれば、自動的にトグルメニューに代わるようなコードです。(すげー)

f:id:qoo5_camp:20210314110456p:plain

では、早速作業開始！

HTMLコード

ブログ内のデザイン＞スパナアイコン＞ヘッダ＞タイトル下　の部分にコードを書いていきます。(というか大半コピペですm(__)m)

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='url'>TOP</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>
</div>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

ここで、前半部分にある「url１」「カテゴリ１」などの部分を表示したいメニュー項目に変更してきます。

→urlは"https://〇〇〇.hatenablog.com/archive/category/□□□　みたいな形式になります。カテゴリー表示されている部分のリンクをコピーしたら貼り付け可能。

項目数を増やす場合は行ごと増やす形です。私の場合は、記事数が5つ以上あるカテゴリのみ載せるようにしました。本当は子カテゴリ作ってプルダウンするようなものにもできるみたいなのですが、そこらのカスタマイズは後日おいおいやろうかと思います。

デザインCSSコード

ブログ内のダッシュボード＞デザイン＞スパナアイコン＞｛｝デザインCSS　の部分にコードを入れます。(こちらもコピペさせてもらいましたm(__)m)

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}

.menu-toggle{
display: none;
}

/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}

/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;

}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}

これで完了です！実際に動くか動作確認して問題なければOK！

コピペさせてもらう側は本当に簡単にできてしまいます。自分でこういうのを作ることができる方は尊敬ですよね。コピペだけだと発展性もなく、細かいカスタマイズが自分でできないので、自分でも中身を理解すべきなのですが、位置やサイズ・色などの部分ぐらいしか理解できない(^_^;)　重ねて先人の方々に感謝ですね！