【PC版グローバルメニュー】コピペOK CSSで簡単作成 - はてなブログ

【PC版】はてなブログでのグローバルメニュー設定方法

どうもTOM夫婦の旦那です！

今回は、我々が使っているグローバルメニュー（PC版）の設定の仕方を紹介します！

スマホ版は下記記事で紹介してます。

www.tomfamilyworld.com

というのも、これが本当に要因だったかは不明ですが、グローバルメニューを設置した後のGoogleアドセンス審査に合格したので、効果があるかも！？

Googleアドセンスに関する記事はこちらから↓

【アドセンス審査】グーグルアドセンスに3週間で合格した話 - TOM夫婦の世界の窓

1. そもそもグローバルメニューってなに？
2. 記述コードの紹介
- 2-1. htmlコード
  - 2-1-2. htmlコードをはてなブログに入力
- 2-2. CSSコード
  - 2-2-1. CSSコードをはてなブログに入力
3.最後に

1. そもそもグローバルメニューってなに？

言い方も色々あります。

・グローバルメニュー

・グローバルナビ／グローバルナビゲーション

・ナビゲーションメニュー

・ナビゲーションバー

サイト上部などにでているメニュー一覧みたいなものの事です。

このサイトでは下記がそれにあたります。

グローバルメニューPC例のイメージ

スマホ

グローバルメニュースマホ例のイメージ

ブログを訪れた方が、容易にブログ一覧にアクセスしたりするためのものですね。

あった方が見てくれる人に優しいです！

2. 記述コードの紹介

私は、下記の記事を参考に一部カスタマイズしています。

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

2-1. htmlコード


<!-- グローバルメニュー用html -->

<ul class="navi-top">

   <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名①</a>
   <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名②</a></li>
   <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名③</a></li>
   <!--グローバルメニュー③2段目設定（ここから）-->
　    <ul>
         <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名③-1</a></li>
         <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名③-2</a></li>
         <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名③-3</a></li>
      </ul>
   <!--グローバルメニュー③2段目設定（ここまで）-->
</li>
   <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名④</a></li>
   <li><a href="サイトURL"><i class="blogicon-アイコン名 lg" aria-hidden="true"></i>メニュー名⑤</a></li>

</ul>

それぞれ設定が必要なのは、下記のポイント

◆”サイトURL": 飛ばしたいサイトのURLを記載

◆アイコン名: 利用したいアイコンの名前（※1）

◆メニュー名: 表示したいメニュー名を記載

下記に当ブログの（例）もあるので参考にしてください。

※メニュー2段目を表示

当ブログ、グローバルメニューの Media上にカーソルを持っていてもらえるとイメージができるかと思います。

1段で十分な場合は削除していただければ、1段のみになります。

逆に、他にも2段目を設定した場合は、他の1段目配下に同じ記述をすれば実現可能です。

（例）当ブログの"Media"の例（2段メニュー設定）


<!--1段目設定-->
<li><a href="https://www.tomfamilyworld.com/media"><i class="blogicon-link lg" aria-hidden="true"></i> Media</a>
<!--2段目設定-->
      <ul>
         <li><a href="https://www.youtube.com/channel/UCk7025jLpoFgxg_YfqaP-2A"><i class="blogicon-youtube lg" aria-hidden="true"></i> Youtube</a></li>
         <li><a href="https://www.instagram.com/tomfamily_london/?hl=ja"> <i class="blogicon-instagram lg" aria-hidden="true"></i> instagram</a></li>
         <li><a href="https://twitter.com/tomfamilyworld"><i class="blogicon-twitter lg" aria-hidden="true"></i> Twitter</a></li>
      </ul>
<!--2段目設定ここまで-->
   </li>

（例）読者登録（グローバルメニューに設置したければ）

<li><a href="https://blog.hatena.ne.jp/はてなID/はてなID.hatenablog.com/subscribe" target="_blank"><i class="blogicon-hatenablog lg" aria-hidden="true"></i> 読者登録</a></li>

はてなID: ご自身のはてなIDを記載ください。

※1 はてなブログで使えるWebアイコン

はてなブログWebアイコンのイメージ

アイコン名は下記のリンクでチェック↓

はてなブログで使えるアイコンフォント（Webフォント）123種類 - FOXISM

2-1-2. htmlコードをはてなブログに入力

デザインをクリック

はてなブログデザイン設定のイメージ

カスタマイズ（工具マーク）>ヘッダをクリック

はてなブログヘッダ設定のイメージ

タイトル下のHTML記述枠にコードを貼り付け

はてなブログタイトル下設定のイメージ

2-2. CSSコード

/*グローバルメニュー用CSS*/

ul.navi-top, ul.navi-top a {
        color:white;/*文字の色*/
        background-color:lightcoral;;/*メニューバーの背景色*/}

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:16px;
	width:100%;
	text-align:center;
	z-index:50;}/*重なり順*/

/*1階層目*/
ul.navi-top li {
	width: 150px;/*１階層目の幅*/
   	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:150px;/*２階層目の幅*/}
ul.navi-top li:hover ul {
       display: block;}