レベルF株式会社

アンカータグまとめ+リンク先ページをポップアップで開くやりかた(別タブ・js・jQueryなどなど)
レベルF株式会社のブログとなります。
業務についてから社員のつぶやきまで日々更新してまいります。
HOME >レベルFのブログ > cssテクニック・jQuery > アンカータグまとめ+リンク先ページをポップアップで開くやりかた(別タブ・js・jQueryなどなど)

アンカータグまとめ+リンク先ページをポップアップで開くやりかた(別タブ・js・jQueryなどなど)

ホームページ上でできることが年々増えていることにより見せ方も多様化しております。
一つのホームページを作る上でアンカータグ(<a>タグ)の使い方って種類あると思います。そんなお話です。

目次

  1. 通常のアンカータグ
  2. 別ページへのアンカータグ(ページ遷移あり)
  3. 同じページの特定箇所へのアンカータグ(ページ内リンク)
  4. 別ページへのアンカータグ(javascriptで少し工夫)
  5. ポップアップで別ページ表示(jQuery版)

※今回はコンテンツをポップアップするモーダルウィンドウのようなイメージではなく、完全に異なるページを開くやり方

通常のリンク指定をしてみる。

ここら辺はおさらいというか基礎知識。
一般的なホームページを作るのであれば、一番使用頻度は高いはずです。

そして「ホームページを作りたい!!」と意気込んで勉強し始めた場合、一念発起した当日か翌日くらいに身につける部分ではないでしょうか。

するとブラウザ上では

デモ:通常のページ遷移 Yahoo!のホームページ

と表示されますね。
も文字部分をクリックするとその他ページに飛びます。

ホームページ内で別ページへ飛ばしたりする場合に使います。

別ページへ飛ばす「target=”_blank”」というリンク指定をしてみる。

せっかく自分のホームページを見てくれている人をリンクで他のサイトへ飛ばしたくない場合ってありますよね。
そのような場合に使うことが多いと思いのでは。

リンクテキストを右クリックすると「新しいタブで開く」ってメニューが出てくると思います。
これのイメージです。

するとブラウザ上では
デモ:別タブの遷移 Googleのホームページ
と表示されます。

先ほどのYahoo!の場合と違い、この記事のページを残したまま異なるページを表示させることが可能です。

ページ内リンクを指定してみる。

イメージとしてはこのページの「目次」部分です。
該当の項目をクリックすると、指定場所へ遷移すると思います。

このページの最初の見出しの
<h2>通常のリンク指定をしてみる。</h2>
ここの部分を

<h2 id=”#page-index01″>通常のリンク指定をしてみる。</h2>

というソースで記述しています。

そして上記の「#指定の属性名」の部分を「#page-index01」と、属性を合わせてあげると、

↑の「通常のリンク指定をしてみる。」の箇所へ移動

こんな感じで同一ページ内で特定の箇所に遷移することが可能です。
Smooth scrollなどの挙動と合わせれば、ゆっくりと移動していきますね。

ウィンドウサイズを指定して別ページで開く

別ページタブで開きたいけどサイズを指定したい場合。

弊社の名刺の記事をちっちゃく開いてみる

※width=400 → ウィンドウの横幅(px)、height=600 → ウィンドウの縦幅(px)

最後のreturn falseでhref=””の中身を無効化して、window.openの中で指定したURLへリンクしています。
なんか気持ち悪いなという場合は、

これでもOK。

逆に、もっとシンプルにしたいんだという場合はアンカー部分を

として、別にhead内に

こんな記述にしても同じ動作になります。

デモ:head内記述の別パターン

jQueryを使ってちょっとかっこよくポップアップしてみる。

使うjQueryは「colorbox」。
ダウンロード元:Colorbox – a jQuery lightboxの青い「Download」ボタン

基本的なファイルは「jquery.colorbox-min.js」とexample●の中から好みのデザインのフォルダの中の「colorbox.css」と「images」フォルダ一式OKです。

head内に記述

jQueryはご自身の都合に合わせて。
jquery.colorbox-min.jsはアップロードしてディレクトリ先の指定してあげてください。

そして、cssを元々のcolorbox指定のcssからいじらないで利用する場合は、colorbox.cssをアップロードしたフォルダに「images」フォルダをそのままアップしてください。

HTMLの記述

デモ:弊社のSEOについての記事

こんな感じになります。
上記はダウンロード元から落としたcolorboxの中の「example3」のデザインを利用しております。
widthとheightを%指定してあげればスマホでも特に問題ありません。

が、私はスマホでポップアップする意味に懐疑的なので使い方は考えますが。

リンクの仕方についてまとめてみたのまとめ

要するに別ページに飛ばすやり方も様々であり、使う場面が重要だということです。
同じページ内で今のページを残したまま別ページを開かせるような指定が多発すると、1サイト見終わる頃にはブラウザがタブだらけになってしまいストレスがたまります。

しっかり目的を持って、見る人が使いやすいサイト設計を心がけた上でアンカータグの工夫をすることが第一ですね。


Pick Up

Blog Category

Newest Blog

Blog Ranking

  1. チェックボックスをcssをいじっておしゃれにする方法チェックボックスをcssをいじっておしゃれにする方...
  2. JQueryを使わずにCSSのみで画像ポップアップを実装してみました。JQueryを使わずにCSSのみで画像ポップアップ...
  3. スクロールしても着いてくる固定メニュースクロールしても着いてくる固定メニュー...
  4. ワードプレスで固定ページのみ、トップページのみに記述・表示するページ分岐方法を改めてまとめてみた。ワードプレスで固定ページのみ、トップページのみに記...
  5. 個人事業主の方にWix(ウィックス)よりもWordPress(ワードプレス)をおすすめする理由個人事業主の方にWix(ウィックス)よりもWord...

お客様の期待値以上の成果物をお届けいたします。

レベルF株式会社は、ホームページ制作・運営コンサルティング会社を中心業務とし
都内、新宿・渋谷・池袋を中心に多くの企業様のお手伝いをしております。
ホームページのみにこだわらず名刺やパンフレットなどそれぞれ理想のお付き合いをさせていただくべく、
幅広いご提案をさせていただき、貢献させていただいております。
どんな些細な事でもお気軽にお問い合わせくださいませ。