はてなブログのテーマストアに投稿した「Hyperspace」の解説記事です。

Hyperspace – テーマ ストア

• デモサイト
• 概要
• CSSオンリーバージョン
  • 必須事項
  • 推奨事項
  • カスタマイズ
• Javascriptバージョン

01デモサイト

http://hyperspace.hatenablog.jp/

02概要

• Mobile First のレスポンシブデザインです。
• デスクトップでは、２カラム左サイドバーです。
• モバイルでは、トリガーアイコンをタッチすると左からサイドバーがスライドします。
• デザインイメージは、HTML5UP Hyperspace の配色など一部を取り入れています。
• スムーズスクロールなどのアニメーションには Javascript が必要ですので、Javascriptバージョンと CSSオンリーバージョンがあります。当サイトのテーマが Javascriptバージョンです。
• テーマストアに投稿したテーマは、CSSオンリーバージョンです。

03CSSオンリーバージョン

必須事項

• デザイン > カスタマイズ > フッタ に以下の HTML を入れてください。これを入れないとタブレット、スマホでサイドバーを表示できなくなります。

<ul class="trigger">
<li><a href="#container"><i class="blogicon-chevron-right"></i></a></li>
<li><a href="#"><i class="blogicon-chevron-left"></i></a></li>
</ul>

• デザイン > スマートフォン > 詳細設定 のレスポンシブデザインにチェックを入れてください。ただし、チェックを入れない場合でも、スマホの表示がはてなデフォルトになるだけでその他支障はありません。

推奨事項

• デザイン > カスタマイズ > サイドバー に HTML モジュールを追加し、以下の HTML を入れると HOME／TOP／BOTTOM のナビゲーションが表示されます。

<ul class="hsnavi">
<li><a href="http://ブログのアドレス"><i class="blogicon-home"></i></a></li>
<li><a href="#header-container"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="#bottom-editarea"><i class="blogicon-chevron-down"></i></a></li>
</ul>

• 追加する位置は一番上を推奨します。タブレット、スマホでは追加した位置に表示、デスクトップでは左下に固定です。

カスタマイズ

ヘッダ > タイトル画像は使用できません。

/* タイトル画像の変更 */
#blog-title {
  background-image: url('画像URL');
}


/* 左サイドバー背景色の変更 */
#box2 {
  background-color: 背景色;
}
#box2 .hatena-module ul.hsnavi li a {
  color: 背景色;
}
ul.trigger li:first-child a {
  background-color: 背景色;
}
ul.trigger li:last-child a {
  color: 背景色;
}


@media (min-width: 992px) {
  #box2 .hatena-module ul.hsnavi {
    background-color: 背景色;
  }
}

その他のカスタマイズについては、コメント欄でお尋ねください。

04Javascriptバージョン

当サイトが Javascriptバージョンです。 （2017/8）すでに違うテーマにかわっています。

導入方法は別記事に書く予定です。

（2016/6/22）Javascript版公開しました