自分用の覚書き、、は、自分用なので非公開が適当だけど、こっちにあった方が便利 ( -ω-). … コピペで簡単に実現したとはいえ、調整は Try ＆ Error でそれなりだったので、書いておくことにした。
まずは検索、コピペで確認
「グローバルナビゲーション はてなブログ」で検索。
思った以上に多数のサイトがヒットしてびっくり。自分のサイトに合いそうなサイト様を参考にすれば良さそうですよ。
今回は、目についたサイトさんを参考に作った後、丁寧に説明を入れてくれているサイト様を参考に見直し調整
参考サイト様：はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
ヘッダタイトル下へ ナビの HTML を貼り付け
私の使っているテーマ SOHO で崩れないかどうか・・・内心 (,,•﹏•,,)ﾄﾞｷﾄﾞｷ しながら、ヘッダのタイトル下へ 解説サイトのHTMLを (｡ ・ω･)っ□ﾍﾟﾀ。
てっきり HTML と CSS で実現するのかと思ったら、jQuery を使うんですね？ん？jQuery は導入済みだよね？ということは、読み込みの一文は重複してる。
これ ↓
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
ので、これは _ﾛ(・ω・=) ｹｼｹｼ
デザイン CSS へ CSS を貼り付け
デザインCSS への一番最後へとりあえず解説サイトの CSS をそのまま (｡ ・ω･)っ□ﾍﾟﾀ。
結果を見ると・・・、できた！+ﾟ+ヾ(ﾟωﾟ )/.:・*ﾟ 意外と簡単 ♪、スムーズだった。が、ここからが大変なのです（自分好みにカスタマイズするのが）。今回はそうでもないといいなーと思ったけど、いつも通りやっぱり大変だった；
自分好みにカスタマイズ
背景色の変更
デフォでは、PC・タブレット表示では 黒帯に白文字 、スマホ表示はトグルメニューで開く形式で、開いた時の背景色は 原色な水色 。
ページ上部に黒帯が入るとギュッと引き締まった感じになって（スタイリッシュっていうの？）かっこいい、かっこいい・・・けど、私のサイトには少し強すぎる。
余談としては、本来は私のサイトのようにコントラストのはっきりしない色使いはよろしくない。標準色の256色だっけ？その辺から色選びをすべきとは思うのだが、敢えてパステルカラーの微妙な色を好んで使っているのは、単純にパステルや淡い色合いが好きなのと、場所を問わず閲覧する時に、はっきりした黒色や原色は目立つのだ。背後が気になる・・・ということだ（- -）.
★グラデーションを採用
黒帯は濃すぎる、灰色にするとぼんやりしてしまらない、文字色は白だからそこも変更しないといけない・・・と、試行錯誤した結果、グラデーション帯を使うことにして（ちょっと夕焼けっぽいし）一応落ち着いた（満足ではないけど）。
スマホ表示の背景もグラデにしても良かったが範囲が広いので、うるさくないパステル色で、取り敢えず。
グラデーションジェネレーター
グラデーション作成は、ジェネレーターサイトが（プレビュー確認しながらコードも教えてくれる）が多数存在する (*˘︶˘人)ｱﾘｶﾞﾀﾔ
今回お世話になったのはこちら ↓ なぜか毎回違うサイトにお世話になっている気が。
CSS Gradient — Generator, Maker, and Background
作った CSS はこれ ↓
background: rgb(221,242,251);
background: linear-gradient(90deg, rgba(221,242,251,1) 0%, rgba(202,215,237,0.6252873563218391) 35%, rgba(214,218,225,1) 47%, rgba(250,228,189,1) 100%);
border-top: 3px solid #B3B3B3;
}
※ background: の指定が重複しているのは、グラデーション対応してないブラウザの為と思われる。今どきそんなのあるか？私のサイトでそこまで考慮する必要あるか？（← 訪問者少ないので）という疑問はあるが、一応残した
マウスオーバーの色変更
マウスオーバーはデフォルトの、白背景をそのまま採用。文字色は迷ったが、他の個所で赤字に設定しているので同じ赤系にしておいた。
トグルメニューの位置変更
デフォのスマホ表示だと、トグルメニューが右側だった。
右側のちょうどオレンジのところにかかっていい感じではあるけど・・・ページを開いた時、目線はタイトルや日付の方をまず辿るんじゃないだろうかと＝MENU に気付かない、ような気がしたので、嫌でも目につく「MENUあるよｗ」という左側へ移動。
やや気になるのは、リンクする文字が密集してしまうことか（MENU、日付、タイトル、カテゴリー）。右に戻した方がいいのか迷うが、取り敢えず、MENU ってなんだろう？位の存在感は出たと思う。
ナビ上に出てしまう余白をなくす
一番苦労したのが、グローバルナビゲーション上に余白が出来てしまうことだった。
SOHO のヘッダ回りは以前から調整がよくわからず（サポートがもうないので）挫折していた箇所だが、今回は、はてなブログの HTML 構造を調べて、親切サイトのおかげでなんとか解決。現状でも、ウィンドウ幅によって余白が出てしまうが、まあ、そこまで影響なさそうなのでそこはそのまま。
結論から、↓ の CSS を追加
/***ヘッダー画像下の余白を消す***/
#blog-title{
padding-bottom: 18px;
}
いい感じに収まった
この余白は margin のせいだと思っていたが padding だったらしい。現在のヘッダー画像だと 18px で丁度よくなった。
そもそもの ヘッダー画像の高さに合ってないだけ、という話もあるが、コンパクトにする為には画像を大きくするのではなく、現状の画像に合わせて padding 調整。このぐらいかな、っていう適当な数字を入れて Try ＆ Error しながら…
残念ながら、画面の幅によっては白余白が現れてしまう； が、許容範囲な気がしたのでそこはそのまま（できれば直したいけど、まあいいか）。
アイコンフォント追加
文字だけのメニューがどうもしっくりこないので、HOME の前だけお馴染みのアイコンを追加して
HOME に。
アイコンフォントは、 とか とか の絵文字。使うと可愛らしくなるし見やすかったりする。オシャレな Font Awesome だと崩れたりうまくいかないことが多いので（経験済み）、はてな公式に認められている？無難なアイコンフォントを使う。困ったことに公式には説明がなくて、親切サイト様を検索してお世話に。
★やり方
通常の記述方法は、
<i class="blogicon-home"></i> のように、
<i>タグで書く。が、はてなブログの『編集見たままモード』の場合は、
<span class="blogicon-home"> </span>
<span> で囲まないとダメらしい。HTML の自動整形でタグ削除されてしまう為 ＼_(・ω・`)ｺｺ重要！
今回は、デザイン設定でヘッダータイトル下へ記述するので、
<i class="blogicon-home"></i> HOME でOK。
アイコンフォントについては、こちらのサイト様に特にお世話になりました。
はてなブログで使えるアイコンフォント全125種 - フジブロっ！
1 カラム時のみのメニューを表示
1 カラム表示の時だけ「カテゴリ一覧」のナビが表示されるようにした。
2 カラム（PC表示）は、サイドバーにカテゴリーがあるので非表示
1 カラム（タブレット・スマホ表示）は、サイドバーが無いので、「カテゴリ一覧」をナビに表示
はてなブログではカテゴリー一覧のページが用意されていない為、ページ内リンクでカテゴリー項目のところに飛べるようにした。やや苦しいが仕方ない；
★やり方
Step.1
サイドバーのモジュールに <HTML>設定できるフリーモジュールがあるのでそこへ、a name タグを記述し、モジュールタイトルを空欄に（見た目に非表示になる）。
<a name="jump"></a>
ナビのリンク先をページ内リンクにして、ナビの <li> タグにクラスを設定
<li class="catejump"><a href="#jump">カテゴリ一覧</a></li>
「カテゴリー一覧」が正式だが、便宜上「カテゴリ一覧」としておいた。class ではなく id 設定の方が本当はいいかも知れない。
Step2.
デザイン CSS で、グローバルナビゲーション 1 カラム用設定に ”980px 以上の場合は非表示”を追加 。
/*パソコン１カラム でナビメニューを１つ消す*/
@media screen and (min-width:980px){
.catejump{
display:none;
}
}
※ここはデフォでは 968px 以下と設定されていたが、SOHO では 980px で 1カラムに切替わるようなので 968px 以下→ 980px 以上に修正した。SOHO が 何px に設定されているのか取説がないので正確なところが分からない。これも Try ＆ Error で推測（大変すぎた...）。ついでに @media の基本も検索した。
カテゴリー小分け構成にしたのに、1 カラムだと相当にスクロールしないと一覧が見られない（いつも記事が長文だからね！；）のが気になって、無理やりナビに入れてみたが、少しはマシになっただろうか？
★＠media 基本知識
@media screen and (max-width: 767px) {/* スクリーンサイズが767px以下の場合に適用 */}
@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */}
max が以下で、min が以上。
参考サイト：HTML/CSS | メディアクエリの書き方(min-width, max-width) - わくわくBank www.wakuwakubank.com/posts/443-html-css-media-query/
参考サイトさんによると、max と min の混在はよくないらしい・・・いずれ大幅に書き換えた方がいいかも？;
修正しきれなかったところ
画面サイズによって、メニューが消える幅がある。Try ＆ Error で 何px の時に消えてしまうか確かめようとしたが確定できず・・・設定では 〇〇以下の時に適用、の @media しかないような気がするので、グローバルナビの CSS というよりは、他の CSS が干渉しているような・・・？.Ҩ(´-ω-`)?
また、同じ画面幅でも読み込みしなおすと表示されたりもするので、script の遅延なのかも知れない。前述の、min と max の混在がいけないのか・・・原因不明。いつかわかればね。
メニューはこれでいいのか？
最大の疑問といっていい部分（ ・▽・）... 。最新記事、は良いとして、HOME・・は、タイトルクリックすればいいし、要らない気もしたが、無いとバランスが悪いので入れた。
ナビゲーションなのだから、需要が高く、訪問者が見たいと思うか、管理者が見せたいもを入れるのが正しいと思うけど、そもそも、なにを見たくてここを訪問するのか分からない・・・たまたま来ちゃっただけ、な人も半数かそれ以上と予想すると本当に少ない訪問者なので、分析しようがないと思う。まずはアクセス数を上げろ、という話になりそうだけどそういう目的のサイトでもないし・・・もう自分本位でいいかね？という本末転倒的、別視点で考えれば目的達成なところで自分が苦労したまとめ的なページを（仮）で入れた。意味ねー、と思った方には申し訳ないけど。アクセス解析は定期的にみているので今後の様子で変更はすると思う。
感想
コピペで実現は簡単だったが、カスタマイズは例にもれず大変過ぎた。そして、それと同じかそれ以上にこの記事を書くのが大変だった；未来の、記憶喪失状態を想像して、この時なにをしたか（自分が）わかるように説明を交えて書くのは本当に大変だ。これは、ゲームのクエストやイベントを説明する記事を書く時、初心者向けに、どこにメニューがあるか、など、基本の操作含めて書く、のと同じくらい大変だと、改めて思った。
