[Vaster2] ヘッダーナビゲーションをHTML/JavaScriptガジェットに変更しました

2021年04月08日更新

2018年10月02日公開

当サイトはアフィリエイト広告を使用しています

スマホのときのメニューバーは別のものを設置済みなので、ヘッダーナビゲーション（グローバルナビゲーション）に関しては簡単なリンクでいいかなと思っていました。なのでこれをページガジェットから HTML/JavaScriptガジェットに変更しました。コード<div class="header-navi"> <ul> <li><a href="https://sutasutashiki.blogspot.com/?max-results=10">ホーム</a></li> <li><a href="https://sutasutashiki.blogspot.jp/search/label/%E6%9A%AE%E3%82%89%E3%81%97?max-results=10">暮らし</a></li> <li><a href="https://sutasutashiki.blogspot.jp/search/label/DIY?max-results=10">DIY</a></li> <li><a href="https://sutasutashiki.blogspot.jp/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0?max-results=10">Bloggerカスタム</a></li> <li><a href="https://sutasutashiki.blogspot.jp/search/label/Vaster1.9?max-results=10">Vaster1.9</a></li> <li><a href="https://sutasutashiki.blogspot.jp/search/label/Vaster2?max-results=10">Vaster2</a></li> </ul> </div> <style> @media (max-width: 768px) { #HTML8{ display: none; } } .header-navi { width: auto; background-color: #2f4779; margin: 0 auto; padding: 10px 10%; } .header-navi ul { display:table; table-layout: fixed; text-align: center; width: 100%; padding: 0; } .header-navi li { display:table-cell; vertical-align: middle; } .header-navi li a{ color: #fff; } /* for IE11 ページナビ調整 */ _:lang(x)::-ms-backdrop, #HTML8 { margin: 0; } </style>IE11 でレイアウトが崩れたので _:lang(x)::-ms-backdrop, を使って調整しました。