はてなブログのスマホ表示にグローバルナビゲーションを設置する

はてなブログにはPC表示用にもスマホ表示用にも、グローバルナビゲーションが純正では用意されていません。

スマホにもグローバルナビを設置したいなーという人は多いのでしょうか？昨日、吉本ユータヌキさんからこんなツイートをもらいました。

@aiueolab ひ！非常に嬉しいです！！全然関係ないんですが、スマホ用ヘッダーのカテゴリーボタンの配置方法記事お願いします！！あれすごく良いです！！！
— 吉本ユータヌキ (@gonnakill_uta) 2014, 9月 18

私は恥ずかしながら、かなりテキトーにカテゴリを並べていただけですが、ユータヌキさんからリクエストをいただいたので、書いてみることにしました。

はてなブログはスマホでもヘッダーにJavaScript書けるんでしたっけ？調べるのちょっと面倒だったので、今回は使わずに設置してみます。

用例画像は、吉本ユータヌキさんのブログ「タヌキ部屋」より拝借します。

タイル型

カテゴリーをタイルのように並べるやり方です。たくさん並べたいときは、下に紹介するものより、こちらのほうが見栄えがいいと思います。色や間隔はご自分のサイトに合わせて設定してください。

これ可変じゃありませんので、横向き（ランドスケープ）にすると崩れます。

ここから下に出てくるサンプルコード内にはカッコでタグの意味が書いてありますが、実際に使うときはカッコごと消してください。

<style>
#sm_nav{
    text-align: center;（全体を真ん中寄せ）
}
#sm_nav .category{ 
    background-color: #000000; （背景色）
    padding:〇〇px; （カテゴリ文字周りの空白）
    line-height: 200%;（２行になる場合の行間調整）
    font-size:〇〇%;（フォントサイズ調整）
}
#sm_nav a{
    color: #000000;（カテゴリの文字色）
    text-decoration: none;（リンクの下線を消す）
    word-wrap: break-word;（英文字だった場合単語の途中での改行防止）
}
</style>

<div id="sm_nav">
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名1</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名2</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名3</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名4</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名5</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名6</a></span>
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名7</a></span>
</div>

よくあるナビゲーション型

こちらはPCでよくあるグローバルナビ型。上のタイル型と違うのは、背景の色の位置と、文字間隔の調整くらい。たくさん並べたい場合はカテゴリ文字周りの空白はいらないと思います。

2段にするのには適さないので、表示するカテゴリはしぼった方がいいでしょう。タイル型と同じく、色や間隔はご自分のサイトに合わせて設定してください。

これも背景だけが可変なので、横向きだと文字は真ん中に寄ります。

<style>
#sm_nav{
    color: #000000;（←カテゴリの間の縦棒「|」の色）
    text-align: center;（全体を真ん中寄せ）
    letter-spacing: 〇〇px;（文字の間隔指定）
    background-color: #000000; （背景色）
}
#sm_nav .category{ 
    padding:〇〇; （カテゴリ文字周りの空白）
    line-height: 200%;（２行になる場合の行間調整）
    font-size: 〇〇%;（フォントサイズ）
}
#sm_nav a{
    color: #ffffff;（カテゴリの文字色）
    text-decoration: none;（リンクの下線を消す）
    word-wrap: break-word;（英文字だった場合単語途中での改行防止）
}
</style>

<div id="sm_nav"> 
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名1</a></span>
|
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名2</a></span>
|
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名3</a></span>
|
<span  class="category"><a href='カテゴリのリンク'>カテゴリ名4</a></span>
</div>

display:tableを使って横幅サイズ可変に

これはコードが短いので分かりやすいです。下の画像は少し色をいじったもので基本は同じコードです。

ここらへんが落とし所かな？

詳しくは下記のサイトが分かりやすいです。

スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！｜ Kana-Lier カナリエ

<style>
.g_nav ul {
    width: 100%;（横幅を画面いっぱいに）
    display: table;
    table-layout: fixed;
}
.g_nav li {
    padding: 1px;（カテゴリの文字の周りに空白）
    display: table-cell;
    background-color: #000000;（背景色）
    text-align: center;
}
.g_nav li:not(:last-child){
    border-right:1px solid #ffffff;（カテゴリの右側に縦線、右端だけなし）
}
.g_nav a {
    color:#ffffff;（文字色）
}
</style>

<nav class="g_nav">
<ul>
<li><a href="#">可変</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul>
</nav>