DIT恐竜研究室

小学生ブロガー、DIT井上の日常と恐竜についてのブログです

MENU

はてなカスタマイズ解説記事:ヘッダのカスタマイズ グローバルメニュー

こんにちは!DIT井上です!昨日は、思わず爆発させてしまいましたが、

収まってきたので、楽しい記事を書こうと思います。ずっと怒ってたり、

悲しんでばかりじゃあ、その方も悲しむと思うので、気持ちを入れ替えて、

やっていきます!!

ditinoue.hateblo.jp

 
■今日の記事は・・・■
ヘッダのグローバルメニューについて解説しようと思います!

グローバルメニューとは

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

カスタマイズしようと思います。僕のブログのヘッダには、下のような

ものがあるでしょ?下のブログ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'>1個目の項目</a></li>
<li><a href='url'>2個目の項目</a></li>
<li><a href='url'>3個目の項目</a></li>
<li><a href='url'>4個目の項目</a></li>
<li><a href='url'>5個目の項目</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

これで、グローバルメニューの完成です!!👏

もう一つの使い道

このグローバルメニューは、フッターにも貼れます。デザインの

フッターに、先程、ヘッダーに貼ったHTMLと同じものを貼ってください。

CSSをもう一度貼るのはしなくていいです。もうすでにいくつかある場合は、

一番上に貼ってください。完成は、以下のようになります。

f:id:ditinoue:20210908190740p:plain

最後に

今回は、グローバルメニューの設置方法について解説しました!ブログの

回遊率が上がるので、ぜひ試してみてください!この記事は、はてなブロガーの

れどさんのものをもとにしました。

redo5151.hatenablog.com

れどさん、ありがとうございました!それでは、今日はこのへんで!