コーディングふぇすてぃばる

うつ病ニート→貯金0 コーディングのお仕事してます!

【コピペ】はてなブログテーマ「Minimal Blue」にナビゲーション(カテゴリ)を出す方法

こんにちは。さやさんです。

 

先日、はてなブログのテーマ「Minimal Blue」を公開しました。

Minimal Blue - テーマ ストア

 

このテーマで、ナビゲーションバー(カテゴリ)を出す方法をご紹介します!

コピペして、カテゴリのURLや名前をお好きなものに差し替えるだけでOKです。

 

<!-- ここから追加 -->
<div class="navigation-lists-wrapper pc-style-none"><!-- PC用の表示のタグです、スマホ表示では消えます。 -->
<ul class="navigation-lists">
<li class="navigation-list">
<a href="#" class="navigation-link">プロフィール</a><!-- href="#"の""内にカテゴリのURLを入れる。「プロフィール」は実際に表示される文字 -->
</li>
<li class="navigation-list">
<a href="#" class="navigation-link">仕事</a>
</li>
<li class="navigation-list">
<a href="#" class="navigation-link">HTML</a>
</li>
</ul>
</div>

<div class="accbox sp-style-none"><!-- スマホ用の表示のタグです、PC表示だと消えます。 -->
<label for="label1"><span></span></label>
<input type="checkbox" id="label1" class="cssacc" />
<div class="accshow">
<p>
<a href="#">プロフィール</a><!-- PC版と同じようにURLとカテゴリ名を入れてください。 -->
</p>
<p>
<a href="#">仕事</a>
</p>
<p>
<a href="#">HTML</a>
</p>
</div>
</div>
<!-- /ここまで追加 -->

 

このタグの挿入場所

デザイン > カスタマイズ(スパナアイコンのタブ)> ヘッダ > タイトル下

 

に上のコードを挿入してください。

挿入すると右のデザインプレビューにナビゲーションが反映されると思います。

 

以上となります!