バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます！

ブログの始め方
ブログの収益化
記事の書き方
SEO・アクセスアップ
ブログ運営報告
HTML CSS デザイン
はてなブログ
サイトマップ
トップ > HTML-CSS-デザイン > 【レスポンシブ】固定グローバルナビゲーションの設置方法 | コピペで簡単！ブログのアクセスが倍増！

【レスポンシブ】固定グローバルナビゲーションの設置方法 | コピペで簡単！ブログのアクセスが倍増！

HTML-CSS-デザイン ブログ運営

※当ブログ内では商品広告やPRを行っております。

2019/02/05 - PCの画面上部に張り付くような「固定グローバルナビゲーション」のCSSとHTMLを公開しています。メニューを設置することでユーザーの利便性やPVのアップに！初心者の方でも分かるようにコードの簡単な解説も載せてますので参考にしてみてください。

また、当ブログは「はてなブログ」を利用していますが、基本的には他のブログサービスでもお使い頂けると思います。

コピペで簡単！
上部に張り付くグローバルナビゲーションのやり方★

 

 

グローバルナビゲーションとは？ 

グローバルナビゲーションとは、全てのページに共通したサイト上の案内バーのことです。（グローバルメニューやメニューバーなどと呼ばれることもあります）

例えば、当ページの↓↓これです。
（PCでご覧の方は当ページの上に表示されています）

f:id:zuboraca:20181013115512j:plain


グローバルメニューがあると、ユーザー（読者）はサイト内で迷子になることなく必要な情報にアクセスしやすくなります。

その結果、サイトのページビュー（回遊率）やユーザビリティ（使いやすさ）が向上し、アクセスアップにもつながりますし、SEO対策にも有効です。

通常はこんな風↓↓に、ヘッダーの下に付いていたりすることも多いのですが、これだと画面をスクロールすると見えなくなってしまいます。

f:id:zuboraca:20181013135930j:plain

 

今回こちらの記事では、画面をスクロールしても常にPCの画面のトップに表示される固定のナビゲーションバーの設置の仕方を紹介します。CSSのみで作動しているので、ページ表示が重くならずスムーズです。

画面上部に常に表示されていることで、ユーザーはいつでも情報にアクセスできるので更にアクセスアップになります！！


※なお、PCからのアクセスの時はPC用のメニューバーを、スマホからのアクセスにはスマホ用のメニューバーを表示させるやり方も記事の下の方に載せてます。

 

それでは、さっそく設置していきましょう♪♪

 

 

コピペするコードは２つ

 以下の２つのコードをコピペする必要があります。


・HTMLコード
・CSSコード

 
分からない場合は説明は飛ばして大丈夫です。
2つは、種類が異なるコードなのでコピペする場所だけ間違えないでくださいね^-^

【HTMLコード】とは？

Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略でWEBページの一つ一つの要素を作るコードです。＜p＞〜文章＜/p＞とか＜br＞改行など。

【CSSコード】とは？

Cascading Style Sheet（カスケーディング・スタイル・シート）の略で、このコードを使ってWEBページの全体の見た目や色などの「スタイル」を指定します。

 

グローバルメニューの例で言うと「HTMLコード」を使って、メニューの項目などを書いていき、「CSSコード」で「見た目」を整えるということです。

 

実際に見てみると良くわかります！
↓↓

 

HTMLだけだと...

f:id:zuboraca:20181013152003p:plain

 ただの「箇条書き」になってしまいました！

 

CSSを書き加えるとこんな風に「見た目」を整えることができるんです。
（上と同じページです！）

f:id:zuboraca:20181013152044p:plain

※ちなみに、これは「はてなブログ」のデフォルトで使われている１カラム（１列）表示の「Life」というテーマを使っています。

 

 

 

まずはHTMLコードを見ていきましょう♪♪

コピペでOK！【HTMLコード 】

HTMLコードでは、先ほどの「箇条書き」の中身を作成していきます。
コードは２タイプ用意しています。
１階層と２階層です。

１階層は、単純にメニューが横に並んでいて、クリックするとその先に飛ぶメニューのことです。（すみません、１階層という言い方が正式なのか分かりません。あくまでも分かりやすいように私が名付けたものなので他の人に言っても通じないかも...）

↓↓普通のコレです。

f:id:zuboraca:20181013153544p:plain

 

２階層は、ドロップダウンメニューと言って、マウスオーバーすると下に新たに項目が出てくるヤツです。（ドロップダウンメニューは私が考えた語句ではなく、他の人にも通用する言葉ですので、どんどん使って大丈夫！）

↓↓これね！

f:id:zuboraca:20181013153735p:plain

１階層も２階層も基本的には同じコードなのですが、分かりやすく別々に記載しておきますので、お好きな方をコピペして下さい(^-^)v

 

1階層メニューの【HTMLコード】

<!-- global navigation menu page top -->

<ul class="navi-top">
   <li><a href="LINK">home</a></li>
   <li><a href="LINK">menu01</a></li>
   <li><a href="LINK">menu02</a></li>
   <li><a href="LINK">menu03</a></li>
   <li><a href="LINK">menu04</a></li>
   <li><a href="LINK">menu05</a></li>   
</ul>

上記の"LINK"の部分をリンクしたいURLに書き換えます。
※リンク先は、それぞれカテゴリーのトップだったりお好きなページのURLを入れてくださいね(^-^)♪

"home"や"menu01~05"の部分は表示する「項目名」に変えて下さい。

 

2階層メニューの【HTMLコード】

<!-- global navigation menu page top -->

<ul class="navi-top">
   <li><a href="LINK">home</a></li>
   <li><a href="LINK">menu01</a>
      <ul>
         <li><a href="LINK">menu01-1</a></li>
         <li><a href="LINK">menu01-2</a></li>
      </ul>
   </li>
   <li><a href="LINK">menu02</a>
      <ul>
         <li><a href="LINK">menu02-1</a></li>
         <li><a href="LINK">menu02-2</a></li>
         <li><a href="LINK">menu02-3</a></li>
      </ul>
   </li>
   <li><a href="LINK">menu03</a>
　　　　<ul>
　　　　　　<li><a href="LINK">menu03-1</a></li>
　　　　　　<li><a href="LINK">menu03-2</a></li>
　　　　　　<li><a href="LINK">menu03-3</a></li>
　　　　　　<li><a href="LINK">menu03-4</a></li> 
　　　　</ul>
   </li>
   <li><a href="LINK">menu04</a></li>
   <li><a href="LINK">menu05</a></li> 
</ul>

上記の"LINK"の部分をリンクしたいURLに書き換えます。
※リンク先は、それぞれカテゴリーのトップだったりお好きなページのURLを入れてくださいね(^-^)♪

"home"や"menu01~05"の部分は表示する「項目名」に変えて下さい。


※薄い紫の表示にしている部分が２階層目になります。

2階層目がない場合は"home"や"menu04,05"のように何も書かなければ、その項目は１階層のみの表示になります。

2階層目は、必要に応じて、項目を追加したり削除したりしてください。
また、2階層目は、基本的には何項目でも追加可能ですが、デザインと利便性から見て、多くても4~5項目までが適当かと思います。

 

 

【HTMLコード】をコピペする場所

はてなブログの場合

HTMLコードをコピーする場所は、
デザイン→カスタマイズ→ヘッダ→タイトル下

f:id:zuboraca:20181014155729j:plain

 

 

次にCSSコードを見ていきましょう。

コピペでOK！【CSSコード】

CSSコードは１階層も２階層も同じで大丈夫です♪♪ 

/*==============================================
　global navigation bar (top)
================================================*/
ul.navi-top, ul.navi-top a {
        color:white;/*文字の色*/
        background-color:black;/*メニューバーの背景色*/}

ul.navi-top a:hover {
        color:white;/*マウスオーバーの時の文字の色*/
        background-color:grey;/*マウスオーバーの時の背景色*/}

ul.navi-top {
	position:fixed;
	left:0;
	top:0;
   	margin: 0;
   	padding:0;
	font-size:14px;
	width:100%;
	text-align:center;
	z-index:50;}/*重なり順*/

/*1階層目*/
ul.navi-top li {
	width: 125px;/*１階層目の幅*/
   	display: inline-block;
   	list-style-type: none;
   	position: relative;}

ul.navi-top a {
   	line-height: 36px;/*メニューバーの高さ*/
   	text-align: center;/*文字位置中央寄せ*/
	padding-left:10px;
   	text-decoration: none;
   	font-weight: nomarl;
   	display: block;}

/*２階層目*/
ul.navi-top ul {
       display: none;
       margin:0px;
       padding:0px; 
       position: absolute;}

ul.navi-top ul a{
       width:125px;/*２階層目の幅*/}
ul.navi-top li:hover ul {
       display: block;}


 

文字色、メニューバーの背景色、またマウスが重なった（マウスオーバー）の際の文字色、背景色、項目の幅などは、数値を変更してお使いいただけます♪♪

色は#から始まる６桁のコードでもOKです！
色辞典↓↓
WEB色見本 原色大辞典 - HTMLカラーコード

 

 【CSSコード】をコピペする場所

はてなブログの場合

 CSSコードをコピーする場所は
デザイン→カスタマイズ→{}デザインCSS

f:id:zuboraca:20181014155829j:plain

 ※注意※
元から書いてあるコードを消してはいけません！！
書いてあるコードの一番下に追加してくださいね。

 

アイコンを表示する場合

当ブログでは、メニューの項目の前にアイコンを表示しています。

 

↓↓ 統一して全ての項目の前に同じアイコンを表示する

f:id:zuboraca:20180815144315p:plain

 ↓↓ それぞれ項目ごとに違うアイコンを表示する

f:id:zuboraca:20180815144332p:plain

 

アイコンを表示する方法については、こちらをご覧ください。
↓↓

画面トップに固定のグローバルナビゲーション＠はてなブログテーマ「Palette（パレット）」

  

レスポンシブデザインのやり方
スマホの時はグローバルナビゲーションを表示しないようにする！

レスポンシブにしている場合、別途スマホの場合のグローバルメニューを表示し、スマホではこのメニューバー自体を表示しないよう設定をします。
スマホのメニューバーのやり方は→こちらをご覧ください。

 

/*スマホの時は上部グローバルメニューは表示しない*/
@media(max-width: 767px){
    .navi-top{display:none; }
}

 

コピペする場所は、先ほど説明した、【CSSコード】をコピペする場所と同じです。

 

 

上部固定メニューによるリンクのずれ解消のCSSコード

上部にメニューバーを表示することにより「もくじ」などからページ内のリンク先に飛ぶ際に上部がメニューバーで隠れてしまうのを防ぐための設定をします。
（目次やページ内のリンクを余り使わない場合は、これは設定しなくても大丈夫！）

こちらもCSSコードなので、先ほど説明した、【CSSコード】をコピペする場所にコピペして下さい。

/*スマホ以外*/
@media(min-width: 768px){

/*上部メニュー固定の時の内部リンクのズレ解消*/
@-webkit-keyframes modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
:target {
    -webkit-animation: modify 0.1s;
    animation: modify 0.1s;}
/*スマホ以外→終わり*/ }

参考：ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック - わたしと納豆ごはん

 

以上、本日は

画面上部に張り付く固定グローバルナビゲーションの設置方法

について紹介しました。

 

スマホ用のボトムナビゲーション

 

f:id:zuboraca:20181019222133j:plain

スマホ画面のボトムに固定のナビゲーションメニューのやり方はこちらの記事で説明しています♪♪

コピペでOK！スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP！

 

いちばんよくわかるHTML5＆CSS3デザインきちんと入門
【スマートフォン時代に求められる、最新のCSSとHTMLの実践的なテクニックが学べます。サンプルコードもたくさん載っていて解説も丁寧でわかりやすいです。】
Amazon
Kindle
楽天
Yahoo!

 

ブログのアクセスを増やすには？

 

今回のグローバルメニュー以外にもブログのアクセスを増やす方法をたくさん紹介しています♪♪

ブログのアクセスが余り増えなくて悩んでいる方はぜひ、こちらの記事も参考にしてみてください♡

６ヶ月間で14万PV達成！これまでに試したPVを増やす方法（１）検索順位を上げて検索流入を増やすには？ - Bambi's BLOG @ hatena

 

これまでに試したPVを増やす方法（２）検索流入の特性を知って「もくじ・見出し・強調文字」を上手く使おう！ - Bambi's BLOG @ hatena

 

【ずぼらブロガー必見！】SEO対策にもなって、読者も増えて、ブログのアクセスもアップ↑↑更にネタ切れにもならない★これまでに試したPVを増やす方法（３） - Bambi's BLOG @ hatena

 

 

この記事の概要

以前、はてなブログのオリジナルテーマ「Palette（パレット）」のカスタマイズ用にグローバルナビゲーションのやり方を書いたのですが、検索からのアクセスが多いので、他のテーマでも使えるようにCSSを公開することにしました♪♪

※基本的には、他のテーマやはてなブログ以外のサービスでも使えると思いますが、個別のCSSの質問などにはお答えしかねますので、ご了承くださいませ...^^;

 

★ちなみに★
シンプルで色々カスタマイズができる→はてなブログテーマ「Palette（パレット）」は、こちらからダウンロードできます♡
Palette （パレット） - テーマ ストア

 

また、集客UPやアフィリエイトにおすすめのブログサービス→「はてなブログ」をまだ始めていない方は、ぜひ、私の経験を書いた↓↓をご覧ください♪♪

【はてなブログをこれから始める方へ】
PRO化、独自ドメイン、収益化、後悔から学ぶこと

 

 

 

by Bambi
❤︎

f:id:zuboraca:20180525101258j:plain