新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

クリックorタップで別ページをオーバーレイ表示する方法:Colorboxの使用【jQuery】

2019.1.24

クリックorタップで別ページをオーバーレイ表示する方法:Colorboxの使用【jQuery】
Web制作 0 0

こちらの記事は、このような方におすすめです。

Webページのコンテンツをお見せする際に、
「ページ内に最初から表示させておきたくない、でも別ページに誘導する数秒ほどのアクセス時間ももったいない」
とお考えの方にお勧めです。

妙高Web屋LINE@ 友だち追加

ボタンを押すことで、最初は非表示にしておいたコンテンツや、別のページのコンテンツを表示させるテクニックはいくつか存在します。

そのうちの多くは「aタグ」が関係していますが、こちらでご紹介するものはColorbox(カラーボックス)と呼ばれるスクリプトを用いた方法です。

この記事の目次

【ダウンロード】Colorbox(カラーボックス)

今回使用するColorboxです。

フォトギャラリーのページで、ページ内に写真を拡大表示させる際に使用したことがある方も多いのでは?

下記のページに詳細が表示されています。

ページの先頭へ戻る

【実装】Colorboxを使ってモーダルウィンドウを表示する

クリックorタップで別ページのコンテンツを表示させる方法に関しまして、私が実装した際に参考にさせていただいたページはこちらです。

ありがとうございました。

こちらのリンク先では、クリックやタップで表示されるウィンドウのことを「モーダルウィンドウ」と呼んでいます。

ページの先頭へ戻る

【応用例】個人情報保護方針のように一時的に内容だけを参照するページ

さて、Colorboxで表示させるコンテンツは、フォトギャラリーの写真拡大表示以外にどのような利用方法が考えられるでしょうか。

私がこちらの機能を利用して実際に表現したのは、個人情報保護方針のページです。

妙高Web屋では2019年1月現在は、お問い合わせのページから個人情報保護方針をお見せする際に、別ページへのリンクで表現しています。

こちらでも何ら問題ないとは思いますが、お問い合わせフォームに設けられた個人情報保護方針のページは一般的に、

「フォームからリンクして、読んで、またフォームに戻る」

というアクションを、サイトの管理者からユーザーの方々に求めることが考えられます。

そのアクションの簡素化が見込めるのが、Colorboxを応用した方法という訳です(^^)!

Colorboxの機能を使って別ページの内容をオーバーレイ表示させることで、

「フォームに必要事項を入力して、個人情報保護方針を読んで、またフォームに戻る」

という動作や、ホームページのサーバーとの通信をより少なく抑え、時間短縮ができるのではないかと考えます。

この記事を読んでくださった皆さんは、どのような応用方法をお考えになったでしょうか?

あるいは、今どのような用途をご検討中でしょうか?

当記事の感想フォームから、お気軽にお寄せください。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ