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

2016.06.22 はてなブログ, テーマ

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

CSS 版との違い
導入方法
- Javascript
- CSS
ダウンロード
注意事項

01CSS 版との違い

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

02導入方法

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 にダウンロードファイルをそのまま入れてください。

03ダウンロード

ダウンロード

04注意事項

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

#javascript, #はてなテーマ, #はてなブログ

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

01CSS 版 との違い