はじめに
複数の段落をひとまとめにして、全体をメニューとしてリンクさせたい場合があります。
しかし、WordPressには、カラム全体やグループ全体をリンクにする設定がありません。
そのため、リンクにしたいブロックの前後に「カスタムHTML」ブロックを配置し、<a>タグで囲む必要があります。
そこで、「カスタムHTML」ブロックを使わずにグループ全体にリンクを適用します。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下の手順で実装します。
ここでは「カラム」ブロックについて説明します。
- ラベルGutenbergエディターでの設定

Gutenbergエディター 以下の手順で設定します。
- 「カラム」ブロックを配置します。
- カラム内に一まとめにしたいブロックを配置します。
その際、「段落」ブロックで入力したテキストの1つに必ずリンクを設定します。 - カラムの高度な設定→追加CSSクラスに
my-linkと入力します。
グループも同様に、一まとめにしたブロックに対して追加CSSクラスを設定します。
- ラベルCSSを追加
以下のコードをstyle.cssに追加します。
.my-link { position: relative; a { color: unset; text-decoration: none; &::after { content: ""; inset: 0; position: absolute; z-index: 1; } } }
さいごに
今回紹介した方法を使えば、「カラム」や「グループ」全体にリンクを適用することができます。
これにより、複数の段落をまとめてリンクにする際に、HTMLやカスタムHTMLブロックを使う必要がなく、より簡単にリンクを適用することができます。


