目次
- 通常のアンカータグ
- 別ページへのアンカータグ（ページ遷移あり）
- 同じページの特定箇所へのアンカータグ（ページ内リンク）
- 別ページへのアンカータグ（javascriptで少し工夫）
- ポップアップで別ページ表示（jQuery版）
※今回はコンテンツをポップアップするモーダルウィンドウのようなイメージではなく、完全に異なるページを開くやり方
通常のリンク指定をしてみる。
ここら辺はおさらいというか基礎知識。
一般的なホームページを作るのであれば、一番使用頻度は高いはずです。
そして「ホームページを作りたい！！」と意気込んで勉強し始めた場合、一念発起した当日か翌日くらいに身につける部分ではないでしょうか。
|
1 |
<a href="https://www.yahoo.co.jp/">Yahoo!のホームページ</a> |
するとブラウザ上では
デモ：通常のページ遷移 Yahoo!のホームページ
と表示されますね。
も文字部分をクリックするとその他ページに飛びます。
ホームページ内で別ページへ飛ばしたりする場合に使います。
別ページへ飛ばす「target=”_blank”」というリンク指定をしてみる。
せっかく自分のホームページを見てくれている人をリンクで他のサイトへ飛ばしたくない場合ってありますよね。
そのような場合に使うことが多いと思いのでは。
リンクテキストを右クリックすると「新しいタブで開く」ってメニューが出てくると思います。
これのイメージです。
|
1 |
<a href="https://www.google.co.jp/" target="_blank">Googleのホームページ</a> |
するとブラウザ上では
デモ：別タブの遷移 Googleのホームページ
と表示されます。
先ほどのYahoo!の場合と違い、この記事のページを残したまま異なるページを表示させることが可能です。
ページ内リンクを指定してみる。
イメージとしてはこのページの「目次」部分です。
該当の項目をクリックすると、指定場所へ遷移すると思います。
|
1 |
<a href="#指定の属性名">↑の「通常のリンク指定」の箇所へ移動</a> |
このページの最初の見出しの
<h2>通常のリンク指定をしてみる。</h2>
ここの部分を
<h2 id=”#page-index01″>通常のリンク指定をしてみる。</h2>
というソースで記述しています。
そして上記の「#指定の属性名」の部分を「#page-index01」と、属性を合わせてあげると、
こんな感じで同一ページ内で特定の箇所に遷移することが可能です。
Smooth scrollなどの挙動と合わせれば、ゆっくりと移動していきますね。
ウィンドウサイズを指定して別ページで開く
別ページタブで開きたいけどサイズを指定したい場合。
|
1 2 3 |
<a href="https://levelf.jp/simple-card-design/" onclick=" window.open('https://levelf.jp/simple-card-design/', '_blank', 'width=400,height=600'); return false;">弊社の名刺の記事をちっちゃく開いてみる</a> |
※width=400 → ウィンドウの横幅（px）、height=600 → ウィンドウの縦幅（px）
最後のreturn falseでhref=””の中身を無効化して、window.openの中で指定したURLへリンクしています。
なんか気持ち悪いなという場合は、
|
1 |
<a href="javascript:void(0);" onclick="window.open('リンクしたいURL', '', 'width=400,height=600');">テキスト</a> |
これでもOK。
逆に、もっとシンプルにしたいんだという場合はアンカー部分を
|
1 |
<a href="javascript:openwin();">head内記述の別パターン</a> |
として、別にhead内に
|
1 2 3 4 5 |
<script type="text/javascript"> function openwin() { window.open("https://levelf.jp/simple-card-design/", "_blank", "width=400,height=600"); } </script> |
こんな記述にしても同じ動作になります。
jQueryを使ってちょっとかっこよくポップアップしてみる。
使うjQueryは「colorbox」。
ダウンロード元：Colorbox – a jQuery lightboxの青い「Download」ボタン
基本的なファイルは「jquery.colorbox-min.js」とexample●の中から好みのデザインのフォルダの中の「colorbox.css」と「images」フォルダ一式OKです。
head内に記述
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="指定したディレクトリ/jquery.colorbox-min.js"></script> <link rel="stylesheet" type="text/css" href="指定したディレクトリ/colorbox.css"/> <script> $(document).ready(function(){ $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); }); </script> |
jQueryはご自身の都合に合わせて。
jquery.colorbox-min.jsはアップロードしてディレクトリ先の指定してあげてください。
そして、cssを元々のcolorbox指定のcssからいじらないで利用する場合は、colorbox.cssをアップロードしたフォルダに「images」フォルダをそのままアップしてください。
HTMLの記述
|
1 |
<a class="iframe" href="https://levelf.jp/seo-rule/">弊社のSEOについての記事</a> |
こんな感じになります。
上記はダウンロード元から落としたcolorboxの中の「example3」のデザインを利用しております。
widthとheightを%指定してあげればスマホでも特に問題ありません。
が、私はスマホでポップアップする意味に懐疑的なので使い方は考えますが。
リンクの仕方についてまとめてみたのまとめ
要するに別ページに飛ばすやり方も様々であり、使う場面が重要だということです。
同じページ内で今のページを残したまま別ページを開かせるような指定が多発すると、1サイト見終わる頃にはブラウザがタブだらけになってしまいストレスがたまります。
しっかり目的を持って、見る人が使いやすいサイト設計を心がけた上でアンカータグの工夫をすることが第一ですね。
