世界中の途中にあるネットワーク上の別の文書にあなたを連れて行く文書のリンクを作成する能力は、おそらくWorld Wide Webが発明された最も重要な理由の一つです。 ハイパーリンクと呼ばれるこれらのリンクは、 HTML - ハイパーテキストマークアップ言語の "H"です。 ハイパーリンクがなければ、Webはあまり役に立たないでしょう。 検索エンジン、ソーシャルメディア、バナー広告はありません。(大体、私たちのほとんどがそのように見えます)。
独自のWebページを作成するときは、ハイパーリンクを作成することになります。KompoZerには、あらゆるタイプのリンクを簡単に追加できるツールがあります。 このチュートリアルで紹介したサンプルページには、4つのカテゴリ、同じWebページの他の部分へのリンク、および電子メールメッセージのリンクが含まれています。 見出しと各カテゴリの4つのH3見出しから始めます。 次のページでは、いくつかのリンクを追加します。
05の01
KompoZerでハイパーリンクを作成する
KompoZerのハイパーリンクツールにアクセスするには、ツールバーの[リンク]ボタンをクリックします。 ハイパーリンクを作成するには:
- ハイパーリンクを表示するページにカーソルを置きます。
- ツールバーの[リンク]ボタンをクリックします。 Link Propertiesダイアログボックスが表示されます。
- 記入する必要がある最初のフィールドは、[リンクテキスト]ボックスです。 ハイパーリンクのページに表示するテキストを入力します。
- 入力する必要がある2番目のフィールドは、[リンクの場所]ボックスです。 あなたのハイパーリンクがクリックされたときにユーザーにかかるページのURLを入力します。 ブラウザのアドレスバーからURLをコピーして貼り付けることをお勧めします。 この方法で間違いを起こす可能性は非常に低く、リンク作成時に少なくともページが生きており、リンクが壊れていないことがわかります。
- [OK]をクリックすると、[リンクのプロパティ]ダイアログボックスが閉じます。 あなたのページへのリンクが表示されます。
ほとんどのブラウザでは、ハイパーリンクはデフォルトで青い下線付きのテキストで表示されます。 KompoZerを使って独自のスタイルをハイパーリンクに適用することはできますが、今は基本ハイパーリンクを使用します。 ウェブブラウザでページをプレビューし、リンクをクリックしてそのページが機能することを確認することをお勧めします。
05の02
KompoZerでアンカーリンクを作成する
クリックしたときに同じWebページの別の部分に移動する別の種類のハイパーリンクがあります。 この種のハイパーリンクはアンカーリンクと呼ばれ、そのリンクをクリックすると表示されるページの領域をアンカーと呼びます。 ウェブページの一番下にある「トップに戻る」リンクを使用したことがある場合は、アンカーへのリンクをクリックしています。
KompoZerを使用すると、ツールバーのアンカーツールを使用してリンクできるアンカーを作成できます。
- アンカーが必要なページの領域をクリックします。 つまり、アンカーリンクがクリックされたときにページビューアを取得する場所です。 この例では、お気に入りの音楽ヘッダーの「F」の直前をクリックしました。
- ツールバーのアンカーボタンをクリックします。 [名前付きアンカーのプロパティ]ダイアログボックスが表示されます。
- ページ上の各アンカーには一意の名前が必要です。 このアンカーに対して、私は "music"という名前を使用しました。
- [OK]をクリックすると、アンカーが必要な場所にアンカーシンボルが現れます。 このシンボルはあなたのウェブページには表示されません。KompoZerがあなたのアンカーがどこにあるかをあなたに示しています。
- ユーザーがジャンプできるようにするページの他の領域についても、この手順を繰り返します。 見出しやその他の論理区切り記号で区切られたページ上に多くのテキストがある場合、アンカーはページをナビゲートする簡単な方法です。
次に、作成したアンカーに読者を連動させるリンクを作成します。
03/05
KompoZerによるページナビゲーションの作成
あなたのページにアンカーがあるので、それらのアンカーへのショートカットとして使用されるリンクを作成しましょう。 このチュートリアルでは、ページの上部ヘッダーの下に1行4列の表を作成しました。 各表のセルには、ページ上のリンクを区切るために使用されるカテゴリヘッダーの1つと同じテキストが含まれています。 これらのテーブルセルのそれぞれのテキストに対応するアンカーへのリンクを作成します。
04/05
KompoZerでアンカーにハイパーリンクを作成する
アンカーが設定され、ページナビゲーションに使用するテキストが入力されたので、プレーンテキストのチャンクをリンクにすることができます。 リンクボタンをもう一度使用しますが、今回は少し違って動作します。
- リンクにするテキストを選択します。 この例では、ページの上部にある最初の表のセルにある「お気に入りの音楽」というテキストを選択しました。
- ツールバーの[リンク]ボタンをクリックします。 [リンクのプロパティ]ダイアログボックスが開きます。
- この場合、[リンク]ボタンをクリックする前にテキストを選択したので、ウィンドウの[リンクテキスト]セクションはすでに入力されており、編集できません。 [リンクの場所]セクションの下矢印をクリックします。 前の手順で作成したアンカーのリストが表示されます。 この例では、#musicアンカーを選択します。
- [OK]をクリックします。 ナビゲーションバーの「お気に入りの音楽」テキストは、クリックするとページ上のそのセクションにジャンプするリンクに変わります。
ドロップダウンメニューの各名前付きアンカーには、その前に「#」記号が付いています。 これは、HTMLでアンカーへのリンクを作成する方法です。 アンカー名の前にある「#」は、このリンクが同じページの別の場所に移動することをブラウザに伝えます。
05/05
KompoZerを使って画像からハイパーリンクを作成する
テキストだけでなく画像からもリンクを作成できることをご存知でしたか? KompoZerでは数回のクリックでこれを行うことができます。 ここでは、ページの下部に上向きの矢印と「TOP」というテキストを表示する小さなアイコンイメージを挿入しました。 私はリンクとしてこのイメージを使用して、ページの先頭にジャンプします。
- 画像を右クリックし、コンテキストラベルから画像とリンクのプロパティを選択します。 イメージのプロパティダイアログボックスが開きます。
- [場所]タブでは、画像のファイル名とサムネイル表示が既に入力されています。代替テキストボックスにテキストを入力する必要があります。 これは、画像の上にマウスを移動したときに表示されるもので、視覚障害者がWebページを読み取ったときにスクリーンリーダーによって読み取られるものです。
- [リンク]タブをクリックします。 ここでは、アンカーリンクと同様にメニューからアンカーを選択できます。 実際、この画像はアンカーリンクとして使用されています。 #Links_Of_Interestアンカーを選択しました。これは、私たちをトップに戻します。
- [OK]をクリックします。 クリックすると、画像がページの上部に戻るようになりました。