特徴
レスポンシブに対応した左側にサイドメニューが配置される2カラムのテーマです。人の目は左から右に視認していくため、左側にメニューや広告などを載せてクリック率を高めることを目的としています。デザインはナチュラルで自然な感じにしました。
またナビゲーションを設定することもできます。ナビゲーションに設定できるリンクは5つまでとなっております。
サイドメニューを右側にする場合
サイドメニューの位置はデザイン設定 → カスタマイズ → デザインCSSに下記のコードを追加することで変更可能です。
#main {
float: left;
}
#box2 {
float: right;
}
レスポンシブ設定（スマホにもデザインを適用する場合）
本テーマではスマートフォンにも対応していますが初期設定では、はてなブログが用意したスマートフォン用のデザインが使用されるようになっています。
管理画面からデザイン設定を行うことで、デフォルトのテーマから、本テーマを適用することができます。
デザイン → スマートフォン → 詳細設定 → レスポンシブデザインにチェックを入れて変更を保存する。
ナビゲーションの設定方法について
１．まずは下記のコードをデザイン設定→カスタマイズ→タイトル下の先頭に追加してください。
<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="リンク先URL１">リンク名１</a></li>
<li id="menu02"><a href="リンク先URL２">リンク名２</a></li>
<li id="menu03"><a href="リンク先URL３">リンク名３</a></li>
<li id="menu04"><a href="リンク先URL４">リンク名４</a></li>
<li id="menu05"><a href="リンク先URL５">リンク名５</a></li>
</ul></nav>3.2で設定したHTMLを1で追加したソースの下に追加するとナビゲーションの設定が完了します。
詳しくはこちらをご覧ください。
http://goo.gl/Ka2aL5
