画像をポップアップで表示する
画像をポップアップで表示する
画像をホームページで表示させるのに、そのまま画像を貼り付けてもいいのですが、詳しく見せる為に大きく表示させると、ページが重たくなってしまいますし、小さいとよく見えません。
右のように、ページ内に小さな画像を貼り、そこに元画像のリンクを貼って、別窓で表示させるのが、一番簡単でよくある方法だと思います。この方法は簡単ですが、画像ごとに窓が立ち上がってしまうので、複数画像がある時は不便なこともあります。
ポップアップ機能を使うと、見栄えよく画像を拡大表示させることができ、フォトアルバム作成や、商品の詳細画像などにも最適です。
画像をポップアップで表示するには、greyboxとlightbox2の二つのプラグインがあります。
greyboxとlightbox2とは
この二つのプラグインは、タグの設定方法は全く同じです。
ポップアップ画面の見た目と機能性が違いますので、用途と好みによって、使い分けるのがいいと思います。
それぞれの設定方法については、
greyboxプラグイン lightbox2プラグイン に掲載させていただいています。
当サイトご利用の際は、ご利用方法をまずご覧ください。
greyboxとlightbox2の違い
greybox
- ポップアップ画面上部に、タイトル名とページ送り用ボタンが表示されます。
- ページ数は 2/3 のように表示されます。
- タイトルを一行で長く設定すると、ページ送り用ボタンの位置が右にずれます。
- タイトル文字が大きいです。
詳しい設定方法についてはgreyboxプラグインをご覧ください。
lightbox2
- ポップアップ画像下に、タイトル名が表示されます。
- ページ数は Image 2 of 3 のように表示されます。
- ページ送り用のPREV,NEXTボタンは、画像上部にカーソルを移動させると現れますが、画像が複数あることが分かりづらいです。
- タイトル文字が小さいので、少し見にくいです。
詳しい設定方法についてはlightbox2プラグインをご覧ください。
－Special Thanks－
プロカメラマン撮影の無料写真素材・フリー画像素材のリンクスタイル
編集方法
基本的なおまじないから、応用的な使い方までご紹介しています。
- ダウンロード機能
- ヘッドコピーの入力
- 文字色の変更
- マーカー色の変更
- 自動リンクの解除
- MP3音源をホームページで再生させる
- 枠の使い方
- リンクの作成
- トップに戻るリンク
- ヘッダーの編集
- ヘッダーに画像を使う
- 画像をポップアップで表示する
- 画像の貼り付け方
- 文字の回り込み
- 画像貼り付けの応用
- カウンターの設置
- ページ名について
- 検索ボックスの設置
ＨＯＭＥ
レイアウト
cssファイルを編集して、自由自在にカスタマイズしましょう。
プラグイン活用
プラグインを使えば、高機能なホームページを簡単に作成出来ます。
SEO対策
検索エンジンの登録方法や、上位HITの対策などをご紹介。
機能性アップ
QHMの基本機能以外を使って、さらにサイトのグレードアップを！
相互リンク
相互リンクで、アクセスアップ！SEO対策にもなります。登録はお気軽にどうぞ。
Information
Link
