【はてなブログ】ヘッダ部分にドロップダウンメニュを作成する方法

はてなブログで「画面上部に固定のドロップダウンメニュを作る」ための設定

本ページの設定をするにあたっては、他のブロガ様の設定を参考にしました。
が、試行錯誤をして作成したこともあり引用元を記載できておらず申し訳ありません。

従いまして、本ページの設定を使用されるにあたり、引用元として本 URL を記載いただく必要はありません。
本ページの内容が、はてなブロガの皆様のお役に立てば幸いです。

なお、動作については、はてなPro でのみ確認しています。
 

動作イメージ

f:id:dnkrnka:20180722171949p:plain:w800

 

動作概要

  • 5列のドロップダウンメニュである
  • 最右列である5列目はブログ内検索用のタブを設けている
  • 各列内のメニュからのネストは無い

 

設定手順

1. ヘッダのカスタマイズ画面を開く

 
はてなブログのダッシュボードを開き、デザイン → カスタマイズ → ヘッダ → タイトル下 へと進む。
 

2. ドロップダウンメニュを作成する

 
以下のコードを貼り付ける。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="top-editarea">
  <!-- グローバルナビ -->
<div id="trigger-point">
</div>
<div id="global-menu">
  <div id="mobile-head">
    <div id="nav-toggle">
      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
  <ul class="global-menu-list sub-list">
    <li><font color="#ffffff">プログラミング</font>
      <ul class="sub-item">
        <li><a href="http://www.nekochango.com/archive/category/Sed">Sed</a></li>
        <li><a href="http://www.nekochango.com/archive/category/Awk">Awk</a></li>
        <li><a href="http://www.nekochango.com/archive/category/Python">Python</a></li>
        <li><a href="http://www.nekochango.com/archive/category/Ruby">Ruby</a></li>
        <li><a href="http://www.nekochango.com/archive/category/fish">fish</a></li>
        <li><a href="http://www.nekochango.com/archive/category/vimscript">vim-script</a></li>
        <li><a href="http://www.nekochango.com/archive/category/PowerShell">PowerShell</a></li>
      </ul>
    </li>
    <li><font color="#ffffff">Linuxシステム全般</font>
      <ul class="sub-item">
        <li><a href="http://www.nekochango.com/search?q=【Linux】【Ubuntu】">Ubuntu環境のメモ</a></li>
        <li><a href="http://www.nekochango.com/search?q=【Linux】【周辺機器接続】">周辺機器接続</a></li>
        <li><a href="http://www.nekochango.com/search?q=【Linux】+【トラブル】">各種トラブル</a></li>
      </ul>
    </li>
    <li><font color="#ffffff">ソフトウェア・ツール</font>
      <ul class="sub-item">
        <li><a href="http://www.nekochango.com/search?q=【Linux】+【SW】">ソフトウェア一覧</a></li>                      
        <li><a href="http://www.nekochango.com/search?q=【Linux】【Git】">Git</a></li>
        <li><a href="http://www.nekochango.com/search?q=【Linux】【SVN】">SVN</a></li>
        <li><a href="http://www.nekochango.com/search?q=【Linux】【emacs】">Emacs</a></li>
        <li><a href="http://www.nekochango.com/search?q=【Linux】【nvim】">Neovim</a></li>                 
        <li><a href="http://www.nekochango.com/search?q=【Linux】【xdotool】">xdotool</a></li>      
        <li><a href="http://www.nekochango.com/search?q=【Linux】【Wine】">Wine</a></li>    
        <li><a href="http://www.nekochango.com/search?q=【Linux】【inotify-tools】">inotify-tools</a></li>
      </ul>
    </li>  
    <li><font color="#ffffff">その他</font>
      <ul class="sub-item">
        <li><a href="http://www.nekochango.com/search?q=【Embed】">組込みシステム</a></li>
        <li><a href="http://www.nekochango.com/search?q=【レビュ】【書評】">書評</a></li>
        <li><a href="http://www.nekochango.com/search?q=【レビュ】【機器】">機器</a></li>               
      </ul>
    </li>
    <li><font color="#ffffff">
      <div class="hatena-module-search-box">
        <div style="background-color : #ffffff" class="hatena-module-body">
          <form class="search-form" role="search" action="http:///www.nekochango.com/search" method="get">
            <input type="text" name="q" class="search-module-input" value=""    placeholder="ブログ内検索" required>
            <input type="submit" value="検索" class="search-module-button" />
          </form>
        </div>
      </div>            
    </font></li>
  </ul>
</div>

 

3. ドロップダウン内の各メニュにリンクを割り当てる

カテゴリへのリンクを作成する場合

<li><a href="http://www.nekochango.com/archive/category/Sed">Sed</a></li>

検索結果へのリンクを作成する場合

<li><a href="http://www.nekochango.com/search?q=【レビュ】【書評】">書評</a></li>

 

4. ドロップダウンの5列目の検索タブを各ブログに合せて変更する

以下のように「http://www.nekochango.com/search」となっている箇所を各ブログに合せて変更する。

<form class="search-form" role="search" action="http:///www.nekochango.com/search" method="get">