リンクグループ

実装例

グループブロックのスタイル設定で「全体リンク化」オプションが選択されているWordPressのブロック設定パネル。
グループブロックに設定項目を追加します。
目次

リンクグループとは

グループブロックをリンク化する機能を追加します。

Emanon Premium ではパネルブロックで対応できたりするのですが、SWELLでは実装されていない「グループブロックのリンクカード化」。

使用方法ページのように、下層ページ冒頭にメニューアイコンを並べたいときなどにご使用ください。

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

\お申込みはこちら/

コードスニペットをオンにします。
(コードスニペットが分からない方は使用方法ページをご覧ください。)

ブロックスタイルの使い方

  1. 編集画面を開き、通常通りグループブロックを設置し、リンク化したい内容を制作します。
アイコンとテキストが含まれたグループブロックが選択されており、「これをリンク化したいです。」と表示されている編集画面。
  1. グループブロック内に、テキストリンク一つ 設置します。
テキストを選択し、上部ツールバーからリンク設定アイコンを使ってリンクを挿入する操作中のWordPress編集画面。
  1. リンクカード化したいグループブロックを選択し、右側設定パネルから「スタイル」 > 「全体リンク化:Revify」を選択する。
グループブロック内のテキストにリンクが適用された状態が表示されているWordPressの編集画面。
グループブロックのスタイル設定で「全体リンク化」オプションが選択されているWordPressのブロック設定パネル。
  1. これで完了です。CSSもJavaScriptも要りません。
    リンクパネルとして使用するもよし、ブロックエディタで作れるバナーとして活用するもよしです!

注意点

  • ブロックスタイルのCSSは、編集画面にも適用されます。
  • グループ前面に疑似要素を表示するので、全体リンク化設定後にグループの内容を編集したい場合は、一時的に「デフォルト」に戻してください
  • グループブロック内にあるリンクのクリックエリアをグループいっぱいに広げます。
  • 「リンクテキスト」が無い場合は、ただホバーするだけです。
  • リンクの仕様(”別タブで開く”等)は、テキストリンクの設定に従います。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次