読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ

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



f:id:ausnichts:20160622134058j:plain

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>内の2行は、アニメーションのトリガーです。アニメーションが必要のない場合は削除してください。
  • hyperspace.min.js の入れ方は、<script></script>タグでくくって入れるか、Dropbox の public フォルダなどを利用して外部ファイルとして読み込むかどちらかです。外部ファイルとして読み込む場合は次のように入れてください。
<script type="text/javascript" src="外部ファイルのurl/hyperspace.min.js" charset="utf-8"></script>

CSS

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

ダウンロード

ダウンロード

注意事項

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