リンクの記載方法

関連リンク

• リンクの記載方法
• 指定場所に移動
• リンク余白の設定
• リンク色を複数設定

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

相対と絶対URL

リンクの記載方法は、相対と絶対URLから理解しましょう。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

                         ┏━━━┓
      a) index.html━━━┫      ┃
 http://www.syousai.com/ ┗━━━┛

                         ┏━━━┓  ┏━━━┓  ┏━━━┓
    　b) index.html━┳━┫  A   ┣━┫  B   ┣━┫  C   ┃
                     ┃　┗━━━┛  ┗━━━┛  ┗━━━┛
　　　 　　          ┃
　　　 　            ┃　┏━━━┓  ┏━━━┓
                     ┗━┫  D   ┣━┫  E   ┃
                       　┗━━━┛  ┗━━━┛

                                       ※ 縦に同じ階層

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

相対

1. 同じフォルダ

<a href="ページ名">〜</a>

2. 1階層上

<a href="../ページ名">〜</a>

◇ あとは組み合わせ

3. 1階層下

<a href="フォルダ名/ページ名">〜</a>

• 例1: DからBのフォルダ移動なら、1階層上がって2階層下がる。
• <a href="../Aのフォルダ名/Bのフォルダ名/ページ名">〜</a>

• 例2: CからAのフォルダ移動なら、2階層上がる。
• <a href="../../ページ名">〜</a>

※ index.htmlの場合、ネット上なら記載しなくても移動します。

絶対

b) のサイトから a) のサイトに移動する場合は絶対URLを使用します。

<a href="http://www.syousai.com/">〜</a>

<a href="〜">〜</a> 〜に移動したいアドレス「 http://」から記載します。〜部分はサイトのタイトルになることが多いです。

http://www.syousai.com/ と http://www.syousai.com/index.html は、同じページに移動しますが、index.htmlは隠すようにしましょう。

理由は、「 / 」で終わっていれば、今後index.html以外のページに変更したいときにもSEOからみて有利です。