スマホ表示レイアウトにて、グローバルナビゲーションを入れたい…
はじめに
今回は、はてなブログのスマートフォン表示においてグローバルナビゲーションを入れ動線の確保を行いたいと思ってます。実はとても四苦八苦しました。左端に変な空白部分が出来てしまうのです。解決してみたらたいしたことじゃなかったのですが、同じように苦しんでる人がいるかも知れませんので紹介しておきます。
まずは、参考とした資料（ブログ等）から
参考資料
今回のカスタマイズをする上で参考としたブログです。以下並べます。
- グローバルナビゲーションを設置する上で参考としたブログ
- display:table を知る上で参考にしました（上記ブログで問題なかったですがとても詳しく丁寧に書いてありましたので）。
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！ ｜ Kana-Lier カナリエ
- テーブルの形状を変更するときに参考にしました。
出来栄え。こんな感じで出来ました。
みて頂ければどんな感じかわかってもらえます。
こんな感じです。今までは、他のページに飛ぶ方法がページ最下部の人気記事のみでした。これで、少しは動線が出来たのかなと。。。
実際に施した内容
- display:tableを使ってグローバルナビゲーションを導入
メニュー ➙ デザイン ➙ スマホ ➙ タイトル下
に以下のような内容を貼り付けます。
<!-- 2014/11/28 追加 グローバルnavigation -->
<style type="text/css">
.g_nav ul{
display:table;
table-layout: fixed;
width:100%;
}
.g_nav li{
display:table-cell;
text-align:center;
}
.g_nav li a{
display:block;
}
</style>
<nav class="g_nav">
<ul>
<li><a href="[クリックした時に飛ばしたいURL]">HOME</a></li>
<li><a href="[クリックした時に飛ばしたいURL]">BLOG</a></li>
<li><a href="[クリックした時に飛ばしたいURL]">CONTACT</a></li>
</ul>
</nav>[クリックした時に飛ばしたいURL]にはその名の通りクリックした時に移動したいURLを入れればいいです。
ですがこれだと。。。
みたいになって、左端に妙な空白スペースが出来てしまいます。。。
いろいろ調べてみたら、
.g_nav ul{
display:table;
table-layout: fixed;
width:100%;
}の所に
padding: 0;
を入れると解決しました。
あとは、背景の色や、形、文字の太さを追加で設定していけばいいわけです。
私の場合は以下です。
<!-- 2014/11/28 追加 グローバルnavigation -->
<style type="text/css">
.g_nav ul{
padding: 0; <!-- 左端の変な余白を無くす -->
display:table;
table-layout: fixed;
width:100%;
}
.g_nav li{
padding: 1px;
display: table-cell;
background-color: #FF6666; <!-- セルのバックグランドの色 -->
text-align: center;
border-radius:85px 20px 85px 20px / 85px 20px 85px 20px; <!-- セルの形変更 -->
}
.g_nav a {
color:#ffffff; <!-- 文字の色 -->
font-weight:bold; <!-- 文字の太さ-->
}
</style>
<nav class="g_nav">
<ul>
<li><a href="[クリックした時に飛ばしたいURL]">HOME</a></li>
<li><a href="[クリックした時に飛ばしたいURL]">予想</a></li>
<li><a href="[クリックした時に飛ばしたいURL]">データ</a></li>
<li><a href="[クリックした時に飛ばしたいURL]">about</a></li>
</ul>
</nav>
<!-- -->そのままコピペで行けると思います。ただ、[クリックした時に飛ばしたいURL]だけ書き換えてください。
