WordPressで、こんな「カード型のリンク」を作りたいことがあります。
見出しや文章だけをクリックするのではなく、背景色のついたカード全体をクリックすると、指定したページへ移動する形です。
今回作ってみたら意外と簡単だったので、忘れないように手順を残しておきます。
まずカードの土台を作る
WordPressのブロックエディターで、「グループ」ブロックを追加します。
このグループがカードの外枠になります。
グループの中に、
- 見出し
- 説明文
など、カードに表示したい内容を入れます。
今回なら、
食べると重い、
お腹がすっきりしない
食後の重さ、胃もたれ、
お腹の張りなどが気になる方へ。
というような内容を入れました。
（まずカラム→グループ→グループの＋クリック文字入力）
背景色や余白をつけてカードらしくする
グループブロックを選択して、右側の「ブロック」設定から背景色などを調整します。
文章そのものではなく、外側のグループを選択するのがポイント。
「今、どこを選択しているのかわからない！」となったときは、編集画面下に表示される
固定ページ ＞ カラム ＞ グループ ＞ 段落
のようなパンくずを見ると便利でした。
「段落」ではなく、その一つ外側の**「グループ」**を選択します。
カード全体にリンクを設定する
ここが今回いちばん覚えておきたいところ。
グループブロック全体を選択した状態で、ブロック上部に表示されるツールバーの**🔗リンクマーク**をクリックします。
リンクURLの入力欄が開いたら、移動させたいページや記事のURLを入力。
「適用」を押せば完成です。
これで文字だけではなく、カードのどこをクリックしてもリンク先へ移動できるようになります。
同じサイト内の記事へリンクする場合は、基本的に「新しいタブで開く」はOFFで大丈夫です。
文字だけが選択されてしまったときは？
今回、ここで少し迷いました。
カードのタイトルをクリックすると「段落」が選択されるため、その状態でリンクを設定すると、文字だけのリンクになってしまいます。
カード全体をリンクにしたい場合は、
文字を選択 → その外側のグループを選択 → 🔗リンク
という順番。
パンくずから「グループ」を選ぶと分かりやすいです。
複数のカードを横並びにしたい場合
カードを2枚ずつなど横に並べたい場合は、「カラム」ブロックの中に、それぞれのグループブロックを入れると作れます。
イメージとしては、
カラム
└ カラム
└ グループ（カード①）
└ カラム
└ グループ（カード②）
という構造です。
スマートフォンでは縦に並ぶため、PCとスマホの両方で表示を確認しておくと安心です。
覚えておきたいポイント
今回いちばん大事だったのは、
「文字にリンクを貼る」のではなく、「グループ全体にリンクを設定する」
ということ。
カード型にしておくと、文章のリンクよりクリックできる範囲が広く、スマートフォンでも押しやすくなります。
一度覚えてしまえば、トップページの案内、カテゴリーへの入口、おすすめ記事など、いろいろ使えそうです。
また忘れそうなので（笑）、自分用のWordPress覚書として残しておきます。
コメント