ウェブサイトは、それらの前に来た通信媒体とは異なります。 プリント、ラジオ、テレビなどの以前のメディアフォーマットとは別のウェブサイトを設定する主なものの1つは、「 ハイパーリンク 」のコンセプトです。
一般に「リンク」とも呼ばれるハイパーリンクは、Webを非常に動的にするものです。 他の記事や他のリソースを参照できる印刷された出版物とは異なり、ウェブサイトはこれらのリンクを使用して実際に他のページやリソースに訪問者を送ることができます。 これを他の放送媒体で行うことはできません。 ラジオでの広告やテレビでの視聴が可能ですが、ハイパーリンクはありません。これらの広告では、ウェブサイトで簡単に行うことができるようになります。 リンクは本当に素晴らしいコミュニケーションとインタラクションツールです！
多くの場合、ウェブサイト上にあるリンクは、同じサイトの他のページに訪問者を誘導するテキストコンテンツです。 ウェブサイトのナビゲーションは実際のテキストリンクの一例ですが、リンクはテキストベースである必要はありません。 また、ウェブサイト上の画像を簡単にリンクすることもできます。 これがどのように行われたかを見てみましょう。イメージベースのハイパーリンクを使用する場合もあります。
画像をリンクする方法
まず、 HTML文書に画像そのものを配置する必要があります。 画像ベースのリンクの一般的な使用は、サイトのホームページにリンクされたサイトのロゴグラフィックです。 下のサンプルコードでは、使用しているファイルがロゴのSVGです。 これは、画像の品質と全体のファイルサイズを小さく抑えながら、解像度を変えて画像を拡大することができるので、良い選択です。
イメージをHTMLドキュメントに配置する方法は次のとおりです。
画像タグの周りに、アンカーリンクを追加し、画像の前にアンカー要素を開き、画像の後にアンカーを閉じます。 これは、テキストをリンクする方法と似ていますが、アンカータグとのリンクにする単語をラップするのではなく、イメージをラップします。 以下の例では、サイトのホームページ（index.html）にリンクしています。
このHTMLをページに追加するときは、アンカータグとイメージタグの間にスペースを入れないでください。 そうすると、一部のブラウザで画像の横に少しの目盛りが追加され、奇妙に見えます。
ロゴイメージはホームページボタンとしても機能するようになりました。 HTMLマークアップには、イメージの幅や高さなどのビジュアルスタイルは含まれていないことに注意してください。 これらのビジュアルスタイルはCSSに残し、HTML構造とCSSスタイルを明確に分離します。
CSSに着手すれば、このロゴグラフィックをターゲットにするスタイルには 、マルチデバイスフレンドリーな画像のレスポンシブスタイルや、ボーダーやCSSなどの画像/リンクに追加したいビジュアルも含まれます。影を落とす。 また、CSSスタイルで使用する追加の「フック」が必要な場合は、画像を与えたり、クラス属性をリンクしたりすることもできます。
画像リンクの使用例
画像リンクを追加するのは簡単です。 今見たように、適切なアンカータグで画像をラップするだけです。 あなたの次の質問は、「前述のロゴ/ホームページのリンクの例以外に、実際にいつ実際にこれをやっていますか？
ここにいくつかの考えがあります：
- それらの画像のより大きなバージョンにリンクするギャラリーのサムネイル画像。
- 電子商取引のウェブサイトの商品写真のように、コンテンツを表すために単独で使用される画像。
- ブログ記事やプレスリリースのような他のコンテンツの一部であるティーザーイメージは、コンテンツに注意を喚起してコンテンツをタップするか、クリックして記事全文を読むことができます。
- サイト内の特定の機能またはページに接続するためのボタンとして使用されるアイコンイメージ。
- そのサイトまたは会社にとって重要なさまざまなソーシャルメディアサイトの認識可能なロゴを使用するソーシャルメディアリンク。
- フォーム提出（ベストプラクティスのノート - ウェブサイトのパフォーマンスの観点から、純粋にCSSでスタイル設定されたボタンは画像ボタンよりも優れた選択肢です）などの特定の機能のボタンとして使用されます。
画像を使用する際の注意
画像は、ウェブサイトの成功に重要な役割を果たすことができます。 上記の例の1つは、他のコンテンツと一緒に画像を使用して、そのコンテンツに注意を引き、人々にそれを読むようにさせることを述べました。
画像を使用する際には、適切な画像の主題、形式、ウェブサイトで使用している画像がウェブサイトの配信に適切に最適化されていることなど、 必要なものに適した画像を選択することに注意する必要があります。 これは画像を追加するだけの多くの作業のように見えるかもしれませんが、その利益はそれに見合う価値があります！ 画像は本当にサイトの成功に多くを追加することができます。
あなたのサイトで適切なイメージを使用することを躊躇しないでください。また、コンテンツをインタラクティブに追加する必要があるときにそれらのイメージをリンクするだけでなく、これらのイメージのベストプラクティスに注意し、ウェブデザイン作業でこれらのグラフィックス/