【はてなブログ】ヘッダにナビゲーションメニュー表示するカスタマイズ(Minimalism対応)

・はてなブログのヘッダー部にナビゲーションメニューを表示させたい。
・具体的なやり方を簡単に分かりやすく教えてほしい。

こういった疑問に答えます。

本記事の内容

1. はてなブログのテーマ「Minimalism」でナビゲーションメニューを表示するカスタマイズ方法

この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。
当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。

こういった私が、解説していきます。

はてなブログのテーマ「Minimalism」でナビゲーションメニューを表示するカスタマイズ方法

ヘッダ＞タイトル下　にコードを追加

テーマ「Minimalism」では、最初からナビゲーションメニュー用のコードが使えます。

<nav id="gnav">
  <div class="gnav-inner" id="menu-scroll">
    <div class="menu"><a href="https://takeuchiblog.hatenablog.jp/"><i class="blogicon-home"></i> TOP</a></div>
    <div class="menu"><a href="https://takeuchiblog.hatenablog.jp/archive/category/xxxxxxxxxxx"><i class="blogicon-laptop"></i> xxxxxxxxxxx</a></div>
    <div class="menu"><a href="https://takeuchiblog.hatenablog.jp/archive/category/xxxxxxxxxxx"><i class="blogicon-search"></i> xxxxxxxxxxx</a></div>
    <div class="menu"><a href="https://takeuchiblog.hatenablog.jp/about"><i class="blogicon-info"></i> ABOUT</a></div>
  </div>
</nav>

アイコンには、はてなブログ独自の「ブログアイコン」を使っています。

ブログアイコンについては、以下の記事で詳しく書いています。

takeuchiblog.hatenablog.jp

デザインCSSにコードを追加

ナビゲーションメニューの背景色と文字色を自分の好みに変更するコードを追加します。

/* ナビゲーションメニュー */
#gnav {
  background: #1F6ED4;
}

#gnav #menu-scroll a {
  color: #fff;
}