IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログテーマ Hyperspace Javascript 版 公開!

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

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

CSS

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

ダウンロード

ダウンロード

注意事項

  • 導入は自己責任でお願いします。
  • ただし、可能な範囲で対応しますので、コメント欄でお問い合わせください。
  • 独学プログラミングですので、誤りや問題点などありましたらご指摘ください。
  • ライセンスはそれぞれのファイルをご覧ください。
はてなブログのグローバルヘッダー=PC のヘッダーをモバイル用に変更する
Windows10, Plamo Linux, Ubuntu のマルチブート
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com