WordPressの無料テーマ Habakiri は「使いやい。カスタマイズしやすい。読み込みが早い。」と三拍子揃っているので、個人的によく利用していますが、オフキャンバスナビが閉じる時にアニメーションしないのがとても残念に感じるのは私だけでしょうか。
という事で、Habakiri のオフキャンバスが閉じる時にもアニメーションさせる簡単な方法を紹介します。
オフキャンバスが閉じる時にアニメーションさせる
Habakiri のオフキャンバスナビは、開く時にはアニメーションするのに、何故か閉じる時にはアニメーションしてくれません。オフキャンバスが閉じた状態にパッと切り替わります。
個人的にどうしても納得がいかなかったので、オフキャンバスが閉じる時にもアニメーションするようにカスタマイズしてみます。
こちらの「背景色や文字色をマウスオーバーでふわっと切り変える方法」という記事で紹介しているマウスオーバーや、今回のように状態が切り替わる場合のアニメーションは、CSSの transition: を使います。
「transition」プロパティを追加する
Habakiri の子テーマのCSSに transition プロパティを追加するだけ。
1 2 3 4 5 6 7 8 9 10 | /* ------------------------------------------------- オフキャンバスに transition: を設定 ----------------------------------------------------*/ .responsive-nav-contents, .off-canvas-nav { transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -webkit-transition: transform 0.3s ease-out; } |
上記のCSSにを追加するだけで、オフキャンバスが閉じる時にアニメーションするようになりました。やっぱり、ちょっとした部分でもアニメーションをさせると見た目が変わるので、WordPress のテーマに Habakiri を使う時は是非最初にやって欲しい設定です！
BootstrapベースのシンプルなWordPressテーマ – Habakiri
Bootstrapベースなので、レスポンシブデザインに対応しやすく、ベースデザインもシンプルでカスタマイズしやすいのが特徴。モジュールベースで設計されているので、慣れるとカスタマイズ効率が圧倒的に上がります。個人的には一番よく使わせてもらっているWordPressテーマです。
まとめ
オフキャンバスや、ナビゲーションメニューを含めて、サイトの見た目がテーマそのまんまだと面白みがないし「このサイト Habakiri 使ってんじゃん!」と思われるのも、なんだか良い気はしないですよね。
同じテーマを使うと、ナビゲーションメニューの見た目やオフキャンバスの動きがどうしても似てしまうので、テーマをカスタマイズする際には、全体的なカラーとあわせてナビゲーションメニューやオフキャンバスにも気を使ってみてください。他のサイトと違いが出しやすくなると思います。
「WordPressテーマ「Habakiri」のオフキャンバスが閉じる時にアニメーションさせたい!」でした。
