greybox見本一覧

HOME > プラグイン > greyboxプラグイン > greybox見本一覧

greyboxプラグイン見本一覧
基本のタグ

greyboxプラグイン見本一覧

画像をポップアップで表示する事ができる、greyboxプラグインの見本一覧です。

プラグインの設定方法については、greyboxプラグインをご覧ください。

当サイトご利用の際は、ご利用方法をまずご覧ください。

基本のタグ

&greybox(img/画像ファイル名,title,group){label};

title : 画像のタイトル
ポップアップページに表示されるタイトルになります
お好きなタイトルを入れてください。
group : グループ名。省略可。
同じグループ名で設定したものは、ポップアップページのボタンで移動できます。
同ページ内であれば、同じグループ名の画像は全てポップアップされます。
ポップアップのグループを分けたい場合は、グループ名を変更してください。
グループ名を省略すれば、一つのリンクに一枚ずつのポップアップになります。
label : リンクさせたい画像や文字。
画像にリンクさせる場合は、QHM内に画像をアップロードしてください。
画像のアップロードについては、画像の貼り付け方をご覧下さい。

他のフォルダ名をつけてた場合imgをそのフォルダ名に置き換えてください。
imgフォルダの中にさらに分類フォルダを作っていた場合は、
img/フォルダ名/画像ファイル名　になります。
(このページの画像もimg/popupというフォルダにアップロードしていますが、見本タグでは分かりやすいようにimgだけで記載しています。）
トップ階層以外にフォルダを作っていたら、そのフォルダの階層位置を指定する必要があります。
階層指定がよく分からない方は、この通り作成してください。

テキストに一枚のポップアップ画像

三匹の猫

ポップアップ画像のタイトル名：猫
ポップアップ画像のファイル名：cats.jpg
三匹の猫　というテキストにポップアップリンクを張る

&greybox(img/cats.jpg,猫){三匹の猫};

テキストに装飾をつけることも出来ます。

三匹の猫

ポップアップ画像のタイトル名：猫
ポップアップ画像のファイル名：cats.jpg
三匹の猫　というテキストに黄色のマーカー装飾をして、ポップアップリンクを張る

&greybox(img/cats.jpg,猫){&color(black,yellow){''三匹の猫''};};

　※この場合、グループ名は必要ないので、省略しています。

一枚の画像に一枚のポップアップ画像

ポップアップ画像のタイトル名：犬
ポップアップ画像のファイル名：dog.jpg
QHMにアップロードした画像：dog_s.jpg

&greybox(img/dog.jpg,犬){&ref(dog_s.jpg,nolink,犬);};

QHM内の画像とポップアップの画像は、別ルートにアップロードしているので、違う画像をポップアップさせる事もできます。

ポップアップ画像のタイトル名：犬
ポップアップ画像のファイル名：dog.jpg
QHMにアップロードした画像：cats_s.jpg

&greybox(img/dog.jpg,犬){&ref(cats_s.jpg,nolink,猫);};

　※この場合、グループ名は必要ないので、省略しています。

複数の画像に複数のポップアップ画像

ページ送りで全ての画像を表示させる

&greybox(img/dog.jpg,犬,animal){&ref(dog_s.jpg,nolink,犬);}; &greybox(img/cats.jpg,猫,animal){&ref(cats_s.jpg,nolink,猫);};

ポップアップ画像のタイトル 1：犬　2：猫
ポップアップ画像のファイル名　1：dog.jpg　2：cats.jpg
グループ名：amimal
QHMにアップロードした画像　1：dog_s.jpg 2：cats_s.jpg

それぞれのタグの間に半角スペースを入れているので、画像の間に隙間が出来ます。
タグをつなげると、画像を密接させることが可能です。
タグを改行して入力すれば、上下に画像を表示させる事ができます。
グループ名を入れることにより、ポップアップ画像のページ送りボタンで全ての画像を閲覧できます。

それぞれの画像に、一枚ずつのポップアップ

&greybox(img/dog.jpg,犬){&ref(dog_s.jpg,nolink,犬);}; &greybox(img/cats.jpg,猫){&ref(cats_s.jpg,nolink,猫);};

グループ名を省略すると、それぞれ別にポップアップされます。

一枚の画像に複数のポップアップ画像

ポップアップ画像のタイトル　1：犬　2：猫　3：ライオン
ポップアップ画像のファイル名　1：dog.jpg　2：cats.jpg 3：lion.jpg
グループ名：amimal2
QHMにアップロードした画像：click.gif

&greybox(img/dog.jpg,犬,animal2){&ref(click.gif,nolink,ここをクリック);}; &greybox(img/cats.jpg,猫,animal2){ }; &greybox(img/lion.jpg,ライオン,animal2){ };

二つ目以降のタグの{}内に、半角スペースを入れる事により、一つのリンクで複数の画像をポップアップさせる事が可能です。
画像でなく、テキストにリンクを張ることももちろん可能です。

タイトルの代わりに説明文を入れる

ポップアップ画像の説明文：私の家族の三匹の猫です。いたずらっ子ですが、とてもかわいいです。
ポップアップ画像のファイル名：cats.jpg
QHMにアップロードした画像：cats_s.jpg

&greybox(img/cats.jpg,私の家族の三匹の猫です。<br>いたずらっ子ですが、とてもかわいいです。,amimal3){&ref(cats_s.jpg,nolink,猫);};

タイトルの文字数制限はありませんので、説明文を入れることが出来ます。
改行したい場合は、改行部分に<br> を挿入してください。
通常、一枚だけ画像をポップアップさせるには、グループ名は省略できますが、改行タグの<br>を有効にする為には、グループ名が必要です。
（グループ名を省略すると<br>タグがそのままタイトルに現れます。）
グループ名を入れる事により、一枚だけのポップアップでもページ数が表示されることになります。

このページのトップに戻る

選択肢	投票
参考になった	5
使ってみたい	0
実際に使ってみた	2

QHMユーザーの為のリファレンス

QHM(クイックホームページメーカー)なら、ホームページを簡単に作成出来ます。
QHMの使い方、編集方法、レイアウト、SEO対策などをご紹介しています。