IMUZA.com

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

ホーム / CSS / はてなブログテーマ hyperspace (2)

はてなブログテーマ hyperspace (2)

2016/04/18 CSS, javascript, はてなテーマ, はてなブログ

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の2回めです。

まず、テーマ名を決めないと記事が分かりにくいですね。元デザインの名前「hyperspace」をそのまま使って作っていきます。

左サイトバー

はてなブログでは、カスタマイズ > サイドバーに表示するモジュールは id=“box2” の要素内に入ります。javascript を使わないで左サイドバーを実現するには、この box2 を左にフロートするなどの方法しかないのですが、それではつまらないですし、そもそも前回の構想を実現しようと思えば、javascript の使用は避けられませんので、次のようにしようと思います。

  • ヘッダー、メインコンテンツ、はてなサイドバー全て1カラムとする
  • 設定 > フッタに左サイドバー用 html & javascript を挿入し、nav-panel として制御する
  • モバイル、タブレットでは、ナビ用アイコンをタッチすることで左から nav-panel がスライドするようにする
  • デスクトップでは、横幅30%程度のパネルを固定とする
    ヘッダー、コンテンツなどは同じ幅の左マージンを取る

javascript なしのアニメーション(nav-panel のスライド)トリガー

はてなブログテーマストアで公開している他のテーマでも使っているのですが、input checkbox 要素の :checked で on off させる方法を使えば、javascript なしでアニメーションをスタートさせることができます。

まず、フッタに次の html を入れます。

<div id="nav-panel">
<input id="trigger" type="checkbox" />
<div id="panel">
    <label for="trigger"></label>
    <div id="panel-inner">
        
    </div>
</div>
</div>

label を input と離しているのは、checkbox の on off で label のアイコンもアニメーションさせるためです。

#nav-panel {
  position: fixed;
  top: 37px;
  left: 0;
}
#nav-panel #trigger {
  display: none;
}
#nav-panel #panel {
  width: 80vw;
  height: 100vh;
  overflow-y: auto;
  background: #312450;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#nav-panel #panel label {
  display: block;
  position: absolute;
  bottom: 70px;
  cursor: pointer;
  border-radius: 0 30px 30px 0;
  background: rgba(49, 36, 80, 0.8);
  z-index: 2;
  padding: 30px;
  box-sizing: border-box;
}
#nav-panel #panel label:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 28px;
  width: 5px;
  transform: rotate(-45deg);
  height: 25px;
  border-radius: 5px;
  background: #fff;
  transition: all .5s ease;
}
#nav-panel #panel label:after {
  content: "";
  position: absolute;
  top: 25px;
  left: 28px;
  width: 5px;
  transform: rotate(45deg);
  height: 25px;
  border-radius: 5px;
  background: #fff;
  transition: all .5s ease;
}
#nav-panel #panel #panel-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 100%;
}
#nav-panel #trigger + #panel {
  max-width: 0;
  overflow: hidden;
}
#nav-panel #trigger:checked + #panel {
  max-width: 80vw;
}
#nav-panel #trigger:checked + #panel label {
  background: rgba(94, 66, 170, 0.8);
}
#nav-panel #trigger:checked + #panel label:before {
  transform: rotate(45deg);
}
#nav-panel #trigger:checked + #panel label:after {
  transform: rotate(-45deg);
}
.globalheader-off #nav-panel {
  top: 0;
}

css が何か抜けているかもしれませんが、これを適用したものが以下のサイトです。

hyperspace.hatenablog.jp

javascript を使ってトリガーにした方がいいのかもしれませんが、こんな方法もあるということでやってみました。

ただ、いずれにしても nav-panel に入れるコンテンツは javascript を使うしかありませんから、次はクリックイベントを使ってやってみましょう。

続く。

はてなブログテーマ=HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?(1)
ページによる振り分け、動的に DOM要素を作る=はてなブログテーマ hyperspace (3)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

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

Another Sites

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

Contact Us

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

Copyright © 2022 · IMUZA.com