読者です 読者をやめる 読者になる 読者になる

AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

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

Webサイト制作 はてなブログ

smartphone_gnav

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

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

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

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

用例画像は、吉本ユータヌキさんのブログ「さっきもUたやん」より拝借します。

スポンサーリンク

タイル型

nav1

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

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

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

<style>
#sm_nav{
    text-align: center;(全体を真ん中寄せ)
}
#sm_nav .category{ 
    background-color: #000000; (背景色)
    padding:〇〇px; (カテゴリ文字周りの空白)
    line-height: 200%;(2行になる場合の行間調整)
    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>

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

nav2

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

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

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

<style>
#sm_nav{
    color: #000000;(←カテゴリの間の縦棒「|」の色)
    text-align: center;(全体を真ん中寄せ)
    letter-spacing: 〇〇px;(文字の間隔指定)
    background-color: #000000; (背景色)
}
#sm_nav .category{ 
    padding:〇〇; (カテゴリ文字周りの空白)
    line-height: 200%;(2行になる場合の行間調整)
    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を使って横幅サイズ可変に

nav3

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

nav4

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

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

スマートフォンサイト制作に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>

横向きにしてみると

IMG_8269

例えばiPhoneを横に持った場合、上のような表示になります。タイルは崩れて、2段目は背景だけが横幅100%に。下ふたつは横幅が可変なので綺麗に収まってくれます。

設置場所

hatenablog_header

管理画面から、デザイン→スマートフォン→ヘッダの中のタイトル下部分に上記のコードを記載します。ヘッダの変更は、はてなブログProの契約が必要です。

あとがき

自分でも設置しておいてなんなのですが、上のデザインだと少し小さすぎて押しづらいかもしれません。もう少しボタン風にマージンを取るか、メニューボタンに隠すタイプの方が押しやすいですね。

JavaScriptが使えるならもっといじれます。どなたかよろしくお願いします!

本格的にカスタマイズしたいなら元からレスポンシブデザインで作る方法もあります。下のサイトは、はてなブログでありながらレスポンシブデザインで作成され、グローバルナビゲーションがあります。

bootstrap-sass でレスポンシブなはてなブログのテーマを作る - MANA-DOT

スマホのナビゲーションには悩むところです。

参考

アイデア満載!レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ | コリス

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

PC用のグローバルナビ設置についてはこちら

はてなブログにグローバルナビゲーションをつけてみた - AIUEO Lab2