Cocoonのトグルボックスの開閉速度を変える方法

WordPressテーマ「Cocoon」にデフォルトで搭載されているトグルボックス。

 

コンテンツの表示/非表示を切り替えられます。アコーディオンって呼ぶ人もいるかも。

 

記事がすっきり見えるのでとても便利なのですが、デフォルトだと開閉に0.7秒かかるようになっていて、若干もっさりして遅く感じるんですよね。

 

妻

0.7秒だとちょっと遅いかも

 

なのでちょっとCSSいじって速くしてみました。

 

ほんとに全然大したことやってないんですが、ググってもすぐに出てこなかったので一応Web上に知見は残しておこうかなと。。。

 

CSSコード(コピペOK)

次のCSSをCSS編集欄に貼り付けて、数字のところを変えれば速度を変えられます!

.toggle-wrap .toggle-content {
transition: all 0.7s ease;
}

.toggle-checkbox:checked ~ .toggle-content {
transition: all 0.7s ease;
}

 

田中
田中

0.2ぐらいが好みかな

さいごに

速度もだけど、トグルボックスのデザインももう少し変えてみたいところです。

が、デザインに凝りすぎると深みにはまるのでとりあえず今回はこれくらいで。

それではまた。

ブログ運営
アーカイブ
この記事を書いた人
田中

「日常に添えるちょっとしたアクセント」をテーマに発信しています。
ホームシアターの作り方。スパイスからのカレー作り。役に立たない話などなど。

フォローして新着情報をチェック
田中ともうします。
タイトルとURLをコピーしました