はてなブログテーマ Hyperspace Javascript 版 公開！

はてなブログ テーマストアに投稿した Hyperspace の Javascript 版（以下、JS 版）の解説記事です。当サイトがそのテーマの導入サイトです。（当サイトはすでに他のテーマに変わっています） なお、以下、テーマストア投稿のテーマは、CSS 版と表記します。

• 
  CSS 版 との違い

• 導入方法
  • Javascript
  • CSS
• ダウンロード
• 注意事項

CSS 版 との違い

• サイドバーは固定されています。
• サイドバーに表示されるコンテンツはメインコンテンツの内容によって変化します。
  • トップページ → 最新記事
    これは、サイドバーのモジュールではなく、実際にトップページに表示されているタイトルをリンク付きで表示します。タイトルをクリックすると該当記事までスムーズスクロールします。また、「次のページ」「前のページ」を表示します。
  • 各記事ページ → サイドバーの「関連記事」モジュール
    したがって、カスタマイズ > サイドバーに「関連記事」モジュールを追加しておく必要があります。
    以下、各サイドバーモジュールについては、同様にサイドバーに追加しておく必要があります。
  • カテゴリーページ → サイドバーの「カテゴリー」モジュール
  • 月間アーカイブページ → サイドバーの「月間アーカイブ」モジュールのカレンダー表示
  • プロフィールページ → サイドバーの「リンク」モジュール
• サイドバーに「トップページ」「ページトップ」「サイドバー（#box2）」へのリンクが常時表示されます。
• サイドバーに表示されるリンクのうち、ページ内リンクはスムーズスクロールします。
• サイドバーには遅延アニメーションがかけてあります。

導入方法

GitHub の右上「Clone or download」から zipファイルをダウンロードして解凍してください。次のファイルが含まれています。

• hyperspace.css
• hyperspace.js
• hyperspace.min.js
• README.md

Javascript

カスタマイズ > フッタ に次の HTML を入れてください。

<div id="nav-panel">
  <div id="panel-inner">
  </div>
</div>
<div id="trigger"></div>


<script>
document.body.classList.add('loading');
document.addEventListener('DOMContentLoaded', function() { document.body.classList.remove('loading'); });
</script>


（注）ここにダウンロードした hyperspace.min.js を入れる。

• #nav-panel は、デスクトップでは左ブロックになり、モバイルでは #trigger アイコンクリックによりスライドします。
• <script></script>内の２行は、アニメーションのトリガーです。アニメーションが必要のない場合は削除してください。
• hyperspace.min.js の入れ方は、<script></script>タグでくくって入れるか、Dropbox の public フォルダなどを利用して外部ファイルとして読み込むかどちらかです。外部ファイルとして読み込む場合は次のように入れてください。

<script type="text/javascript" src="外部ファイルのurl/hyperspace.min.js" charset="utf-8"></script>

CSS

カスタマイズ > デザインCSS にダウンロードファイルをそのまま入れてください。

ダウンロード

ダウンロード

注意事項

• 導入は自己責任でお願いします。
• ただし、可能な範囲で対応しますので、コメント欄でお問い合わせください。
• 独学プログラミングですので、誤りや問題点などありましたらご指摘ください。
• ライセンスはそれぞれのファイルをご覧ください。