こにちわ☆本多です。
スマホ表示にグローバルナビゲーションを設置しました！
ポイントは、「最初の記事から読む」と、ページ下にある「注目記事」へ飛ばすリンクです♡
スマホで「お！」と気になるブログを見つけた時、最初から読むのが大変だったのですよ……。
参考にさせていただいたのは、こちらの2サイト。ありがとうございます！！
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！ ｜ Kana-Lier カナリエ
私の動作環境だとナビがずれてしまったので、少しCSSをいじりました。
スタイルシートはこちら。
「ダッシュボード→設定→詳細設定→headに要素を追加」 に記載！
<style type="text/css">
<!--.g_nav ul {
display:table;
table-layout: fixed;
margin:5px 0; /*外側の余白、上下5px 左右余白なし*/
padding:0; /*内側の余白解除*/
width:100%; /*横幅を画面いっぱいに*/
}
.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 {
display:block;
color:#ffffff; /*ナビの文字色*/
font-size:80%; /*ナビの文字サイズ*/
}-->
</style>
HTMLはこちら。
「デザイン→スマートフォン→ヘッダ→タイトル下」 に記載！
<nav class="g_nav">
<ul>
<li><a href="最初の記事のURL">最初から</a></li>
<li><a href="#footer-action">注目記事</a></li>
<li><a href="http://ブログURL/archive/category/カテゴリ名１">カテゴリ名１</a></li>
<li><a href="http://ブログURL/archive/category/カテゴリ名２">カテゴリ名２</a></li>
</ul>
</nav>
「最初から」は、最初の投稿記事のURLで対処。
「注目記事」は、ページ下部にあったid要素に飛ばす、やっつけ対応です＾＾
注目記事へのリンク先は【#bottom-editarea】でも可。
正確に飛ばしたい場合は、フッターにアンカーを設置してください☆彡
ページ内の特定の場所へジャンプさせるリンクの張り方 | レンサバネット
まだまだ記事数が少ないですが、ユーザビリティが良くなれば嬉しいです。
それでは～！
スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック
- 作者: 株式会社アジタス
- 出版社/メーカー: エムディエヌコーポレーション（MdN）
- 発売日: 2012/12/17
- メディア: Kindle版
- この商品を含むブログを見る