管理画面>デザイン>カスタマイズ>ヘッダ>タイトル下に以下のコードを追加してください。「URLを入力」のところは
各自のURLに書き換えてください。FontAwesomeを導入していない方は導入して下さい。
最後の閉じるのリストはPC版は非表示ですが、スマートフォンで必要なので最後はそのままにして下さい。
※訂正があります:2018/3/11にグラデーションメニューを導入した方は以下のコードに張り替えて下さい。
FontAwesomeの呼び出し
headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
タイトル下に貼るHTML
<style> /* ヘッダーの余白調整 */ #blog-title { margin: 0 auto; text-align: center; padding: 2rem 0 1.5rem; } @media (max-width: 767px) { #blog-title { padding: 1rem 0; } } </style> <div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div> <!-- Navigation --> <nav id="slide-menu"> <ul> <li><a href="URLを入力">Top</a></li> <li><a href="URLを入力">About</a></li> <li><a href="URLを入力">Profile</a></li> <li><a href="URLを入力">Category</a></li> <li><a href="URLを入力">Link</a></li> <li><div class="menu-close"><i class="fa fa-window-close fa-fw" aria-hidden="true"></i>閉じる</div></li> </ul> </nav> <script> (function() { var $body = document.body , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0] , $menu_close = $body.getElementsByClassName('menu-close')[0]; if ( typeof $menu_trigger !== 'undefined' ) { $menu_trigger.addEventListener('click', function() { $body.classList.toggle('menu-active'); }); } if ( typeof $menu_close !== 'undefined' ) { $menu_close.addEventListener('click', function() { $body.classList.remove('menu-active'); }); } })(); </script>
参考リンク:
iOS style sliding menu
JSは↑を参考にこのテーマ用にアレンジしています。