SWELLのグループブロックをリンク化！CSSで全体クリックする方法
2025.12.10
追記：SWELLに限らず、WordPressやHTMLで広く使える方法です！
標準ブロックにグループごとリンク化する機能が無いSWELLを対象に執筆しましたが、その他テーマはもちろん、静的HTMLサイトの制作時なども広く使える方法です！
CSSコードのコピペで快適なウェブ制作ライフを！
こんにちは。hakubi code 代表のてらだです。
SWELLを使っていると、画像やテキストをグループ化して、そのブロック全体をリンクにしたい場面ってありますよね。
おしゃれなカード型リンクを自作しようとして、SWELLの機能を探しても全体リンクの設定が見当たらず、困っていませんか？実はSWELLの標準機能では、ブロック全体をリンク化することはできません。
画像リンクの範囲を広げたり、ブログパーツでリンクを作ろうとして、うまく反映されない経験をした方も多いはず。
そこで今回は、CSSを使ってSWELLのグループブロックをまるごとリンクにする方法を解説します。リンクリストの使い方やリンクのテキスト色の調整も含め、自由自在に操れるようになります。
- SWELL標準機能だけで実現できるリンク表現の限界。
- CSSを使ってグループブロック全体をリンク化する具体的なコード。
- SEOやアクセシビリティを損なわない正しい実装手順。
- リンクが反応しない時やデザインが崩れる時の対処法。
【基本】標準機能でできること・できないこと
まずは、CSSでゴリゴリにカスタマイズする前に、SWELLが標準で持っている機能でどこまで対応できるかを見ていきましょう。
「本当は標準機能でやりたかった」という機能が、実は別の名前で用意されていることもありますからね。
ブロックごとのリンク設定は「非対応」
結論から言うと、現在のSWELLの仕様では、「グループブロック」や「カラムブロック」の全体を直接リンクにする設定項目は存在しません。
Elementorなどのページビルダープラグインや、Emanon Premiumなど一部の他社テーマでは「ラッパーリンク」や「パネルブロック」といった機能が用意されていることがありますが、SWELLはWordPress標準のブロック仕様を尊重しているため、標準機能として無理やり<div>を<a>タグで囲むような実装は採用していないんです。
もし、エディタ上で「グループ」を選択しても、ツールバーにリンクマークが出てこないのは、バグではなく仕様ですので安心してくださいね。「じゃあどうすればいいの？」という話ですが、まずは以下の標準機能を代用できないか検討してみましょう。
「リンクリスト」ブロックでの代用
テキストベースのリンク集を作りたいなら、無理にグループブロックで作るよりも、SWELL専用ブロックの「リンクリスト」を使うのが一番早いです。
リンクリストの特徴
- 親ブロック（リンクリスト）と子ブロック（リンクリスト項目）で構成される。
- デザインを「リスト型」や「ボタン型」から選べる。
- アイコンも簡単に設定可能。
サイドバーや記事下のナビゲーションを作るなら、これが最強です。ただ、画像とテキストを自由にレイアウトして、「このボックス全体をクリックさせたい！」というデザイン要望には応えられないのが弱点ですね。
「ブログパーツ」を活用した管理術
よく使うリンクの組み合わせや、デザインを作り込んだCTA（コール・トゥ・アクション）などは、「ブログパーツ」として登録しておくのがおすすめです。
ブログパーツ自体に「全体リンク」の機能はありませんが、一度登録しておけば、ショートコード一つで記事内の好きな場所に呼び出せます。「ブログパーツ リンク」と検索される方も多いですが、ブログパーツはあくまで「ブロックの塊を保存する機能」であって、リンク機能そのものを拡張するものではない点に注意してください。
ブログパーツ内でボタンブロックや画像ブロックに個別にリンクを設定し、それを使い回すというのが基本的な運用方法になります。
自作カード型のメリットとクリック率
それでもやっぱり、「画像・見出し・説明文」がセットになった、リッチなカード型リンクを自作したいですよね。
SWELLには「関連記事ブロック（ブログカード）」がありますが、これは実在する記事へのリンクしか作れません。「アフィリエイトリンクを目立たせたい」とか「LPへの誘導バナーを作りたい」という場合は、自分でブロックを組み合わせて作る必要があります。
グループブロックで自作できれば、背景色や枠線、影（ドロップシャドウ）などを自由にデザインできますし、何より「クリックできる面積が広い」というのは、スマホユーザーにとって大きなメリットになります。タップのしやすさは、そのままクリック率（CTR）の向上につながりますからね。
ちなみに、カード型デザインを作る際、画像の上に文字を重ねておしゃれに見せたい場合は、以下の記事も参考にしてみてください。カバーブロックなどを活用したテクニックを解説しています。
画像だけではクリック範囲が狭すぎる問題
「画像ブロック」にリンクを設定することは簡単ですが、そのリンク範囲はあくまで「画像の領域だけ」に限られます。
例えば、「画像＋テキスト」を縦に並べたデザインの場合、ユーザーは無意識に「テキスト部分」や「余白部分」もクリックできると思ってタップします。しかし、実際には画像しかリンクになっておらず、「あれ？反応しない？」とストレスを感じさせてしまうことがあります。
この「ユーザーが期待するクリック範囲」と「実際のリンク範囲」のズレを解消するために、次章で紹介するCSSテクニックが必要になってくるわけです。
【解決策】CSSで「全体クリック」を実現する手順
お待たせしました。ここからは、CSSを使ってグループブロック全体をリンク化する具体的な手順を解説します。プラグインなしで、コピペで実装できますよ。
仕組み：「Stretched Link」テクニックとは
今回使うのは、「Stretched Link（拡張リンク）」と呼ばれるテクニックです。Bootstrapなどの有名フレームワークでも採用されている、Web制作の現場では定番の手法です（出典：Bootstrap公式ドキュメント『Stretched link』）。
仕組みはシンプルです。
- 親要素（グループブロック）に
position: relative;を指定して、基準点にする。 - その中にある「リンク（aタグ）」の擬似要素（::after）を、親要素いっぱいに広げる（
position: absolute; inset: 0;）。
こうすることで、透明な膜がグループブロック全体を覆い、どこをクリックしてもリンクが反応するようになります。この方法の素晴らしいところは、HTML構造を汚さないことです。SEO的にも「ただのテキストリンク」として認識されるため、Googleからの評価も安心です。
コピペでOK！追加CSSクラスとコード
では、実際にSWELLで設定してみましょう。
設定手順
- エディタで「グループブロック」を作成し、中にコンテンツを入れる。
- グループ内に、必ず1つリンク（テキストリンク）を含める。
- 親の「グループブロック」の「追加CSSクラス」に
u-card-linkと入力。 - 中の「リンクを設定したブロック」の「追加CSSクラス」に
u-stretched-linkと入力。
そして、以下のCSSを「カスタマイズ」＞「追加CSS」に貼り付けてください。
/* 親要素（カード全体）のスタイル */
.u-card-link {
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
/* ホバー時の演出（お好みで） */
.u-card-link:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* クラスをつけたブロックの「中にあるリンク(aタグ)」を拡張する */
.u-stretched-link a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: auto; /* 明示的にクリックを受け付ける */
}これで、グループそのものをリンク化することができました！
↓ちゃんと機能していることを確認してみましょう。
リンク特有の「青文字・下線」を消す設定
リンクを設定すると、SWELLのデフォルト設定では「青文字」ですし、設定によっては「下線」が自動的についてしまいますよね。カード全体をリンクにする場合、この装飾がデザインの邪魔になることがあります。
これを直すのにCSSは必要ありません。WordPressの標準機能（ツールバー）だけで解決しましょう。
テキストの色を変える手順
- エディタ上で、リンクを設定したテキストを選択状態にする。
- 右側設定バーの「スタイル」アイコンをクリック。
- 「テキスト」から、色を選択する。
これで、リンク機能は残したまま、見た目は普通のテキストと同じ状態にできます。「CSSで無理やり色を消す」よりも、この方法なら「やっぱりここは赤文字にしたい」と思った時もエディタ上で直感的に変更できるのでおすすめです。
クリックできない時のチェックポイント
「設定したのにクリックできない！」「リンクが反映されない！」というトラブルが起きたときは、以下のポイントを確認してみてください。
よくあるトラブルと対処法
- z-indexの問題: 他の要素（背景画像や装飾など）がリンクの膜（::after）よりも上に来てしまっている可能性があります。
- position: relativeの忘れ: 親のグループブロックにクラス名
u-card-linkは正しく入っていますか？これがないと、リンクが画面全体に広がってしまったりします。 - 複数のリンクがある場合: 1つのカードの中に「カテゴリーへのリンク」など、別のリンクを含めたい場合、そのままだとクリックできません。別のリンクには
position: relative; z-index: 2;を指定して、透明な膜よりも上に配置する必要があります。
まとめ：ユーザビリティの高いリンクを作ろう
今回は、SWELLでグループブロック全体をリンク化する方法について解説しました。
標準機能ではできないカスタマイズですが、少しのCSS知識で、SEOにも強く、ユーザビリティの高いカード型リンクを作ることができます。JavaScriptなどを使って無理やり実装する方法もありますが、サイトの表示速度やメンテナンス性を考えると、今回紹介したCSS（Stretched Link）の手法が間違いなくベストプラクティスです。
ぜひご自身のサイトに取り入れて、クリック率の上がる魅力的な導線を作ってみてくださいね。