2016.01.26 2018.08.06

【はてなブログ】スクロールするとヘッダーに固定されるグローバルメニューの作り方

たっつん/イラストレーター

f:id:ok723:20160129110026p:plain
デザインが苦手なはてなブロガーさん「ブログのグローバルナビゲーションを上に固定させるデザインにしたい…でもどうやるの？」

この記事のやり方を読んで、タグをコピペでデザイン完成できますよ！

ども、WEBデザイナーのたっつん（@tatsuun7）です。

ということで、今回は

「はてなブログで固定されるグローバルメニューの作り方」

を紹介していきます。

回遊率をあげるために、グローバルメニューを固定させたい
固定グローバルメニュー設置
ページ内リンクのずれを解消
まとめ

この記事の目次

回遊率をあげるために、グローバルメニューを固定させたい
固定グローバルメニュー設置
ページ内リンクのずれを解消
まとめ

回遊率をあげるために、グローバルメニューを固定させたい

ヘッダー部分にメニューつけてるブログをよく読むんですが、本文が長文になって下にスクロールしていくと、ヘッダーが隠れてグローバルメニューが表示されなくなるんですよね…

トップ戻るボタンで戻るのも良いんだけど、出来るだけ無駄なクリック数減らしつつ、沢山のページを見てもらえる仕様にしたい…

という事で試行錯誤しながら普通のグローバルメニューを「固定グローバルメニュー」に変えてみましたー！

ちなみに今のメニューはゆきひーさんが作ったお洒落メニューをベースとして使用させていただいてます！
いつもありがとうございます〜

www.yukihy.com

固定グローバルメニュー設置

まずは、新たに固定メニューを設置する場合からです。この場合は以下のサイト通りにコピーしていくと簡単に固定されるメニューが出来上がります。

参考サイト
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery – ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
jQueryでスクロールすると表示する系いろいろ | webOpixel

※カスタマイズを行う際は必ずバックアップ取ってから作業して下さい。

スクリプトの読み込み

jQueryがない場合はまず以下を読み込ませて下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQueryを読み込んだら、以下のスクリプトをコピーします。

<script>
$(function() {
var nav = $('.nav');
//表示位置
var navTop = nav.offset().top+500;
//ナビゲーションの高さ（シャドウの分だけ足してます）
var navHeight = nav.height()+10;
var showFlag = false;
nav.css('top', -navHeight+'px');
//ナビゲーションの位置まできたら表示
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
if (showFlag == false) {
showFlag = true;
nav
.addClass('fixed')
.stop().animate({'top' : '0px'}, 200);
}
} else if (winTop <= navTop) {
if (showFlag) {
showFlag = false;
nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
nav.removeClass('fixed');
});
}
}
});
});
</script>

これをデザイン→ヘッダー→タイトル下へペーストしてください。

メニュー本体部分のhtmlを記入

<div class="nav">
<ul class="clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">LINK</a></li>
</ul>
<!-- /#nav --></div>

次に本体部分のhtmlの記入。これも同じくヘッダーのタイトル下へコピペして下さい。

最後にcssを入力

.nav {
padding: 0 20px;
margin: 0 auto 60px;
width: 760px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

最後にcssに上記をコピペ。

これでスクロールするとついてくる固定グローバルメニューになると思いますー
f:id:ok723:20160126114019g:plain

ついてきたー！

既に設置しているものを固定にしたい場合

新たに作るのではなく、今使っているグローバルメニューを固定メニューにしたい場合はスクリプト２行目の

var nav = $(‘.nav‘);

の.navの部分を自分のメニューid名やclass名に変えれば固定されると思います！

例えばメニューのhtmlが

<div id="menu" class="nav">
<ul class="clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">LINK</a></li>
</ul>
<!-- /#nav --></div>

だったら

var nav = $(‘#menu‘);

と記入してください。

※idの場合は#を、classの場合は.を忘れずに！

ページ内リンクのずれを解消

これで固定されるようにはなったんですが、実はまだ最後にすることがあります。

グローバルメニューを固定にした分、ページ内リンクの位置にズレが起きました。
f:id:ok723:20160126115603g:plain

なので、固定したメニューの高さ分、ズレを修正する必要があります。

下のスムーズスクリプトを読み込んで以下の点を修正します。

<!-- ページ内リンクスクロール部分の記述 -->
<script>
$(function(){
var headerHight = 50; //ヘッダの高さ
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top-headerHight;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>