【WPプラグイン配布】ブロック丸ごとボタン化もできるカード表示プラグイン
2026.01.21
はじめに
前回の記事では、AIを相棒にプラグインを開発した裏話をお届けしました。 今回は、見た目スッキリ！ブロック丸ごとボタン化できるカード表示プラグインですよ！
今まで画像にリンクを貼ったり、文字をリンク化したりしてた方必見！！！
我ながら作って良かったと思うプラグインです！
こんな機能追加して！とか言う方は、まず自分でAIを相棒に修正してみてください！
プラグインをダウンロード
Digital Onion Card Blocks 使い方ガイド
Plugin Version 1.1.0 / Author: Awaji_Tamao
1. ブロックの追加方法
WordPressの投稿・固定ページ編集画面（ブロックエディタ）で、「カードボタン」ブロックを選択します。
- ブロック名: カードボタン
- カテゴリ: デザイン
- 特徴: ブロックの中に、テキスト・画像・見出しなど他のブロックを自由に配置でき、全体を1つの大きなリンクボタンとして出力します。
2. リンクの設定（右サイドバー）
配置したブロックを選択すると、エディタ右側のサイドパネルに設定項目が表示されます。
リンク設定パネル
- リンク先URL: カード全体をクリックした際の遷移先URLを入力します。
- URL未設定の場合: リンク機能が無効化され、通常の見出し付きボックスとして表示されます。
3. 表示仕様とスタイル
リンクの有無によって、フロントエンドでの挙動と見た目が自動的に切り替わります。
リンクあり（URL入力時）：
- マウスを重ねると上に 7px 浮き上がり、影が濃くなります。
- カード内のテキスト（段落・見出し等）の色は、テーマのリンク色ではなく自動的に黒系統（#333）に統一されます。
リンクなし（空欄時）：
- ホバー時のアニメーションは発生せず、静的なカードとして表示されます。
- 管理画面上では「※URL未設定」と赤い警告が表示されますが、実際のページでは表示されません。
💡 活用のポイント
- バナー作成に: カード内に「画像」と「見出し」を入れるだけで、プロフェッショナルなクリック誘導バナーが作成できます。
- デザインの統一: 複数のカードを「カラム」ブロックの中に並べることで、サービス紹介などのグリッドレイアウトが綺麗に整います。
- アクセシビリティ: リンク設定時はHTML構造が
<a> タグに、未設定時は <div> タグに自動で最適化されます。
まとめ
見た目重視！次に機能！
シンプルなプラグインですが、こういうの使いたい人けっこういるんじゃないかと。
段落ごとにカードで区切るとけっこうスッキリしますよ！
こちらもAIで作ったもの。
時間のある人はページのカスタマイズで迷ったら、AIに相談すれば、かなりの確率で解決出来ちゃいますよ！
実は不具合あるんや。
リンクが入ったブロックを設置したら表示が崩れるねん。
修正しなければ(汗)
問い合わせ
※過去記事の誤報や削除依頼は随時受け付けております。
戻るから押してみ！！
