リンク設定について学ぼう
パスとは
パス とは、画像ファイル・HTML ファイルなどがどの場所にあるかを表した文字列のことです。ピッパサックのリンク設定でも、このパスの書き方を理解しておくと、リンク切れを防ぎ、正しくファイルを参照できます。
間違ったパスを書いてしまうと、画像が読み込まれなくて正常に表示できなくなってしまいます。
パスの書き方は 「絶対パス」と「相対パス」の 2 種類 があります。
絶対パスとは？
絶対パス は、ファイルの居所を最初から最後まで記載した「ファイルの完全な住所」です。
https://pippms.com/images/photo.jpg
- pippms.com ... ドメイン名
- images ... フォルダ名
- photo.jpg ... ファイル名
絶対パスのメリット
- 階層の位置関係から影響を受けないので、パスを書いたファイルを移動しても書き直さなくて大丈夫です
- 外部サイトのリンクは「絶対パス」でないと表記ができません
絶対パスのデメリット
- 全て記述するので長くなります
- ドメイン名が変わった時は、全て書き直さないといけません
相対パスとは？
相対パス では、現在のファイルから目的のファイルまでの道筋を示します。
images/photo.jpg
- images ... フォルダ名
- photo.jpg ... ファイル名
相対パスのメリット
- 記述が簡潔であるためとても分かりやすいです
- ファイルの位置関係が変わらなければ、ドメインが変わっても書き直さなくて大丈夫です
相対パスのデメリット
- 階層の位置関係からの影響を受けるため、ファイルの場所を変えるとリンク切れを起こす可能性があります
- 自サイトのみ使用でき、外部サイトのリンクには使えません
使い分けのポイント
- サイト内リンク: 相対パスを推奨 (ドメイン変更に強い)
- 外部サイトへのリンク: 絶対パスを使用
- SNS シェア / メールリンク: 絶対パス (どこから開いても機能するように)
ピッパサックでのパスの書き方例
- ブログ一覧: 相対パスで
blog のみ
- 特定タグ一覧: 相対パスで
blog/tag/3611
- 他ページ: 相対パスで
about や contact
- 外部リンク: 絶対パスで
https://example.com/
関連ページ
- リンクテキストを使って電話やメールへのリンクにつなげよう (別 HOWTO)
- カテゴリについて学ぼう (別 HOWTO)
