概要
紺色ストライプを基調としたシンプルなレスポンシブデザインテーマです。2カラム。
レスポンシブデザインを有効にするには、ダッシュボード>デザイン>スマートフォン>詳細設定の レスポンシブデザインにチェックを入れて下さい。
サンプルブログ:サンプルエントリー - テーマStripeの使い方
スタイル指定済み
ナビゲーションメニュー、見出し、ページャ、シェアボタン、「読者になる」ボタン、Topへ戻るボタン、パンくずリスト、「コメントを書く」ボタン、「続きを読む」ボタン、PRE(ソースコード用)
これらのデザインはスタイル指定済みです。ナビゲーション、各種ボタンはHTMLをデザイン>カスタマイズで追加するだけで設置できます。
ピンクにカスタマイズ
ピンクでまとめたカスタマイズ用コードを用意しました。
こちらの記事をどうぞ。
ピンクストライプでガーリーにカスタマイズ(訂正あり) - Minimal Green
ナビゲーションメニューの設置
以下のコードをデザイン>カスタマイズ>ヘッダ>タイトル下へ追記。(リンク1~3、サブメニュー1~3、URLは各自変更してください)
<ul id="nav-menu"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <!-- 端末ごとに表示する項目を調整 --> <li class="nav-menu-hidden-phone"><a href="#">スマートフォンで非表示</a></li> <!-- 右端の残りのドロップダウンメニュー --> <li class="hover-click"><a href="#"><i class="blogicon-reorder"></i>More</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> </ul> <!--jQueryを使用--> <script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script> $(function() { var contents = $(".hover-click > ul"); $(".hover-click > a").click(function(){ $(contents).toggle(); return false; }); $(".hover-click") .mouseover(function(){ $(contents).show(); }) .mouseout(function(){ $(contents).hide(); }); }); </script>
このナビゲーションメニューについては次の記事を参考にして下さい。
見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり) - Minimal Green
「Topへ戻る」ボタン
ダッシュボード>デザイン>カスタマイズ>フッタに以下のコードを追加
<p class="pagetop"><a href="#"><i class="blogicon-chevron-up"></i></a></p> <script type="text/javascript"> $(document).ready(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 700) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>
真ん中寄せ(センタリング)
タイトル下やフッターに画像やバナーを真ん中寄せに配置するときは
<div class="center"></div>
で囲んで下さい。
問い合わせ
質問、不具合、カスタマイズについては↓のブログまで。
Minimal Green
更新情報
2016/11/12 サイドバーに広告を貼る場合を考慮して、サイドバーと、メイン記事幅のpaddingを変更しました。
サイドバーには300px幅の広告を貼ることが出来ます。
2016/11/13 .pager( 次へのボタン)のスタイルを変更しました。」
お問い合わせ
テーマに対するご質問は各デモブログのコメント欄にお願い申し上げます。(メールフォームからの無料のご質問にはお答えできません)