第5章：読者を惹つけ、世界と繋がる - リンクと画像
ただ文章が並んでいるだけの記事は、少し退屈に見えてしまうかもしれません。記事の価値を何倍にも高めてくれるのが、外部の情報と繋がる「リンク」と、読者の理解を助ける「画像」です。
今回は、あなたの記事を生き生きとさせ、世界と繋がるための2大要素をマスターしましょう。
ハイパーリンク (<a>): Webの「どこでもドア」
a は "Anchor"（錨、基点）の略。このタグでテキストなどを囲むと、Web上のあらゆる場所に繋がる「どこでもドア」、つまりハイパーリンクを作成できます。🚪
href 属性で行き先の「住所（URL）」を指定するのが基本です。
<a href="https://www.google.com">Googleで検索する</a>また、target="_blank" という属性を追加すれば、読者が今読んでいる記事のタブを残したまま、新しいタブでリンク先を開くという親切な動作になります。外部サイトを紹介する際には、ぜひ活用したい「おもてなし」機能です。
<a href="https://www.example.com" target="_blank">参考サイト（新しいタブで開きます）</a>リンク先住所の書き方：絶対パスと相対パス
href に書く住所の書き方には2種類あり、この使い分けは将来のブログ運営を楽にするための重要な知識です。
絶対パス: 変わらない「完全な住所」
- 書き方:
https://から始まる、誰がどこから見ても同じ場所を指すURL。 - 例:
https://example.com/page.html - 使い所: 外部サイト（自分のブログ以外のサイト）へリンクする場合。
- イメージ: 郵便番号から書く、完全な住所です。🗺️
相対パス: 今いる場所からの「道順」
- 書き方: 今いるページを基準にした、目的のファイルへの道順。
- 例:
contact.html（同じ階層）、../index.html（一つ上の階層） - 使い所: 内部リンク（自分のブログ内の別記事）を貼る場合。
- イメージ: 「隣の部屋へ」「一つ上の階層へ」という、家の中での道案内です。🏠
「外部リンクは絶対パス、内部リンクは相対パス」。このルールを守るだけで、将来の変更に強い、メンテナンスのしやすいブログになります。
画像 (<img>): 記事に彩りと命を吹き込む
img タグは、記事に画像を埋め込むためのタグです。src (Source) 属性で、表示したい画像の「住所」を指定します。📸
<img src="images/dog.jpg" width="300" height="200" alt="公園でボールを追いかける柴犬">【最重要】alt属性：あなたの「思いやり」が見える場所
alt 属性は、画像タグにおける最重要の属性と言っても過言ではありません。この短いテキストには、3つの大切な役割があります。
- 画像が表示されない時の「保険」
通信状況が悪いなどで画像が表示されなかった時、alt のテキストが代わりに表示されます。
- Googleへの「説明書」🤖
検索エンジンは画像を見ることができません。alt に書かれたテキストを読んで、「なるほど、これは柴犬の画像なんだな」と内容を理解します。つまり、SEOに直接影響します。
- 目の不自由な方への「音声ガイド」♿
スクリーンリーダー（画面読み上げソフト）は、この alt のテキストを読み上げて、画像の内容を伝えます。alt を設定することは、より多くの人があなたのブログを楽しめるようにする「ウェブアクセシビリティ」の基本です。
良いaltテキストを書くコツ
「もしこの画像を、電話の向こうの相手に口頭で説明するなら、何と伝えるか？」を想像してみてください。
"inu.jpg" ではなく "公園でボールを追いかける柴犬" のように、具体的で分かりやすい説明を心がけましょう。
alt 属性を丁寧に設定する。それは、読者と検索エンジンの両方に対する、ブロガーとしての「思いやり」と「プロ意識」の証なのです。演習ドリルを準備していますのでご利用ください。
