2022年7月8日 / 最終更新日 : 2025年1月28日対馬俊彦 WordPress

VK アコーディオンのトグル部分のカスタマイズ例

この記事は、ベクトルが開発している WordPress プラグイン VK Blocks Pro の VK アコーディオンブロックのカスタマイズについて書いたものです。

デフォルト状態の VK アコーディオン

デフォルト状態のトグル部分 (右端に表示されているもの) は以下のようにやや控えめです。

アコーディオンとはなんですか？

ウェブページなどで項目をクリックするとその場で広がって追加情報を表示するしくみのこと。画面内に多くの項目を一覧表示できて、質問の回答や詳しい内容を画面の切り替えなどをせずに表示できるので、便利なユーザーインターフェースである。

そこで、カスタマイズして目立つようにしてみました。

カスタマイズ例 (1)

トグル部分を大きくして、キーカラーにしてみました。

アコーディオンとはなんですか？

カスタマイズ例 (2)

トグル部分を丸くして、白抜きにしてみました。

アコーディオンとはなんですか？

カスタマイズ例 (3)

トグル部分を Font Awesome のアイコンにしてみました。(アイコンを切り替え)

アコーディオンとはなんですか？

カスタマイズ例 (4)

トグル部分を Font Awesome のアイコンにしてみました。(アイコンを回転)

アコーディオンとはなんですか？

カスタマイズ例 (5)

アコーディオンのデザインを角丸・白抜きにしてみました。

アコーディオンとはなんですか？

弊社ではこのようなカスタマイズのお手伝いもしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズできます。
このようなアコーディオンの作り方を知りたい方に、
Zoom で画面共有してわかりやすく説明させていただくこともできます。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

魚沼情報サービスへのお問い合わせ

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら