この記事はシリーズで書いていますが、今回は特にZENO-TEALに限らずはてなブログで共通して応用できます。
www.simonsnote.com
今回は上の写真のようにページ最上部にメニューバーを出します。
（手っ取り早くコピペで済ませたい方はこちらへ）
- 概要、方法を考える
- １、「タイトル下」にメニューバーを設置して、見かけ上の位置だけ上に持っていく
- ２、元のブログタイトルエリアの表示を消してしまって、新しく メニューバー → 手作りブログタイトルエリア の順で設置する
- ３、元のブログタイトルエリアの表示を加工してメニューバー風にし、その下に新しい手作りタイトルエリアを設置する（おすすめ）
概要、方法を考える
さて、はてなブログのhtml構造はこんなふうになっています。
yaritakunai.hatenablog.com
そしてユーザーがhtmlを記述できる、つまり新しいパーツを設置できるのは「タイトル下」「記事上」「記事下」「フッター」「サイドバー」のみです。そう、ブログタイトルエリアの「上」には設置できない。
イメージとしてはこんなふうに、ブログタイトルエリアの上にカテゴリリンクとかいろんなメニューを置きたいんですね。
そこで３つ方法を考えました。
１、「タイトル下」にメニューバーを設置して、見かけ上の位置だけ上に持っていく
２、元のブログタイトルエリアの表示を消してしまって、新しく メニューバー → 手作りブログタイトルエリア の順で設置する
３、元のブログタイトルエリアの表示を加工してメニューバー風にし、その下に新しい手作りブログタイトルエリアを設置する
ぼくは３の方法を採りました。理由は、せっかくはてなブログの元々の構造に入っているブログタイトルエリアを活用したいし、やはりhtml上「ブログタイトル」という部分が一番上にくるのが美しい（html構造がすっきりしているというのはSEO上プラスになるとかならないとか）。方法１と２だと「ブログタイトル」という名前のhtml部分をトップページ以外では消してしまうことになって、よくわからんけどgoogle様を混乱させでもしてもいやです。まあSEO的な影響は微々たるものといえばそうでしょうし、都市伝説みたいなものでぼくも詳しくは知らないので、おまじない程度に思ってください。どの方法でもいいんじゃないですか（なげやり）
ちなみに一番上の写真みたいにメニューバーを透過させたい場合は方法３でお願いします。
メニューバーのデザインについて、僕は最初の写真みたいなイメージなのですが、
この記事は一応ZENO-TEALカスタマイズが前提なので、元々ZENO-TEALに用意されているタイトル下用メニューバー（↓こんなん）のデザインが使いたい人向けのコードも載せておきます。
zeno-teal.hatenablog.com
- 概要、方法を考える
- １、「タイトル下」にメニューバーを設置して、見かけ上の位置だけ上に持っていく
- ２、元のブログタイトルエリアの表示を消してしまって、新しく メニューバー → 手作りブログタイトルエリア の順で設置する
- ３、元のブログタイトルエリアの表示を加工してメニューバー風にし、その下に新しい手作りタイトルエリアを設置する（おすすめ）
１、「タイトル下」にメニューバーを設置して、見かけ上の位置だけ上に持っていく
・ZENO-TEALに用意されているタイトル下用メニューバーのデザインを使いたい場合
まずはZENO-TEALに用意されているタイトル下用メニューバー（グローバルナビゲーションバー）を上に持っていきたい人向け。
（というかこのデザインでやる方法はこれしか用意してないです。ごめんなさい。）
まだこのグローバルナビゲーションバーを出してない人はこのコードを「タイトル下」のhtmlに貼ってください。（貼り方）
<div id="zeno-menu"> <ul class="zeno-menu"> <li><a href="">SAMPLE1</a></li> <li><a href="">SAMPLE2</a></li> <li><a href="">SAMPLE3</a></li> <li><a href="">SAMPLE4</a></li> </ul> </div>
そしたら、下のコードをデザインCSSに貼ってください。（貼り方）
既にこのグローバルナビゲーションバーを使っている人もいると思いますが、追加で貼ればOKです。
#top-editarea{margin:0;position:absolute;top:37px;} .zeno-menu a{height:3em;} #container-inner{margin-top:3em;}
こんなんなりますね。
このままだと本当に上に持ってきただけで、ちょっとデザインが合わないので、いくつかいじりましょう。
ボタン類の横幅を変える
.zeno-menu{width:100vw;}
このwidth:100vwというのはボタンエリアがページの横幅に対して何パーセントかということです。90vwにすれば90%になります。お好みで。
色を変える
#zeno-menu{background:red/*メニューバーの色*/;} .zeno-menu li a:hover{background:blue/*ボタンにマウスを乗せた時の色*/;}
redとかblueのところを好きな色にしてください。
カラーネームはこちらを参考にどうぞ。
www.netyasun.com
ちなみにボタンごとに違う色にもできます
HTMLにこんな風に貼ってあると思いますが、
<div id="zeno-menu"> <ul class="zeno-menu"> <li><a href="">SAMPLE1</a></li> <li><a href="">SAMPLE2</a></li> <li><a href="">SAMPLE3</a></li> <li><a href="">SAMPLE4</a></li> </ul> </div>
この<li><a href="">SAMPLE1</a></li>の中の<li>の部分を
<li class="sukina-namae<!--好きな名前-->">というようにします。sukina-namaeは適当に名前をつけてください。
そしたら、デザインCSSに下のコードを貼ってください。
.zeno-menu li.sukina-namae/*さっきつけた名前*/ a{background:steelblue/*ボタンの色*/;} .zeno-menu li.sukina-namae/*さっきつけた名前*/ a:hover{background:slateblue/*ボタンにカーソルを乗せた時の色*/;}
ちなみに文字の色を変えたい場合は、さっきまでのコードのbackgroundをcolorに置き換えて追加で貼ればOKです。
さて、影がすこし気になるので消しましょう。
影を消す
#zeno-menu{box-shadow:none;}/*メニューバー全体の影を消す*/ .zeno-menu li a:hover{box-shadow:none;}/*ボタンにカーソルを乗せた時の影を消す*/
仕上げ（メニューにリンクを貼る）
あとはボタンに各ページへのリンクを貼ればおしまいですね。
飛ばしたい先のページのURLを、HTMLの<a href="<!--ここ-->">の部分にはればOKです。
・一番上の写真みたいなメニューバーを出す
さて、ぼくはこんなイメージ↓のメニューバーを作りたいので、（ちなみにメニューのボタン数は自由に変えられます）
こっちがいい人はさっきのHTMLとCSSは無視して、まずはこのコードを「タイトル下」のhtmlに貼ってください。（貼り方）
<nav id="new-menu"> <div class="nm-title"> <div class="nm-title-inner"> <h1 title="ホーム"><a href="<!--トップページのURL-->">ブログのタイトル</a></h1> </div> </div> <div class="nm-menu"> <ul> <li><a href="<!--任意のURL-->"><span>Menu1</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu2</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu3</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu4</span></a></li> </ul> </div> <div class="nm-search"> <div class="hatena-module-body"> <form class="search-form" role="search" action="<!--トップページのURL-->/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> </nav>
次にデザインCSSにこれを貼ります。（貼り方）
#new-menu {display:-webkit-flex;display:flex; -webkit-justify-content:flex-end;justify-content:flex-end; -webkit-align-items:stretch;align-items:stretch; width:100vw;padding:0 1vw 0 7vw;} #new-menu div,#new-menu li{ height:6rem;} .nm-title {flex:1;} .nm-title-inner {float:left;display:table;padding:0 4em;} .nm-title h1 {display:table-cell;vertical-align:middle;} .nm-menu {width:40vw;} .nm-menu ul {display:-webkit-flex;display:flex; margin:0;padding:0;} .nm-menu li {width: 100%; display:-webkit-flex;display:flex; -webkit-align-items:center;align-items:center; -webkit-justify-content:center;justify-content:center;} .nm-search {display:table;} .nm-search .hatena-module-body {display:table-cell;vertical-align:middle;height:auto !important;} .nm-search form {width:25vw;background:#fff;} input[type="text"]:focus{outline:0;} .nm-search form:hover {border-color:#ccc;} .nm-search form:after {content:none;} .nm-search input.search-module-button {font-family:blogicon;color:#666;font-size:1.5rem;height:100%;top:0;right:auto;} .nm-search input.search-module-button:hover {color:#222;} #top-editarea{margin:0;position:absolute;top:37px;} #container-inner{margin-top:6rem;}
プレーンなヘッドメニューバーが現れましたね
見た目のカスタマイズをしましょう。ちなみに上のコードの最後の２行を消すと普通にタイトル下にこのメニューバーが出るので、趣旨ずれますがお好みで（笑）
メニューバーの色を変える
#new-menu {background:好きな色;}
濃い色にすると検索フォームの白が目立ちますね...
サイズをもう少し細くしてみます。
検索フォームの太さを調整する
.nm-search form{line-height:2rem;} /*検索フォームの太さ（2remの部分を調整してください）*/
もしくは
検索フォームの背景色を変える
.nm-search form, .nm-search input {background:好きな色;} /*検索フォームの背景色*/
検索ボックスの枠線の太さが目立つので、細く
.nm-search form {border:solid 1px #e0e0e0;}/*検索フォームの枠線*/
もしくは枠線なし
.nm-search form {border:none;}
メニューバーの高さを変える
#new-menu div,#new-menu li{height:好きな高さ;} /*6remがデフォルトです*/ #container-inner{margin-top:↑と同じ値;} /*必ず同じ値をいれてください*/
メニューボタン部分と検索フォーム部分の長さを変える
.nm-menu{width:40vw;} /*メニュー部分。0vw~100vwの間で*/ .nm-search form{width:25vw;} /*検索フォーム部分。0vw~100vwの間で*/
文字の色
#new-menu a{color:好きな色;} /*文字の色*/ #new-menu a:hover{color:好きな色;} /*マウスカーソルを上に乗せた時の文字の色*/
ボタンみたいにしたい場合はこちら
#new-menu .nm-menu a {display:table;width:100%;height:100%;} #new-menu .nm-menu span {display:table-cell;text-align:center;vertical-align:middle;} #new-menu .nm-menu li:hover {background:好きな色;} /*マウスカーソルを上に乗せた時のボタンの色*/
メニューごとに文字やボタンの色を変えたい場合
HTMLの<li><a href="任意のURL"><span>Menu1</span></a></li>の中の<li>の部分を<li class="sukina-namae<!--好きな名前-->">というようにして（sukina-namaeの部分に適当に名前をつける）、デザインCSSに下のコードを貼ってください。
#new-menu .sukina-namae/*さっきつけた名前*/ a {color:好きな色; /*文字の色*/ background:好きな色;} /*ボタンの色*/ #new-menu .sukina-namae/*さっきつけた名前*/ a:hover {color:好きな色; /*カーソルを乗せた時の文字の色*/ background:好きな色;} /*カーソルを乗せた時のボタンの色*/
ブログのタイトル名部分のカスタマイズ
#new-menu .nm-title a {color:好きな色;} /*文字の色*/ #new-menu .nm-title a:hover {color:好きな色;} /*マウスカーソルを上に乗せた時の文字の色*/ #new-menu .nm-title-inner {background:好きな色; /*背景色*/ padding-right:4em; /*背景の右方向の長さ*/ padding-left:4em;} /*背景の左方向の長さ*/ #new-menu{padding-left:1vw;} /*左端からの距離(1~100vwで調整)*/
メニューの数を調整する
メニューの数は自由に追加／削除できます。
HTMLの
<div class="nm-menu"> <ul> <li><a href="<!--任意のURL-->"><span>Menu1</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu2</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu3</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu4</span></a></li> </ul> </div>
の部分の<li>~~~~/<li>を追加／削除すればOKです。メニューの数を変えてもメニューエリア全体の幅は変わらないので、手動で調整してください。
２、元のブログタイトルエリアの表示を消してしまって、新しく メニューバー → 手作りブログタイトルエリア の順で設置する
わざわざこの方法でやる意味をあまり感じませんが、一応コードを載せておきます。
タイトル下HTML（貼り方）
<nav id="new-menu"> <div class="nm-title"> <div class="nm-title-inner"> <h1 title="ホーム"><a href="<!--トップページのURL-->">ブログのタイトル</a></h1> </div> </div> <div class="nm-menu"> <ul> <li><a href="<!--任意のURL-->"><span>Menu1</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu2</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu3</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu4</span></a></li> </ul> </div> <div class="nm-search"> <div class="hatena-module-body"> <form class="search-form" role="search" action="<!--トップページのURL-->/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> </nav> <header id="new-blog-title"> <div id="new-blog-title-inner"> <div id="new-blog-title-content"> <h1 id="new-title"><a href="トップページのURL">ブログ名</a></h1> <h2 id="new-blog-description">ブログの説明</h2> </div> </div> </header>
デザインCSS（貼り方）
#blog-title{display:none;} #new-menu {display:-webkit-flex;display:flex; -webkit-justify-content:flex-end;justify-content:flex-end; -webkit-align-items:stretch;align-items:stretch; width:100vw;padding:0 1vw 0 7vw;background:white;} #new-menu div,#new-menu li{ height:6rem;} .nm-title {flex:1;} .nm-title-inner {float:left;display:table;padding:0 4em;} .nm-title h1 {display:table-cell;vertical-align:middle;} .nm-menu {width:40vw;} .nm-menu ul {display:-webkit-flex;display:flex; margin:0;padding:0;} .nm-menu li {width: 100%; display:-webkit-flex;display:flex; -webkit-align-items:center;align-items:center; -webkit-justify-content:center;justify-content:center;} .nm-search {display:table;} .nm-search .hatena-module-body {display:table-cell;vertical-align:middle;height:auto !important;} .nm-search form {width:25vw;background:#fff;} input[type="text"]:focus{outline:0;} .nm-search form:hover {border-color:#ccc;} .nm-search form:after {content:none;} .nm-search input.search-module-button {font-family:blogicon;color:#666;font-size:1.5rem;height:100%;top:0;right:auto;} .nm-search input.search-module-button:hover {color:#222;} #new-blog-title {width:100%;height:200px;overflow:hidden;display:table;margin:0 0 0rem 0;background:#009688;color:#fff;} #new-blog-title #new-blog-title-inner {display:table-cell;text-align:center;vertical-align:middle;} #new-blog-title #new-title a {font-size:48px;font-weight:700;line-height:1;color:#fff;letter-spacing:0.15em;}
消してしまった元のブログタイトル部分をカスタマイズしていた場合は、その部分のデザインCSSを今貼ったコードの下にコピペで移動してから、そのもともとのCSSの中の#の後にnew-といれてください（例：#blog-title→#new-blog-title）。
３、元のブログタイトルエリアの表示を加工してメニューバー風にし、その下に新しい手作りタイトルエリアを設置する（おすすめ）
一番正統派の方法ですね。しかしはてなブログの構造だと、すこし工夫が要ります。
ところでこの方法だとこんな風に↓メニューバーを透けさせられます。後ほど。
まずこのコードを「タイトル下」のHTMLに貼ってください（貼り方）
<nav id="new-menu"> <div class="nm-menu"> <ul> <li><a href="<!--任意のURL-->"><span>Menu1</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu2</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu3</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu4</span></a></li> </ul> </div> <div class="nm-search"> <div class="hatena-module-body"> <form class="search-form" role="search" action="<!--トップページのURL-->/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> </nav> <div id="new-menu-backlayer"> </div> <header id="new-blog-title"> <div id="new-blog-title-inner"> <div id="new-blog-title-content"> <h1 id="new-title"><a href="トップページのURL">ブログ名</a></h1> <h2 id="new-blog-description">ブログの説明</h2> </div> </div> </header>
そしたら、このコードをデザインCSSに貼ってください（貼り方）
#blog-title {background:none;padding-left:4em;} #blog-title #blog-title-inner {position:relative;z-index:10;padding:0 2em;text-align:left;display:table;} #blog-title #blog-title-inner #blog-title-content {display:table-cell;vertical-align:middle;} #blog-title #title a {font-size:200%;} #new-menu {display:-webkit-flex;display:flex; -webkit-justify-content:flex-end;justify-content:flex-end; -webkit-align-items:stretch;align-items:stretch; width:100vw;padding:0 1vw 0 7vw;position:relative;z-index:9;} #new-menu div,#new-menu li,#new-menu-backlayer,#blog-title,#blog-title #blog-title-inner{ height:6rem;} .nm-title {flex:1;} .nm-title-inner {float:left;display:table;padding:0 4em;} .nm-title h1 {display:table-cell;vertical-align:middle;} .nm-menu {width:40vw;} .nm-menu ul {display:-webkit-flex;display:flex; margin:0;padding:0;} .nm-menu li {width: 100%; display:-webkit-flex;display:flex; -webkit-align-items:center;align-items:center; -webkit-justify-content:center;justify-content:center;} .nm-search {display:table;} .nm-search .hatena-module-body {display:table-cell;vertical-align:middle;height:auto !important;} .nm-search form {width:25vw;background:#fff;} input[type="text"]:focus{outline:0;} .nm-search form:hover {border-color:#ccc;} .nm-search form:after {content:none;} .nm-search input.search-module-button {font-family:blogicon;color:#666;font-size:1.5rem;height:100%;top:0;right:auto;} .nm-search input.search-module-button:hover {color:#222;} #new-blog-title {width:100%;height:200px;overflow:hidden;display:table;margin:0 0 0rem 0;background:#009688;color:#fff;} #new-blog-title #new-blog-title-inner {display:table-cell;text-align:center;vertical-align:middle;} #new-blog-title #new-title a {font-size:48px;font-weight:700;line-height:1;color:#fff;letter-spacing:0.15em;} #top-editarea,#new-menu-backlayer {margin-top:-6rem;} #new-menu-backlayer {width:100vw;z-index:8;background:gray;} #top-editarea {height:calc(6rem + 200px);}
プレーンなメニューバーが出てきました。
このままでは殺風景なのでカスタマイズしていきましょう。
メニューバーの色を変える
#new-menu-backlayer {background:好きな色;}
濃い色にすると検索フォームの白が目立ちますね...
サイズをもう少し細くしてみます。
検索フォームの太さを細くする
.nm-search form{line-height:2rem;} /*検索フォームの太さ*/
もしくは
背景色を変える
.nm-search form, .nm-search input {background:好きな色;} /*検索フォームの背景色*/
検索ボックスの枠線の太さが目立つので、細く
検索フォームの枠線
.nm-search form {border:solid 1px #e0e0e0;}/*検索フォームの枠線*/
もしくは枠線なし
（写真）
.nm-search form {border:none;}
メニューバーの高さを変える
#new-menu div,#new-menu li,#new-menu-backlayer,#blog-title,#blog-title #blog-title-inner{ height:好きな高さ;} /*6remがデフォルトです*/ #top-editarea,#new-menu-backlayer {margin-top:-好きな高さ;} /*上と同じ値をマイナスで入れてください*/ #top-editarea {height:calc(好きな高さ + 200px);} /*上で入れた値 ＋ ブログタイトル部分（#new-blog-title）の高さ となるようにしてください。*/
メニュー部分と検索フォーム部分の長さを変える
.nm-menu{width:40vw;} /*メニュー部分。0vw~100vwの間で*/ .nm-search form{width:25vw;} /*検索フォーム部分。0vw~100vwの間で*/
メニュー部分の文字の色
#new-menu a{color:好きな色;} /*文字の色*/ #new-menu a:hover{color:好きな色;} /*マウスカーソルを上に乗せた時の文字の色*/
ボタンみたいにしたい場合はこちら
#new-menu .nm-menu a {display:table;width:100%;height:100%;} #new-menu .nm-menu span {display:table-cell;text-align:center;vertical-align:middle;} #new-menu .nm-menu li:hover {background:好きな色;} /*マウスカーソルを上に乗せた時のボタンの色*/
メニューごとに文字やボタンの色を変えたい場合は
HTMLの<li><a href="任意のURL"><span>Menu1</span></a></li>の中の<li>の部分を<li class="sukina-namae<!--好きな名前-->">というようにして（sukina-namaeの部分に適当に名前をつける）、デザインCSSに下のコードを貼ってください。
#new-menu .sukina-namae/*さっきつけた名前*/ a {color:好きな色; /*文字の色*/ background:好きな色;} /*ボタンの色*/ #new-menu .sukina-namae/*さっきつけた名前*/ a:hover {color:好きな色; /*カーソルを乗せた時の文字の色*/ background:好きな色;} /*カーソルを乗せた時のボタンの色*/
ブログのタイトル名部分のカスタマイズ
#new-blog-title #new-title a {color:好きな色;} /*文字の色*/ #new-blog-title #new-title a:hover {color:好きな色;} /*マウスカーソルを上に乗せた時の文字の色*/ #blog-title #blog-title-inner {background:好きな色など;} /*背景色、画像など*/ #new-menu{padding-left:1vw;} /*左端からの距離(1~100vwで調整)*/
メニューを追加／削除する
メニューの数は自由に追加／削除できます。
HTMLの
<div class="nm-menu"> <ul> <li><a href="<!--任意のURL-->"><span>Menu1</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu2</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu3</span></a></li> <li><a href="<!--任意のURL-->"><span>Menu4</span></a></li> </ul> </div>
の部分の<li>~~~~/<li>を追加／削除すればOKです。メニューの数を変えてもメニューエリア全体の幅は変わらないので、手動で調整してください。
タイトルエリア（元のブログタイトル部分）をカスタマイズしていた場合は、その部分のデザインCSSを今貼ったコードの下にコピペで移動してから、その部分の#の後にnew-といれてください（例：#blog-title→#new-blog-title）。
メニューバーを透過させる
さて、メニューバーを透明にしてみましょう。この場合、タイトルエリアの背景は無くして、タイトルエリアとメニューバーに連続してかかる背景を設定するとかっこいいですね。
#new-blog-title {background:none;} /*タイトル部分の背景はいったん消します*/ #new-menu-backlayer {position:relative;z-index:8;background-color:rgba(200, 200, 200, 0.5); /*背景をぼかしたい場合は背景色はrgba()の指定になります。*/ -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);/*ぼかし具合*/;} /*ぼかし具合をpxで調整してください。*/ #top-editarea {background:url("https://static.pexels.com/photos/266967/pexels-photo-266967.jpeg");} /*通しの背景です。写真にすると透明が活きますが、べつに色でもOK*/
写真が読み込まれるのにすこし時間がかかるかもしれません。（この背景写真はこちらのサイトのフリー素材です）
ぼかしはブラウザによっては対応していないものもあります。その場合はただの半透明になります。
次は記事タイトルをブログタイトルエリア（緑色の部分）に持っていきます。
www.simonsnote.com
当記事はシリーズです。インデックスはこちら
www.simonsnote.com