グローバルナビ設置方法

グローバルナビ設置方法

下記赤枠のようなメニューを設置する方法です。

はてなブログ上部のメニューから、以下を表示します。
「デザイン」 > 「カスタマイズ」タブ > 「ヘッダ」

「ブログタイトル下」欄に下記コードを貼り付けます。
（20230110追記　申し訳ありませんコードが間違っていました。。訂正しました）

<nav id="global-navi">
  <ul class="global-navi-inner">
    <li><a href="[リンクのURL]">メニュー1</a></li>
    <li><a href="[リンクのURL]">メニュー2</a></li>
    <li><a href="[リンクのURL]">メニュー3</a></li>
    <li><a href="[リンクのURL]">メニュー4</a></li>
    <li><a href="[リンクのURL]">メニュー5</a></li>
  </ul>
</nav>

アイコンを追加する方法

以下のようにアイコンを追加する方法も合わせて紹介します。

はてなブログでは標準的に使えるアイコンが多々あります。特別な設定も必要ありません。
以下は設定例です。

<nav id="global-navi">
  <ul class="global-navi-inner">
    <li><a href="[リンクのURL]"><i class="blogicon-home"></i>&nbspメニュー1</a></li>
    <li><a href="[リンクのURL]"><i class="blogicon-hatenablog"></i>&nbspメニュー2</a></li>
    <li><a href="[リンクのURL]"><i class="blogicon-setting"></i>&nbspメニュー3</a></li>
    <li><a href="[リンクのURL]"><i class="blogicon-setting"></i>&nbspメニュー4</a></li>
    <li><a href="[リンクのURL]"><i class="blogicon-draft"></i>&nbspメニュー5</a></li>
  </ul>
</nav>

<i class="[アイコンのクラス名]"></i>を追加すればアイコンが追加されます。
※&nbspは半角スペースを表しています。 （少しスキマを開けるために追加）

アイコンの種類は他にもたくさんあるので、ネット等で調べて好きなものを設定して頂ければと思います。