ハシビィくんSWELLのリッチカラムにリンク機能を設定したいっす！
カピーさん標準機能としてはないが、実現する方法があるから紹介しよう。
目次
リッチカラムにURLリンクを設定する方法
まずSWELLの「リッチカラム」を使用したベースを用意します。
STEP
リッチカラムを選択
STEP
リッチカラムにカバー（標準機能）を選択
STEP
カバーにテキストを入力
STEP
カバーにカスタムHTMLを追加
上の画像のように左右に画像とテキストを使用した状態でリッチカラム全体にURLリンクを設定したい場合は、3つ目のカラムにカスタムHTMLを使用。
STEP
カスタムHTMLに下記コードを入力
<a href="リンク設定したURLを入力" class="column-link" style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;"></a>もちろんstlyeタグを使わずにCSSで追加でカスタマイズすることも可能だ。
.column-link{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}プラグインなしでもカラムにリンクは設定できる
WordPressのプラグインには、特定の箇所にリンクを設定するものがあります。ですが、今回紹介した方法でもリンクとして機能を持たせることは十分可能です。
プラグインはできるだけ少ないに限ります。私個人の見解としては、1人で運営・保守をしていくならプラグインは必要最低限に留めるのがベストだと考えています。
今回の方法としても、そこまで作業工数としては多くありません。興味がある人は、まずは下書き状態で試してみるといいかもしれません。
WordPress.org 日本語
Gutenberg Block Editor Toolkit – EditorsKit
EditorsKit provides a set of page building tools to supercharge the WordPress Gutenberg block editor.
プラグインで有効にしたい場合は上記プラグイン『EditorsKit』が人気です。頻繁に活用しないのであれば、プラグインなしで対応するのがおすすめです。
コメント（承認制）
コメント一覧 （2件）
たびたび参考にさせていただいております
ありがとうございます
今回のこちらの記事について、横2列のリッチカラムに対して実施したところ
右側に設定したリンクが、両方に適用される結果となりました
私の設定が何かおかしいのでしょうか
現在は、リッチカラムの画像のテキスト直前にカスタムリンクを配置して、テキスト部だけがリンクされるようにしています。画像全体へのリンクはできませんが、少なくともテキスト部にはそれぞれのリンクを設定できています
ただ、本当は画像全体にリンクを設定できたらと思っており、もし私の設定が間違っているならご教示いただけないかと思い、コメントさせていただきます
コメントありがとうございます。
記事の方法自体で「左右それぞれ別リンク」にすることは可能なので、恐らくリンクを配置している位置が少し違っている可能性があります。
この方法は、リッチカラム全体ではなく「各カラムの中」にカスタムHTMLを入れる必要があります。
もしリッチカラムの親ブロックや外側に を入れてしまうと、カラム全体を覆うリンクになってしまうため、結果として左右両方に同じリンクが適用されてしまいます。
そのため、例えば下記のように
・左カラム → カスタムHTML（左のリンク）
・右カラム → カスタムHTML（右のリンク）
という形で、それぞれのカラム内にHTMLを配置していただくと、個別リンクとして動作するはずです。
もし可能でしたら
・現在のブロック構造（カラム内にHTMLを入れているか）
・HTMLを配置している位置
などを教えていただければ、もう少し具体的に原因を確認できると思います。
また、もし「うまく再現できない」「設定が難しい」という場合は、WordPress / SWELLのカスタマイズのご相談も受け付けていますので、お問い合わせからお気軽にご相談ください。