IMUZA.com

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

ホーム / はてなテーマ / はてなブログテーマ Hyperspace を公開しました。

はてなブログテーマ Hyperspace を公開しました。

2016/06/7 はてなテーマ, はてなブログ

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

Hyperspace – テーマ ストア


  • デモサイト

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

デモサイト

http://hyperspace.hatenablog.jp/

概要

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

CSSオンリーバージョン

必須事項

  • デザイン > カスタマイズ > フッタ に以下の 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: 背景色;
  }
}

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

Javascriptバージョン

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

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

(2016/6/22)Javascript版公開しました

スクリプトなし :target でアニメーションをスタートさせる
Flexbox = IE9 を捨てさえすればレイアウトが圧倒的に楽になる
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