目次
動画解説
1.・リンクとは？
※クリックすると画像が大きくなります。
各ページ間を連結させ、他のページを参照させる事をリンクと言います。
例えば、【SEOを重視するなら、H1タグを必ず編集しましょう。】
『H1タグを必ず編集』の部分にマウスカーソルを合わせるとクリックが出来るようになっています。H1タグを編集するためにはどうしたら良いかというページに推移します。
これをリンクと言います。
例えば、【SEOを重視するなら、H1タグを必ず編集しましょう。】
『H1タグを必ず編集』の部分にマウスカーソルを合わせるとクリックが出来るようになっています。H1タグを編集するためにはどうしたら良いかというページに推移します。
これをリンクと言います。
基本的に全てのページはリンクで繋がっていなければならず、
①グローバルナビゲーションは主要なページに推移させる
②文章内のリンクは、参考ページを参照させる。
などの役割がそれぞれあります。
2.リンクの用語説明
| 内部リンク | 同一ドメイン内で参照するリンクを内部リンクと言います。上記1番で説明したのが内部リンクにあたります。 |
| 外部リンク | 外部ドメインを参照するリンクを外部リンクといいます。他のサイトを紹介したい時などはこの外部ドメインに対するリンクを貼ります。 |
| 発リンク | リンクを発する事を言います。外部リンク・内部リンク共に、リンクを発していればこの発リンクにあたります。 |
| 被リンク | リンクを受けているという事象を言います。他のサイトから紹介されてリンクを受けていた場合は、『被リンクされている』と言います。 |
3.フォルダ構造の説明
ホームページを作る上で、ページが増えてきた場合などはフォルダ内にHTMLファイルを置く事が出来ます。
しかし、このフォルダを作って第一階層(CSSなどが置いてあるフォルダ)のファイルをコピーして来ただけでは、ホームページ作成ソフトを使っていない場合など各リンク構造が壊れてしまいます。
30ページ程度までは、第一階層にHTMLファイルを置くようにして慣れてきたらフォルダ分けなどを行いリンク構造の再設定をしてページを増やしていきましょう。
しかし、このフォルダを作って第一階層(CSSなどが置いてあるフォルダ)のファイルをコピーして来ただけでは、ホームページ作成ソフトを使っていない場合など各リンク構造が壊れてしまいます。
30ページ程度までは、第一階層にHTMLファイルを置くようにして慣れてきたらフォルダ分けなどを行いリンク構造の再設定をしてページを増やしていきましょう。
■第一階層のナビゲーションバーを例に取ってご説明致します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--ナビゲーションバー--> <nav class="fluid nav"> <div class="nav_in"> <li class="topss cols"><a href="index.html">トップページ</a></li> <li class="cols"><a href="page.html">コラム</a></li> <li class="cols"><a href="word.html">用語集</a></li> <li class="cols"><a href="company.html">運営会社</a></li> <li class="last cols"><a href="sitemap.html">サイトマップ</a></li> <li class="last cols"><a href="sitemap.html">ランキング</a></li> </div> </nav> <!--ナビゲーションバー--> |
■このファイルが、第二階層（ranking)フォルダに入っていた場合のリンク設定は以下の通りとなります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav class="fluid nav"> <div class="nav_in"> <li class="topss cols"><a href="../index.html">トップページ</a></li> <li class="cols"><a href="../page.html">コラム</a></li> <li class="cols"><a href="../word.html">用語集</a></li> <li class="cols"><a href="../company.html">運営会社</a></li> <li class="last cols"><a href="../sitemap.html">サイトマップ</a></li> <li class="last cols"><a href="../sitemap.html">ランキング</a></li> </div> </nav> <!--ナビゲーションバー--> |
<a href>タグの中に、【../】という記述が入ったのがお分かりになられるでしょうか？
これは、1階層前のファイルを読み込むという指定です。これによってリンクが正常化されます。
また、この設定は全ての
①画像ファイル
②CSS読み込みコード
③JavaScript読み込みコード
にも適用する必要がありますので、TeraPad等で変更するには大変な手間になってしまいます。
この編集に関しては中級者～上級者向けの内容となりますので、少し難しいなと感じる方はページを作っていって慣れてきた頃に挑戦してみましょう。
これは、1階層前のファイルを読み込むという指定です。これによってリンクが正常化されます。
また、この設定は全ての
①画像ファイル
②CSS読み込みコード
③JavaScript読み込みコード
にも適用する必要がありますので、TeraPad等で変更するには大変な手間になってしまいます。
この編集に関しては中級者～上級者向けの内容となりますので、少し難しいなと感じる方はページを作っていって慣れてきた頃に挑戦してみましょう。
4.全てのページが完成したらリンクを繋ごう
全てのページが完成した段階で、『index.html』のリンクを各ページすべて繋げます。
以下のソースコードを、それぞれの下層ページの同じ箇所にコピー＆ペーストするだけでリンクの設定は完了です。
以下のソースコードを、それぞれの下層ページの同じ箇所にコピー＆ペーストするだけでリンクの設定は完了です。
| サブメニュー | ソースコード34行目～43行目 <!–ヘッダーロゴ部分–> |
| グローバルナビゲーション | ソースコード 45行目～56行目 <!–ナビゲーションバー–> |
| サイドバー | ソースコード 202行目～238行目 <!–ページサイドバーー–> |
| コピーライト | ソースコード 242行目～243行目 |
■サブメニュー
|
1 2 3 4 5 6 7 8 9 10 |
<!--ヘッダーロゴ部分--> <div class="gridContainer clearfix"> <div class="fluid" id="div1"><a href="index.html"><img width="100%" class="title" alt="" src="images/rogo.png"></a></div> <div class="fluid yoko zeroMargin_desktop"> <h1>H1が入ります。</h1> </div> <div class="fluid yoko zeroMargin_desktop2"> <a href="index.html">HOME</a> | <a href="company.html">運営会社</a> | <a href="sitemap.html">サイトマップ</a> </div> <div class="fluid yoko zeroMargin_desktop"><a rel="sidebar" href="javascript:void" onclick="toFavorite(location.href,document.title);"><img width="127" height="24" style="margin-top:15px;" alt="お気に入りに追加" src="images/okiniiri.png"></a> </div> </div> <!--ヘッダーロゴ部分--> |
■グローバルナビゲーション
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--ナビゲーションバー--> <nav class="fluid nav"> <div class="nav_in"> <li class="topss cols"><a href="index.html">トップページ</a></li> <li class="cols"><a href="page.html">コラム</a></li> <li class="cols"><a href="word.html">用語集</a></li> <li class="cols"><a href="company.html">運営会社</a></li> <li class="last cols"><a href="sitemap.html">サイトマップ</a></li> <li class="last cols"><a href="sitemap.html">ランキング</a></li> </div> </nav> <!--ナビゲーションバー--> |
■サイドバー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!--ページサイドバーー--> <div class="side"> <div class="side_top"><img src="img/koukoku.png" alt=""/></div> <div class="lefts"> <div class="about"> <div class="read">メニュー</div> <ul class="about"> <li class="dai"><a href="index.html">トップページ</a></li> <li class="dai"><a href="sitemap.html">サイトマップ</a></li> <li class="dai"><a href="company.html">運営者情報</a></li> </ul> </div> <div class="read"> 目的別で選ぶ</div> <div class="ban"> <ul> <li class="yaji"><a href="#"><img src="images/baner1.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner2.png" alt="タイトル"/></a></li> </ul> <ul> <li class="yaji"><a href="#"><img src="images/baner3.png" alt="タイトル"/></a></li> </ul> <ul> <li></li> </ul> <div class="about"> <div class="read">コラム</div> <ul class="about"> <li class="dai"><a href="#">Page1</a></li> </ul> </div> </div> <div class="fluid koukoku" style="text-align:center; margin-bottom:15px;"><img src="img/koukoku2.png" alt=""/></div> </div> </div> <!--ページサイドバーー--> |
■コピーライト
|
1 2 |
<div id="footer"> Copyright (C) 2014 ●●● All Rights Reserved.<br /> ※当サイトのテキスト・画像等すべての転載転用、商用販売を固く禁じます。 </div> |
上記は全て、初期状態でのソースコードとなります。
実際には、すべてリンクを繋ぎ編集が完了した時点で確認をして、下層ページにも同じソースコードを上書きしましょう。
実際には、すべてリンクを繋ぎ編集が完了した時点で確認をして、下層ページにも同じソースコードを上書きしましょう。
5.ファイルの上書き保存をする
※クリックすると画像が大きくなります。
TeraPadの矢印部分『ファイル』をクリックします。
※クリックすると画像が大きくなります。
TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。
以上で、編集されたファイルが出来上がりました。