グリットカラムカードブロックと見出しブロックを使用して、ページ内リンクを設定する方法

,

  1. Staff Blog
  2. WordPress
  3. グリットカラムカードブロックと見出しブロックを使用して、ページ内リンクを設定する方法

ページ内リンクとは

ページ内リンクとは、 「アンカーリンク」とも呼ばれていて、同じページ内の特定部分に移動するリンクのこと です。

今回はVK Block Proの「グリットカラムカード」の中に「VK ボタン」を入れてリンク元にし、コアの「見出し」ブロックを飛び先に指定して、ページ内リンクを設定する方法を紹介します。
コンテンツ作成のヒントになれば嬉しいです。

サンプルパターン

完成形はこちらです。VK ボタンブロックで 下向きアイコンをつけることで、ユーザー側もページ内で下に移動するということが分かりやすいので、ユーザビリティも上がると思います。

見出し01

ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。

見出し02

ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。

見出し03

ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。ここはテキストが入ります。


サンプルをVK Pattern Libraryからコピー

サンプルパターンを「VK Pattern Library」サイトからコピーできますので、ぜひコピーしてご利用ください。
「VK Pattern Library」のパターンの下にある「このパターンをコピーする」ボタンからコピーできます。


ページ内リンクの設定方法

飛び先にID名を設定する

まず、リンクの飛び先のタイトルにid属性を指定します。

  1. 飛び先になる要素を1度クリックします
  2. 右に要素に対する設定画面が表示されますので、「高度な設定」をクリックします。
  3. 「高度な設定」のメニューが展開されるので「HTMLアンカー」に任意のid名を設定します。今回は midashi01 としました。
STEP
1

リンク元に「#id名」を指定する

次に、リンク元のボタンに#id名を設定していきます。

  1. リンク元のボタン要素をクリックします。
  2. 上にボタンのツールバーが表示されますので、リンクマークの「リンクURL」をクリックします。
  3. リンク入力画面が表示されますので、先ほど設定した#id名を入力します。今回は #midashi01 となります。
  4. #id名が入力できたら、右にある「送信」ボタンをクリックしてリンクを挿入します。
STEP
2

ボタンをクリックすると見出し01 へページ内リンクされます

「見出し01へリンク」をクリックすると、見出し01まで移動するページ内リンクが作れました。

この順番で見出し02 見出し 03も作っていくイメージになります。

STEP
3

こちらもぜひご覧ください

この記事を書いた人

久納 美幸
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya(2013-2017)では、名古屋版わぷーを制作しました。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。