SEO対策、WEBサイト(ホームページ)の作り方、そして時々柴犬と愛媛県

スポンサーリンク

リンクの方法 絶対パスと相対パス

最近他の方のブログなどを見ていると、無料ブログやサービス以外ではWordPressを使用している方が非常に多いように感じます。

最初ははてなブログやFC2など無料ブログから始めたものの、SEO的にはどうしても弱いので噂を聞きつけてWordPressなどを使ってみようという方も多いのでしょう。

自分でブログやホームページを管理すると自然と知識もついてくるので、こういった技術的前進は非常に有意義で応援したい気分になりますね。

WordPressなどのCMS普及により技術スキル・知識の低下が目立つ

ただ、最近少し感じていることがあります。それが見出しにもあるようにHTMLやCSSなどについての知識の低下です。

これはWebの世界に限ったことではありませんが、最近は車でも自動運転やバックモニターなどの技術が発達し、運転することが非常に簡単になってきています。

しかしながら、その反面、憂慮することとして”なぜそのようなことができるのか?”や仕組みを理解されていない方が非常に多いように感じます。

車で言えばバックモニターが普及したために、自分が駐車するスペースをそれほど確認せずにモニターだけを凝視して駐車しているドライバーなどの方も見かけます。

このように便利な世の中は、非常に歓迎すべきことなのですが、逆に言えばよく分からずにやっていることは非常に危険であり、専門性が高まるように感じます。

もちろん専門性が高まるとその道のプロにはありがたい話なのですが、例えば今回取り上げるリンクの方法なんかに関しては、10数年前にホームページを手打ちで作っていた僕のような世代からすれば自然と身につくものでありました。

だから他のサイトなどでわざわざ説明しているのを見ても”そんなの誰でも知っているでしょ”とは感じていたのですが、最近僕も参加しているブログサークルなんかのコメント欄を見ていても思った以上にみなさん分からずにやっていることが多そうなので、確認という意味で今回取り上げてみることにしました。

少し偉そうな文章になってしまいましたが、あまり理解されていなかった方は改めて覚えておきましょう。

絶対パス(絶対参照)

いわゆるフルパスというやつですが、リンクを指定する際あまり意識されていない方はおそらくこのフルパスでURLの指定をしているとおもいます。

分かりやすく書くと、例えばこの記事の一つ前の記事を指定する場合

http://kishinoko.lovepop.jp/zakki/diary/pv-adsense-2018-2.html

これがフルパス(絶対参照)となります。

相対パス(相対参照)、ルートパス

そして重要となるのが相対パスです。

リンクを指定する場合コピペしてフルパスで指定するが簡単であることは間違いないでしょうし、外部リンクの場合はまず絶対パスじゃないといけません。

ただ、これが自分のサイトの他ページへのリンクの場合わざわざフルパスで指定する必要はありません。

例えば前述の記事へのリンクを相対パスなどで入力する場合

zakki/diary/pv-adsense-2018-2.html

/zakki/diary/pv-adsense-2018-2.html

./zakki/diary/pv-adsense-2018-2.html

以上のようなリンク方法のみでも指定が可能です。

相対パスのメリット

相対パスの利点は二つあります。

それはまずソースがシンプルになるということと、もう一つはブログなどを引っ越しした際の手間が減るという点です。

ブログの引っ越しなどをしたことある方は一番悩む点としては画像や外部リンクが壊滅的になり、頭を抱えたことがある方も多いことでしょう。

恐らくほとんどの方が絶対パスで指定するために、新しくブログを引っ越ししようとすると画像が表示されなくなったり、リンクがおかしくなるのはこのためです。

だから普段から相対パスについて理解しておくと、このような問題を比較的容易に解決することができますし、ブログの画像素材として公式サイトから画像などをダウンロードしたいときにその画像の場所を簡単に探し出すことができます。

ドラマやアニメの公式サイトは間違いなくプロが作っており、画像もほぼ相対パスで指定されていますが、このあたりを理解しておくと簡単に見つけられます。

相対パスのデメリット

実用上それほどデメリットはないのですが、サイトの作成者以外がリンク先を辿る場合どうしても相対的な参照のためファイルの場所が探しにくいというデメリットがあります。

ただ、その指定方法の違いさえ理解していればそれほどややこしいものではありませんね。

相対パスの指定方法

ただ、この相対パスですが先ほど三種類の方法を挙げましたが、実はそれぞれ意味合いが違います。

一段上に行くためにはここは是非とも理解しておきましょう。

まずサンプルとして以下のようなファイル構造になっていたとします。

 

(ドメイン名)–index.html

|–001.html

|–(category)–002.html

|–(CSSフォルダ)–style.css

|–(imageフォルダ)–top_bg.jpg

 

同一階層へのリンク場合

例えばindex.htmlというページ内で001.htmlへのリンクを指定した場合は

絶対パスだと

(ドメイン名)/001.html

となりますが例えば相対パスで指定する場合

oo1.html

と指定するだけで可能です。

またトップページからimageフォルダのtop_bg.jpgという画像ファイルを呼び出したい場合などは

image/top_bg.jpg

と指定すればいいわけです。

またもう一つの書き方として

./001.htmlと指定することが可能です。

上位階層へのリンク

次に上位階層へのリンクの場合です。

たとえば前述のフォルダ構成において

oo2.htmlからstyleフォルダにいれているstyle.cssというスタイルシートを相対パスで呼び出そうとした場合、階層が違うので前述の方法では呼び出せません。

一旦上位階層へ戻る必要がありますが、この場合はファイルの前に../とつけることにより一つ上の階層への指定が可能です。

具体的には

../style/style.css

という形になります。

二階層上のフォルダにアクセスする場合は../../とつけることにより上位階層を指定します。

./と../では意味合いが違うのでここは十分分けて理解しておきましょう。

ルートパス

最後にルートパスについてです。

これは意味合い的には絶対パスと似ているのですが、同一サイト内でリンク指定する場合いちいちドメインから記述する絶対パスを使うのは、今後のサイトの引っ越しなどを考えても現実的ではありません。

また上記で挙げたような相対パスでの指定もうっかり階層がずれることがあり、想定していたとおり表示されない場合があります。

このような時に有効なのがルートパスであり

/(指定するファイル)

記述するだけでリンクが可能でドメインの記述が省略できます。

先ほどと同じように002.htmlからstyle.cssを呼び出す場合は

/style/style.css

と記述するだけで指定ができます。

この記述だと階層が違う001.htmlからでも同じように呼び出せますね。

まとめ

以上ちょっと思いついてまとめてみましたが、ブログやホームページを運営する場合間違いなく利点があります。

WordPressなどの場合は、自動的に判断して表示してくれたり、コピペしたりすることが多いので中々実感することは少ないとは思いますが、慣れてくると直接ファイルなどを触る機会も増えてくると思います。

そういった意味では理解とまでは行かなくてもこういう仕組みがあるということだけでも覚えておくと今後役に立つことでしょう。

 


スポンサーサイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)