この記事は Vektor WordPress Solutions Advent Calendar 2025 の12月15日の記事です。
こんにちは、魚沼情報サービスの対馬俊彦です。
石川さんの昨日の記事「めちゃめちゃ便利だけど使ってます？ VK Blocks の便利機能紹介！ nowrap編」、ご覧になりましたか。たしかに、画面サイズ毎の改行を使うよりも nowrap で分割した方が変な位置で改行される心配がなくなっていいですね！
それでは、石川さんの記事に続いて12月15日の記事を書きます。
WordPress コアにアコーディオンブロック登場
今月リリースされた WordPress 6.9 でアコーディオンブロックが追加されました。
ベクトル製品のユーザーは VK Blocks Pro のアコーディオンブロックを使っていることが多いと思いますが、WordPress コアにアコーディオンブロックが追加されたことで、どっちを使えばいいのかな？と気になっている方のために、2つのアコーディオンブロックを比較して、どんな違いがあるのかをまとめてみました。
カスタマイズできる内容については、（CSS などを使わずに）ノーコードでできる範囲内という前提で比較しています。
この記事に書いた内容は、2025年12月に WordPress 6.9 ＋ Lightning 15.32.4 ＋ VK Blocks Pro 1.115.0.0 の環境で比較を行った結果です。今後のアップデートによりできることが増えるかもしれません。
ブロックを追加した直後のスタイル比較
VK Blocks Pro のアコーディオンブロック
ブロックを追加しただけの状態だと、スタイルは以下のようにシンプルです。
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
WordPress コアのアコーディオンブロック
こちらもブロックを追加しただけの状態だと、スタイルは以下のようにシンプルです。
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
デフォルトのスタイルを比較した結果
どちらもシンプルでアコーディオン動作をすることに気がつきにくいかもしれませんので、スタイルをカスタマイズして使うのがいいように思います。
スタイルのカスタマイズ手順の比較
VK Blocks Pro のアコーディオンブロック
以下の7つのスタイルが用意されていて、この中から選ぶようになっています。
- 背景なし（ブロックを追加した状態がこれ）
- 背景なし / 枠線
- 背景あり
- 背景あり / 枠線
- 背景あり / 角丸
- 背景あり / 角丸 / 枠線
- 装飾無し
背景なし / 枠線
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
背景あり
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
背景あり / 枠線
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
背景あり / 角丸
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
背景あり / 角丸 / 枠線
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
装飾無し
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
最後の「装飾無し」は CSS でカスタマイズする人向けですね。
VK Blocks Pro のアコーディオンブロックは、次に説明する WordPress コアのアコーディオンブロックのようにスタイルを自由にカスタマイズできるようにはなっていません。
WordPress コアのアコーディオンブロック
VK Blocks Pro のアコーディオンブロックのようにプリセットされたスタイルは用意されていません。
ブロックエディターでおなじみのスタイル編集画面が用意されていて、お好みでスタイルを設定するようになっていますが、スタイル編集画面に慣れていないと操作に戸惑うかもしれません。
スタイル編集画面を使ってカスタマイズした例です↓。
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
カスタマイズ手順を比較した結果
VK Blocks Pro はかんたんでわかりやすいのが特長です。スタイル編集画面を使い慣れていてデザインにこだわりたいときは WordPress コアのアコーディオンブロックを使うのがいいでしょう。
便利な機能の比較
VK Blocks Pro のアコーディオンブロック
① ブロックを組み合わせたタイトルを作ることができる
タイトル部分にブロックを自由に組み合わせることができます。
例えば以下のように、横並びブロックと VK アイコンブロックを追加して、タイトルの先頭にアイコンを表示できます。
アコーディオンとは何ですか？
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
② デバイスごとに初期状態を設定できる
モバイル、タブレット、PC のそれぞれについてアコーディオンの初期状態を設定できます。
例えば図のように、画面幅が小さいモバイルではアコーディオンを閉じておいて、タブレットや PC では最初から開いておく、ということができます。
WordPress コアのアコーディオンブロック
① ブロック内に複数のアコーディオンを持つことができる
アコーディオンブロックの中に複数のアコーディオン項目を持つことができます。
この階層構造を持つことにより、下記 ②・③ の機能が実現されています。
② 排他的にアコーディオンを開閉できる
自動で閉じる を有効にすることにより、アコーディオンを開いたときに自動的に残りのアコーディオンを閉じることができます。
③ 見出しレベルを設定できる
アコーディオン見出しの見出しレベルを指定できます。ページの先頭に目次を置きたい場合にこれはありがたい機能ですね。
VK Blocks Pro でもアコーディオンタイトルに見出しブロックを置くことで目次に対応できますが、WordPress コアのアコーディオンは一括指定できるので使いやすいです。
④ アイコンを先頭に表示できる
アイコンの位置を左（先頭）に指定することができます。
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
好みにもよりますが、アイコンが先頭にあるとアコーディオンであることに気がつきやすいと思います。
このように↓アイコンを表示しないこともできます。
クリックすると隠れていた詳細なコンテンツが縦に展開し、もう一度クリックすると折りたたまれるユーザーインターフェースで、楽器のアコーディオンのように開閉する様子から名付けられ、限られたスペースで多くの情報を整理して表示できるため、FAQページやスマホサイトなどでよく使われます。
これはたぶん、CSS でカスタマイズして＋以外のアイコンを表示するケースを想定しているのだと思います。
便利な機能を比較した結果
どちらも使用するケースに応じて役に立つ機能を持っていますので、お好みで使い分けるのがいいですね。欲を言えば、上記のすべての機能を持ったアコーディオンブロックが理想ですけど...😊
アドベントカレンダーの明日の記事はベクトルスタッフの松田さんによる VK FullSite Installer「製造業デモサイト」を作ってわかった！サイトの信頼は「構成・導線」で作りやすくなる です。この製造業のデモサイト、とんでもない完成度なので記事が楽しみです。
アドベントカレンダーへのご参加をお待ちしています！
アドベントカレンダーの枠がまだ空いてます。
「書いてみたいかも...」「これなら話せるかも？」って思ったら、ほんとに気軽に参加してOKです。
いっしょにカレンダー盛り上げてくれる人、待ってます〜！
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
VK Blocks Pro2025年12月31日見出しの背景に文字を重ねた例 ＋ スクロールしたらアニメーションで表示
VK Blocks Pro2025年12月15日アコーディオンブロックの比較 - VK Blocks Pro vs WordPress コア
VK Blocks Pro2025年5月27日投稿一覧から特定のカテゴリーを除外したカスタマイズ例
WordPress2025年2月21日シンプルなブログ検索フォーム
