こんにちは!DIT井上です!昨日は、思わず爆発させてしまいましたが、
収まってきたので、楽しい記事を書こうと思います。ずっと怒ってたり、
悲しんでばかりじゃあ、その方も悲しむと思うので、気持ちを入れ替えて、
やっていきます!!
グローバルメニューとは
今回は、ブログカスタマイズを解説したいと思います。初めは、ヘッダを
カスタマイズしようと思います。僕のブログのヘッダには、下のような
ものがあるでしょ?下のブログTOP、記事一覧、このブログのデータなどが
書いてあるところを、グローバルメニューと言います。
これ、結構色々使えます。僕は、リンクとして使ってます。結構多くの
人は、カテゴリーに使っているようです。今から、その説明をしていきます!
分かりやす~くお願いしま~す!
はいはい分かっていま~す!了解で~す!
それでは始めましょう!
HTML
まずは、 デザインから、 スパナマークをクリック。そして、ヘッダを
クリックして、画面を開けます。
そして、それの「タイトル下」というところに、下の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を貼り付けます。こうしないと、下のようになります。
これに、CSSを加えることによって、下のようになります。
これで、グローバルメニューの完成です!!👏
もう一つの使い道
このグローバルメニューは、フッターにも貼れます。デザインの
フッターに、先程、ヘッダーに貼ったHTMLと同じものを貼ってください。
CSSをもう一度貼るのはしなくていいです。もうすでにいくつかある場合は、
一番上に貼ってください。完成は、以下のようになります。
最後に
今回は、グローバルメニューの設置方法について解説しました!ブログの
回遊率が上がるので、ぜひ試してみてください!この記事は、はてなブロガーの
れどさんのものをもとにしました。
れどさん、ありがとうございました!それでは、今日はこのへんで!