daragoのラクガキノート。〜世のため人のため〜

超雑記ブログ。必ず役に立ちます。

はてなブログにメニューバー(グローバルナビゲーション)を設置しました。

はてなブログでタイトル下にメニューバーを設置したい

メニューバー(グローバルナビゲーション)を設置して、ブログタイトルの下からカテゴリ別で記事が読めるようにしました。

f:id:daradarago:20220223233004j:plain

グローバルナビゲーションを設置した。ウェブサイトらしさが出てきた。

日記みたいなブログなら時系列に書いてあるだけだからメニューバーは不要だと思うけど、カテゴリが複数あるならグローバルナビゲーションはあった方がいいかなと思っていました。まだカテゴリ分けは適当ですが。

 

設置方法もかなり簡単なので「はてなブログ メニューバー」で検索してみてください。

大体CSSのコードをコピーして良いよってのが見つかると思うのでそれをコピぺするだけ。

コードの部分は参考にしたサイトのものをみてください。

①HTMLのコード

<div class="navi"> 

    <ul>

        <li>

        <a href="テキスト1のURL">自由テキスト1</a>

        </li>

        <li>

        <a href="テキスト2のURL">自由テキスト2</a>

        </li>

        <li>

        <a href="テキスト3のURL">自由テキスト3</a>

        </li>

        <li>

        <a href="テキスト4のURL">自由テキスト4</a>

        </li>

        <li>

        <a href="テキスト5のURL">自由テキスト5</a>

        </li>

    </ul> 

</div> 

このコードをコピーして、赤文字の箇所をご自分の好きなテキストとURLに変更してください。カテゴリー別に分けたいのなら、自由テキストの欄をカテゴリー名にして、 URLの部分はそのカテゴリーの記事が表示されているページのURLにしましょう。

 

URLは、はてなブログの管理画面で上から2番目にカテゴリーページがあり、カテゴリーをクリックするとカテゴリーのページに遷移します。

f:id:daradarago:20211028004135p:plain

f:id:daradarago:20211028004313p:plain

ダラゴのブログの場合、雑記・ブログ・読書・投資ってなってますけどそれをクリックするとちゃんとカテゴリー分けされたそれぞれのページに遷移しました。

この遷移先のURLを上のコード欄に貼り付けましょう。

 

HTML全体ができたら、コピーし

はてなブログの管理画面で「デザイン」を選択

真ん中のPCのデザインを変更→ヘッダ→タイトル下のコード記入欄に貼り付けます。

 

そうするとタイトル下にバーが表示されます。こんな感じ。

f:id:daradarago:20220223235229j:plain

HTMLのコードを貼り付けただけだと
縦にリスト化されているだけなのでCSSで整える

メニューバーが表示されました。

第一段階突破です。

ですが、グローバルナビゲーションは横に並んでて枠もちゃんとあるのが普通ですよね。これをCSSで整えていきます。

 

CSSのコード

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

.nav {

width: 100%; 

padding: 0 0; 

margin: 0 auto 24px; 

}

.nav ul{

padding: 0;

overflow:hidden; 

list-style-type: none; 

background:#fff; 

margin-bottom:16px; 

text-align: center; 

border-top: 2px solid #000; 

border-bottom: 2px solid #000; 

height: 50px;  

}

.nav li{

float: left; 

text-align: center;

width:20%; 

margin: 0;

}

.nav li a{

display: block; 

margin: 0;

line-height:50px; 

color: #000; 

font-size: 15px; 

text-decoration: none; 

}

.nav a:hover{

color: #fff; 

background:#f7546d;

}

が基本になっていますが、これだとスマホに対応できていなかったので、改善する必要があります。横にスライドするのもいいかな。

 

なぜメニューバーをつけようとしたか。

これはブログの直帰率を下げるためです。読者さんなら最新記事だけ読んでいただければ良いのですが、新規ユーザーさんが他のページを訪問してくれないのは良いブログとは言えないですよね。他のページに行ってもらうにはブログの一番上に興味のあるカテゴリーのものが表示されていた方がいいと思ったんですよね。

 

はてなブログでメニューバーは無料でもProと同じように設定できるようです。他のページを読んでもらいたいなぁと思っている方はぜひメニューバーを設置してみてはどうでしょう。PV増えるかもしれませんよ。

(PVが増えるとか何か変化があったらまた報告します。)

 

おーり。