Webflow にハイパーリンクを挿入してネストする

テキスト リンクを追加、ネスト、およびスタイル設定します。

ハイパーリンクは、アンカー テキストを作成するときなど、テキスト コンポーネントにハイパーリンクのみが含まれる場合に使用されます。

テキスト リンク要素は、[追加] パネルの [タイポグラフィ] セクションで強調表示されます。

ハイパーリンクインターフェースの配置

ハイパーリンクを組み込むには:

  1. 起動する パネルを追加 > 要素
  2. ドロップする テキストリンク から タイポグラフィ Webflowキャンバスへの分割

コンテンツを調整するには、テキストをダブルタップするか、コンポーネントをハイライトしてクリックします。 入場/返却.

テキスト内にハイパーリンクをネストする

段落内の単語やフレーズにハイパーリンクを添付するには、テキストを選択し、フォント スタイル メニューのハイパーリンク シンボルをクリックします。その結果、このコンテンツは段落単位内に埋め込まれたテキスト リンクに変換されます。

ハイパーリンク オプションは、テキスト書式設定メニューで強調表示されます。

ハイパーリンクのカスタマイズ

テキスト リンク ユニットにハイパーリンクを追加するには、次の 2 つの方法があります。

  • 選択してください テキストリンク テキストリンク記述子の横にある「歯車」アイコンをタップします
  • 選択する テキストリンク に移動し、 設定パネル (ショートカット: D)

ハイパーリンクのカスタマイズに関する詳細をご覧ください。

設定パネルのリンク設定セクション。

テキストリンクの外観をカスタマイズする

ハイパーリンクユニットは、最初は青いテキストと下線でスタイル設定されています。テキストリンク要素を変更することで、この標準スタイルを置き換えることができます。賢い戦略は、 すべてのリンク category を使用すると、Web ページ上のすべてのリンクでスタイルが統一されます。

貴重な提案: ボタンは基本的に、スタイル設定されたテキスト リンクで構成されます。デフォルトでは、青い背景、白いテキスト、下線なし、内部パディングが表示されます。詳細については、ボタンに関する記事をご覧ください。

すべてのリンクの外観を変更する

微調整するには すべてのリンク category:

  1. 任意のリンク要素(テキストリンクやリンクブロックなど)を選択します。
  2. 展開する スタイルパネル > セレクターフィールド 中をタップするとドロップダウンが表示されます
  3. 選ぶ HTMLタグ > すべてのリンク
リマインダー: アクセス セレクターフィールド 押すと 指示 + 戻る (Mac) または コントロール + 入力 (Windows)。 セレクターフィールド ドロップダウンが開いたら、矢印キーを使ってタグを選択し、 入力/戻る.

ここでは、サイト上のリンクのデフォルトの外観をカスタマイズする方法があります。 ボタン, リンクブロック、 または ナビリンク。 新しいリンクの追加や新しいテキストリンクの導入は、 すべてのリンク クラス。

スタイル パネルでは、セレクター フィールドに「すべてのリンク」タグが表示されます。
ユアン・マック