カラム、グループ全体をリンクとして設定する方法

Cocoonカスタマイズ集
この記事は約3分で読めます。
記事内に広告が含まれています。

Cocoon 2.9.1.3でサポート

はじめに

複数の段落をひとまとめにして、全体をメニューとしてリンクさせたい場合があります。

しかし、WordPressには、カラム全体やグループ全体をリンクにする設定がありません。
そのため、リンクにしたいブロックの前後に「カスタムHTML」ブロックを配置し、<a>タグで囲む必要があります。

そこで、「カスタムHTML」ブロックを使わずにグループ全体にリンクを適用します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ここでは「カラム」ブロックについて説明します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で設定します。

    1. 「カラム」ブロックを配置します。
    2. カラム内に一まとめにしたいブロックを配置します。
      その際、「段落」ブロックで入力したテキストの1つに必ずリンクを設定します。
    3. カラムの高度な設定→追加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ブロックを使う必要がなく、より簡単にリンクを適用することができます。

タイトルとURLをコピーしました