ブログ

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

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

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

ついてきたー!

 

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

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

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>

というスクリプトの//ヘッダの高さの数値の所を自分のメニューの高さに変えて下さい。(私の場合は50pxだったので50と入力してます)

参考サイト
jQuery とっても簡単、ページ内リンクでスムーズスクロール | 福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい | Tips Note by TAM

これで正しい位置までスクロールするようになりました。
f:id:ok723:20160126115735g:plain

内部リンクも被る事なく、ヘッダーに固定メニューが設置出来たんですが、ひとつだけ気になるとしたら横幅がコンテンツ+サイドバーより小さいとメニューだと見た目がちょっと微妙かも。

f:id:ok723:20160126123024g:plain

こんな感じ。
出来れば画面横幅に合わせた(width:100%;)デザインのメニューに変えるか、コンテンツとサイドバーの横幅に合わせたサイズにすると綺麗な見栄えになると思います。

まとめ

初めてカスタマイズ記事書いてみました〜!はじめはなかなかうまく動かなかったりするかもしれないけど、リンク先ページを参考にしながらコピペしていくと確実に作動するようになると思います。私でも出来たので、ぜひぜひチャレンジしてみてください。

 

▼こちらの記事もよく読まれてます

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUT ME
たっつん
たっつん
イラストレーター
元々、職歴も貯金も恋人もいないフリーターから、ブログをきっかけにフリーランスに転身。 そして、気づいたら一度は諦めたイラストレーターにちゃっかりなってました。 夢だった書籍イラストのお仕事をしています。
Recommend
こんな記事も読まれています!
記事URLをコピーしました