IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

2023/07/28

WordPress:シングルページにループはいらない

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com