TOM夫婦の世界の窓

「世界」で挑戦し続ける夫婦のブログ~毎日更新~

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

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


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

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

 

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

www.tomfamilyworld.com 

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

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

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

 

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

言い方も色々あります。

・グローバルメニュー

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

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

・ナビゲーションバー

 

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

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

PC

グローバルメニュー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段目設定(ここから)-->

※メニュー2段目を表示

<!--グローバルメニュー③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;/*1階層目の幅*/
   	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;}

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

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

変更ポイントは、4ヶ所

◆ ul.navi-top, ul.navi-top a { color:white;/*文字の色*/

◆ background-color:lightcoral;;/*背景色*/}

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

◆ background-color:grey;/*マウスオーバーの時の背景色*/}

 

それぞれcolor: の後の文字を変えることでグローバルメニューの色を変更できます。

ブログ全体のカラーに合わせて、色をチョイスしてみましょう!

色のチョイスは下記のリンク!

WEB色見本 原色大辞典 - HTMLカラーコード

 

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

 デザインをクリック

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

カスタマイズ(工具マーク)>デザインCSSをクリック

デザインCSS記述枠にコード貼り付け

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

 

 3.最後に

いかがでしたでしょうか?うまく設定できましたでしょうか。

グローバルメニューがあるだけで、グンとブログの見栄えも上がりますし、最初の設定だと思って設定してみてください!

 

続けてスマホページにもグローバルメニューを設置してみましょう。

www.tomfamilyworld.com

スマホ版の個別カスタマイズには、別途はてなブログProへの登録が必要です。

Googleアドセンス審査に通るには他にもいくつか必要な要素があります。

ぜひ下記の記事もチェックしてみてください。

www.tomfamilyworld.com

そして他のはてなブログカスタマイズも記載してますのでチェック!

www.tomfamilyworld.com

では、また!

にほんブログ村 海外生活ブログへ
にほんブログ村