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

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

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

f:id:daradarago:20220223233004j:plain — グローバルナビゲーションを設置した。ウェブサイトらしさが出てきた。

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

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

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

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

①HTMLのコード

<div class="navi">
<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

<a href="テキスト5のURL">自由テキスト５</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;

}