SteamPunkテーマ デモ

イラストや写真ブログ向けのテーマです

MENU

ナビゲーションの付け方

このテーマはヘッダー下にナビゲーションを設置できます。

ナビゲーションの設置方法

設定→詳細→headに要素を追加(既に追加済なら省略)

f:id:AzuLitchi:20190203181230p:plain

の箇所に、下記の「jQueryを読み込むコード」を追加します。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

タイトル下に下記のコードを貼りつけます。

<span id="nav-toggle"><i class="blogicon-reorder lg"></i> MENU</span>
<div id="nav-inner">
<ul id="nav">
<li><a href="url1">リンク1</a></li>
<li><a href="url2">リンク2</a></li>
<li><a href="url3">リンク3</a></li>
<li><a href="url4">リンク4</a></li>
<li><a href="url5">リンク5</a></li>
<li><a href="url6">リンク6</a></li>
</ul>
</div>
<script>
$(function(){
$("#nav-toggle").click(function (){
$("#nav").slideToggle();
});
});
</script>

リンク名とURLは適宜書き換えてください。

リンク名はタグ名と一致していなくても良いので、あまり長すぎない方がいいです。

タグ名が短ければ8個くらい設置できると思います。

 

PCではヘッダ下にメニューが横並びになりますが、スマホで見るとハンバーガーMENUをタップしたらタグ一覧がトグル表示されます。

f:id:AzuLitchi:20190205202410p:plain

このテーマcssではカテゴリーをタブとして扱うことを前提としているため、サブメニューには対応していません。

cssが分かる方であればカスタマイズでサブメニューを付けると良いです。

Copyright © AzuLitchi All rights reserved.