特徴
レスポンシブに対応した2カラムのテーマです。
青を基調にしたシックでシンプルなデザインです。サイドメニューのリストにはクリスタルのアイコンが装飾されます。
ナビゲーションをつけることができます。ナビゲーションは5つ設定してください。
レスポンシブ設定(スマホにもデザインを適用する場合)
本テーマではスマートフォンにも対応していますが初期設定では、はてなブログが用意したスマートフォン用のデザインが使用されるようになっています。
管理画面からデザイン設定を行うことで、デフォルトのテーマから、本テーマを適用することができます。
デザイン → スマートフォン → 詳細設定 → レスポンシブデザインにチェックを入れて変更を保存する。
ナビゲーションの設定方法について
1.まずは下記のコードをデザイン設定→カスタマイズ→タイトル下の先頭に追加してください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $("#nav_menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 480; if(win > p){ $("#nav_menu").show(); } else { $("#nav_menu").hide(); } }); }); </script>
2.下記のナビゲーション用のHTMLにナビゲーションに設定したいURLとリンク名を設定してください。
※下記ソースの「リンク先URL」と「リンク名」を変更してください。
<nav class="clearfix"> <div id="toggle"><a href="#">メニュー</a></div> <ul id="nav_menu"> <li id="menu01"><a href="リンク先URL1">リンク名1</a></li> <li id="menu02"><a href="リンク先URL2">リンク名2</a></li> <li id="menu03"><a href="リンク先URL3">リンク名3</a></li> <li id="menu04"><a href="リンク先URL4">リンク名4</a></li> <li id="menu05"><a href="リンク先URL5">リンク名5</a></li> </ul></nav>
3.2で設定したHTMLを1で追加したソースの下に追加するとナビゲーションの設定が完了します。
詳しくはこちら(ご要望やご質問もこちらへ)
http://goo.gl/Tct2rc