【ブログカスタマイズ】グローバルメニューを設置してみよう

こんにちは！DIT井上です！

今日は、メインブログからの転載で、はてなブログのカスタマイズについて書きます！

それではどうぞ！

今日の記事はこんな方にオススメ！

☑はてなブログのカスタマイズをしたい方

☑アクセスが上がらない方

☑カスタマイズ好きの方

グローバルメニューとは
カスタマイズ開始！
- HTML
- CSS
- アレンジ
さいごに

■今日の記事は・・・■

グローバルメニューを設置する方法についての記事です！

グローバルメニューとは

カスタマイズの方法を書く前に、まずはグローバルメニューとは何なのか、書こうと思います！

今回は、ブログカスタマイズを解説したいと思います。

初めは、ヘッダをカスタマイズしようと思います。僕のブログのヘッダには、下のようなものがあるでしょ？下のブログTOP、記事一覧、このブログのデータなどが書いてあるところを、グローバルメニューと言います。

f:id:ditinoue:20210908180659p:plain

これ、結構色々使えます。僕は、リンクとして使ってます。結構多くの人は、カテゴリーに使っているようですが……。さて、というわけで今から、その説明をしていきます！

分かりやす～くお願いしま～す！

はいはい分かっていま～す！了解で～す！

カスタマイズ開始！

それでは、カスタマイズして行っちゃいましょう！

HTML

まずは、デザインから、スパナマークをクリック。そして、ヘッダを

クリックして、画面を開けます。

f:id:ditinoue:20210908183616p:plain

そして、それの「タイトル下」というところに、下のHTMLを貼り付けます。

<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>
<li><a href='url'>５個目の項目</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.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、〇個目の項目のところに、

表示させたい名前を書きます。僕は、リンクにして、TOP、記事一覧、

ブログのデータ、プロフィール、人力検索、カクヨムにしました。

項目のところは、コピーして、次のところに貼れば、増やせます。ただ、

増やしすぎるとだめです。なぜだめなのかは、実際にやってみればわかると思います。

よし、これで完成だね！

いや、もう一つ、やってもらうことがあります。

CSS

次に、デザインCSSに、CSSを貼り付けます。こうしないと、下のようになります。

f:id:ditinoue:20210908185600p:plain

これに、CSSを加えることによって、下のようになります。

f:id:ditinoue:20210908185919p:plain

さて、そのCSSがコチラ☟

#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;
}
}