Skip to main content

KompoZerでハイパーリンクを作成する方法

學習 HTML + CSS 第二課 by 優易網站架設教學網 (六月 2026)

學習 HTML + CSS 第二課 by 優易網站架設教學網 (六月 2026)
Anonim

世界中の途中にあるネットワーク上の別の文書にあなたを連れて行く文書のリンクを作成する能力は、おそらくWorld Wide Webが発明された最も重要な理由の一つです。ハイパーリンクと呼ばれるこれらのリンクは、HTML(HyperText Markup Language)の「H」です。ハイパーリンクがなければ、Webはあまり役に立たないでしょう。検索エンジン、ソーシャルメディア、バナー広告はありません。(大体、私たちのほとんどがそのように見えます)。

独自のWebページを作成するときは、ハイパーリンクを作成することになります。KompoZerには、あらゆるタイプのリンクを簡単に追加できるツールがあります。このチュートリアルで紹介したサンプルページには、4つのカテゴリ、同じWebページの他の部分へのリンク、および電子メールメッセージのリンクが含まれています。私は見出しと4つの

H3 各カテゴリの見出し。次のページでは、いくつかのリンクを追加します。 05の01

KompoZerでハイパーリンクを作成する

KompoZerのハイパーリンクツールにアクセスするには、ツールバーのリンクボタンをクリックします。ハイパーリンクを作成するには:

  1. ハイパーリンクを表示するページにカーソルを置きます。
  2. ツールバーのリンクボタンをクリックします。 Link Propertiesダイアログボックスが表示されます。
  3. 記入する必要がある最初のフィールドは、リンクテキストボックスです。ハイパーリンクのページに表示するテキストを入力します。
  4. 入力する必要がある2番目のフィールドは、リンクの場所ボックスです。あなたのハイパーリンクがクリックされたときにユーザーにかかるページのURLを入力します。ブラウザのアドレスバーからURLをコピーして貼り付けることをお勧めします。この方法で間違いを起こす可能性は非常に低く、リンク作成時に少なくともページが生きており、リンクが壊れていないことがわかります。
  5. OKをクリックすると、リンクのプロパティダイアログボックスが閉じます。あなたのページへのリンクが表示されます。

ほとんどのブラウザでは、ハイパーリンクはデフォルトで青い下線付きのテキストで表示されます。 KompoZerを使って独自のスタイルをハイパーリンクに適用することはできますが、今は基本ハイパーリンクを使用します。ウェブブラウザでページをプレビューし、リンクをクリックしてそのページが機能することを確認することをお勧めします。

05の02

KompoZerでアンカーリンクを作成する

クリックしたときに同じWebページの別の部分に移動する別の種類のハイパーリンクがあります。この種のハイパーリンクはアンカーリンクと呼ばれ、そのリンクをクリックすると表示されるページの領域をアンカーと呼びます。ウェブページの一番下にある「トップに戻る」リンクを使用したことがある場合は、アンカーへのリンクをクリックしています。

KompoZerを使用すると、ツールバーのアンカーツールを使用してリンクできるアンカーを作成できます。

  1. アンカーが必要なページの領域をクリックします。つまり、アンカーリンクがクリックされたときにページビューアを取得する場所です。この例では、お気に入りの音楽ヘッダーの「F」の直前をクリックしました。
  2. ツールバーのアンカーボタンをクリックします。 名前付きアンカーのプロパティダイアログボックスが表示されます。
  3. ページ上の各アンカーには一意の名前が必要です。このアンカーに対して、私は "music"という名前を使用しました。
  4. OKをクリックすると、アンカーが必要な場所にアンカーシンボルが現れます。このシンボルはあなたのウェブページには表示されません。KompoZerがあなたのアンカーがどこにあるかをあなたに示しています。
  5. ユーザーがジャンプできるようにするページの他の領域についても、この手順を繰り返します。見出しやその他の論理区切り記号で区切られたページ上に多くのテキストがある場合、アンカーはページをナビゲートする簡単な方法です。

次に、作成したアンカーに読者を連動させるリンクを作成します。

03/05

KompoZerによるページナビゲーションの作成

あなたのページにアンカーがあるので、それらのアンカーへのショートカットとして使用されるリンクを作成しましょう。このチュートリアルでは、ページの上部ヘッダーの下に1行4列の表を作成しました。各表のセルには、ページ上のリンクを区切るために使用されるカテゴリヘッダーの1つと同じテキストが含まれています。これらのテーブルセルのそれぞれのテキストに対応するアンカーへのリンクを作成します。

04/05

KompoZerでアンカーにハイパーリンクを作成する

アンカーが設定され、ページナビゲーションに使用するテキストが入力されたので、プレーンテキストのチャンクをリンクにすることができます。リンクボタンをもう一度使用しますが、今回は少し違って動作します。

  1. リンクにするテキストを選択します。この例では、ページの上部にある最初の表のセルにある「お気に入りの音楽」というテキストを選択しました。
  2. ツールバーのリンクボタンをクリックします。 リンクのプロパティダイアログボックスが開きます。
  3. この場合、リンクボタンをクリックする前にテキストを選択したので、ウィンドウのリンクテキストセクションはすでに入力されており、編集できません。 リンクの場所セクションの下矢印をクリックします。前の手順で作成したアンカーのリストが表示されます。この例では、#musicアンカーを選択します。
  4. OKをクリックします。ナビゲーションバーの「お気に入りの音楽」テキストは、クリックするとページ上のそのセクションにジャンプするリンクに変わります。

ドロップダウンメニューの各名前付きアンカーには、その前に「#」記号が付いています。これは、HTMLでアンカーへのリンクを作成する方法です。アンカー名の前にある「#」は、このリンクが同じページの別の場所に移動することをブラウザに伝えます。

05/05

KompoZerを使って画像からハイパーリンクを作成する

テキストだけでなく画像からもリンクを作成できることをご存知でしたか? KompoZerでは数回のクリックでこれを行うことができます。ここでは、ページの下部に上向きの矢印と「TOP」というテキストを表示する小さなアイコンイメージを挿入しました。私はリンクとしてこのイメージを使用して、ページの先頭にジャンプします。

  1. 画像を右クリックし、コンテキストラベルから画像とリンクのプロパティを選択します。イメージのプロパティダイアログボックスが開きます。
  2. 場所タブでは、画像のファイル名とサムネイル表示が既に入力されています。代替テキストボックスにテキストを入力する必要があります。これは、画像の上にマウスを移動したときに表示されるもので、視覚障害者がWebページを読み取ったときにスクリーンリーダーによって読み取られるものです。
  3. リンクタブをクリックします。ここでは、アンカーリンクと同様にメニューからアンカーを選択できます。実際、この画像はアンカーリンクとして使用されています。 #Links_Of_Interestアンカーを選択しました。これは、私たちをトップに戻します。
  4. OKをクリックします。クリックすると、画像がページの上部に戻るようになりました。