ハイパーリンクセクション

リンク ブロックを使用して、画像などの要素やバナーなどのレイアウトをリンクに変換する方法を学びます。

接続ブロックは 分割ブロック 整理や配置に使用できますが、ハイパーリンク領域内のコンテンツはリンクに変換されます。ハイパーリンク ブロックには、画像などの任意の要素や、ポスターなどの任意のレイアウトをリンクに変換する機能があります。

図は、Div ブロックとリンク ブロックを並べて示しています。どちらにも、画像、見出し、段落テキストが含まれています。

このチュートリアルの内容:

  1. ハイパーリンクブロックを統合する
  2. ハイパーリンクブロック内に追加のコンポーネントを含める
  3. リンクタイプを確立する
  4. ハイパーリンクブロックをカスタマイズする
  5. 分割ブロックをハイパーリンクブロックに変換し、その逆も行う

ハイパーリンクブロックを挿入する

ハイパーリンクブロックアイコンのサムネイル

プロジェクトにハイパーリンクブロックを追加するには、 要素パネル (ショートカット: A) をクリックし、ハイパーリンク ブロック要素をページにドラッグします。

基本セクションの 5 つの要素は、分割ブロック、リスト、リスト項目、ハイパーリンク ブロック (強調表示)、およびボタンです。

ハイパーリンクブロックに要素を組み込む

他のハイパーリンクを除くすべてのコンポーネントは、[追加] パネルまたはキャンバスからハイパーリンク ブロックにドラッグできます。

ピンクの花の画像、サブ見出し「写真」、および H1「花」を含むハイパーリンク ブロック。
プロのヒント: 他のハイパーリンクはハイパーリンク ブロック内にネストできませんが、テキスト ブロック コンポーネントを挿入してボタンに似たスタイルに設定したり、ボタン クラスを使用したりすることができます。  

リンクの種類と値を決定する

に似ている テキストリンク そして ボタンハイパーリンク ブロックでは、URL、Web ページ、コレクション ページ (該当する場合)、ページ セクション、電子メール、電話、ファイルなど、同じリンクの選択肢が提供されます。リンク設定の詳細については、こちらをご覧ください。

リンク設定パネルには、リンク タイプを表す 6 つのアイコン、URL テキスト フィールド、「新しいタブで開く」チェック ボックス、プリロードのドロップダウン メニュー、およびすべての設定を表示ボタンが表示されます。
ハイパーリンク ブロックの場合は、要素を選択して Enter キーを押すことでリンク設定にアクセスすることもできます。

ハイパーリンクブロックの設計

ハイパーリンク ブロックは、デザインやフレームワークを構築するときに、ディビジョン ブロックと同様に多用途に使用できます。他のページにリンクするブログ エントリのリストなどのレイアウトを作成するためによく使用されます。

ハイパーリンクブロックのホバー状態をカスタマイズする

ハイパーリンクブロックはインタラクティブなので、明確なホバーを適用することをお勧めします。 ハイパーリンク ブロックにホバー状態を追加して、ユーザーにクリック可能であることを示します。ホバー状態を変更するには、次の手順に従います。

  1. を選択 ハイパーリンクブロック
  2. タップする  そして選択する ホバー
  3. 追加 ボックスシャドウ またはその他のスタイル属性
  4. 作成する 遷移 のために ボックスシャドウ ホバー状態で変更された属性またはその他のスタイル属性
クラス セレクター セクションの状態ドロップダウン メニューには、なし、ホバー、押下、フォーカス、訪問の 5 つの異なる状態が表示されます。
左側のステップ 1 では、ボックス シャドウ効果を選択します。右側のステップ 2 では、ボックス シャドウ設定パネルに、タイプ、角度、距離、ぼかし、サイズ、および色の構成が表示されます。

ホバー時に背景画像を変更してみます。

  1. ハイパーリンクブロックに背景画像を組み込む
  2. アクセス  > ホバー
  3. 変更する 背景画像
  4. 戻る デフォルト状態
  5. 作成する 遷移 のために 背景画像 属性

青いテキストを置き換える

デフォルトでは、ハイパーリンク ブロック内にテキストがある場合、すべてのリンク タグの標準テキスト スタイルであるため、テキストは青色で下線付きで表示されます。

テキストの装飾とフォントの色を変更することで、特定のハイパーリンク ブロックのデフォルトのリンク スタイルを変更できます。

  1. を選択 ハイパーリンクブロック
  2. 訪問 スタイルパネル
  3. 調整する テキスト装飾なし
  4. 変更 フォントの色
スタイル パネルのタイポグラフィ セクションには、黒いテキストと装飾で選択されたなしスタイルを示す強調表示された領域が表示されます。
テキスト要素自体のテキスト装飾を「なし」に設定しても、テキストの下線は削除されません。下線を削除するには、ハイパーリンク ブロックを直接スタイル設定する必要があります。

分割ブロックをハイパーリンクブロックに変換し、その逆も行う

ハイパーリンク ブロックを分割ブロックに変更したり、その逆を行ったりすると、要素をクラスター化するためにハイパーリンク ブロックではなく分割ブロックを誤って使用したことを発見したときに便利です。また、ブロックの機能を変更する必要がある場合に、すばやく切り替えるのにも便利です。

左側では、分割ブロック設定パネルでハイパーリンク ブロックに変換ボタンが強調表示されています。右側では、ハイパーリンク ブロック設定パネルで分割ブロックに変換ボタンが強調表示されています。

ハイパーリンクブロックを分割ブロックに変換する

ハイパーリンク ブロックを分割ブロックに変換するには、ハイパーリンク ブロックを右クリックして分割ブロックに変換します。

分割ブロックをハイパーリンクブロックに変換する

分割ブロックをハイパーリンク ブロックに変更するには、分割ブロックを右クリックしてハイパーリンク ブロックに変換します。

分割ブロックにハイパーリンク要素が含まれている場合は、エラーが発生し、ハイパーリンク ブロックへの変換ができなくなることに注意してください。これは、リンクのネストがサポートされていないためです。まず、分割ブロックにネストされているすべてのハイパーリンク要素を削除するか、ハイパーリンク ブロックを分割ブロックに戻す必要があります。

ユアン・マック