BiND for WebLife*３は、画像ギャラリーなんかもAjaxを用いたり、あるいはID for web life*＋を埋め込んだりしてリッチな表現ができるようになっている。これ、複数の画像を次々に見せたいヒトにはちょうどいい機能のひとつだと感心して見ています。
でも、それを実現するには、ローカルサイドで
- 1つづつ画像を選択して
- 並べて、
- 完成したそれをアップロードしてやらねばならない。
いやいや、充分に便利 ですよ。本来ならば、サムネイルとなる画像と表示用画像とを用意して、サムネイルを並べて表示用にリンクして……っていう面倒な作業を、BiND for WebLife*ならば、ほいほい並べていくだけで半自動で全部やってくれるわけだから。便利！
でも、モノグサ太郎は、ちょっとした便利に慣れてしまうと、更なる便利を追求してしまいます。仕方がないことです。
例えば、時々写真を増やしたいけれども、1点づつ設定してアップロードするのが面倒くさーい！ とか。あるいは、こんなこともあるだろう。
- ウェブサイトは1つなんだけど
- 画像作製は複数人
- 作られた画像をBiNDを操作する特定の1人に画像を送って、
- その送られた代表者がBiNDにまとめて作業をしなければならない
こうなると、その担当者ばかりに負担がかかるし、その担当者が手を打ってくれない限り画像が公開されないという事態に陥ってしまう。
——それは、不便。担当者に選ばれた1人も不幸だ。
そういうときは、minishowcaseを使うと便利！ という提案をしました。
でも、たいへん便利で重宝なminishowcasseも完璧ではありません。だって、（背景色などを揃えたとしても）ヘッダ・フッタはもちろんのこと、ナビゲーションだって付きません。突然そんなページにリンクしているだけだったら、元に戻れなくなるヒトがいることでしょう。そういうヒトって、どうしたらよいかわからなくなったら、その画面を閉じちゃいますね！
そうならないように、minishowcaseをイイ具合にBiNDで作ったページに埋め込みたいと思います。
そう簡単にいかないのは、minishowcaseがPHPで、BiNDはPHPファイルの編集ができないからです。でも、いろんなツールを使わねばならなくなると、そのツールの使い方の説明まで求められてちょっと面倒なので、このたびは<iframe>で埋め込むだけにします。
- このページを参考にして不具合が生じても、記事掲載者はその責を負わないものとします。
minishowcaseはどこに、どんな名前？
まず、minishowcaseのURLを探してください。おそらくご自分でアップロードしているはずですので、すぐに見つかることでしょう。フォルダ名を変えたら、その変更したフォルダ名まで必要です。たいていは、こんな感じじゃないかと思います。
http://www.あなたのドメイン/minishowcase/
では、BiND for WebLife*３を起動しましょう。
まずは、ギャラリー専用の新しいページが必要ですので、「追加ページ」で新しいページを作ってください。この時「新規コーナー」を作ってその中に入れてもいいです。
どのスタイルのどのカートリッジでもいいですけれども、可能ならばサイドが無い、縦にズドーンと一列のA-1 I型のページレイアウトにすることを推奨します。もちろん、目的によりますので禁止はしませんけど。
というのは、BiND３でとくに考えずに作ると、幅が823pxくらいです。そしてサイドがだいたい230pxくらいです。というと残りのコンテンツ部はざっと引き算をして593pxしかありません。
minishowcase自体が、ギャラリー一覧というサイドメニューを持っているために、表示エリアがどんどんせまくなってしまいますので、なるべくサイドの無いレイアウトの方が納まりがよいのではないかと想像します。minishowcaseの初期設定が幅800pxですし、何かとちょうどいいのです。
なお、一身上の都合によりサイドが必要な場合は、minishowcaseの幅をそれに合わせて小さくしておかないとはみ出しちゃいますのでご注意を。
さて、ではそのページのコンテンツのメインブロックを選択して編集します。
からっぽでかまいません。[カスタムタグ]のボタンをクリック。
パーツ名は後から見て理解できれば何でもいいので、ここでは「minishowcase」としました。
その下の[HTMLソース]にはこんな内容を書きます。
<iframe src="http://www.あなたのドメイン/minishowcase/" width="100%" height="600" hspace="0" vspace="0" border="0" frameborder="0" scrolling="auto" marginheight="0" marigihwidth="0"></iframe>
「あなたのドメイン」って書かないでね。
この中の、height=”600″は、minishowcase内で設定したサムネイルの行数に影響を受けますので、ちょうどよく収まるように適宜調整してください。
続いて、ブロックの設定で「上下左右の余白をゼロにする」をチェック。
これで、[適用]して閉じます。そうすると、サイト編集画面に早速ギャラリーが埋め込まれて表示されているコトでしょう。表示されていないのは、URLを初めとする何かが間違えていますので、目を皿のようにしてソースをよく見直してください。たとえば「www」を「ww」と間違えるだけで、表示できなくなります。また、すべて半角英数字ですのでお間違えのないように。
これで、念のためプレビューして問題が無いようでしたらアップロードして、おしまい。
埋め込むギャラリーページが検索されないように
個人的好みの問題ですけど、埋め込まれるギャラリーのページが検索されちゃうと、そのページをダイレクトに開かれやすくなります。
ページビューが増えることが単純に嬉しいヒトはそのままにしておけばよいのですが、そのギャラリーページからBiNDで作られた本体へ遷移して他のページも見てもらえる、という可能性はかなり小さくなります。それでは検索される意味も半減。
というわけで、minishowcaseのフォルダ内にあるindex.php内にこんな1行を追加しておくとよいでしょう。
<meta name="robots" content="noindex" />
挿入場所は、60行目付近<head>の直後か、119行目付近</head>直前に。
こうしておくことで、お行儀のいい検索エンジン巡回ロボットには見なかったことにしてもらえます。
本来ならば、minishowcase側にヘッダとフッタを付ける形でやりたい気もするのですけれども、説明するのが面倒くさいし、説明するために検証するのも面倒くさいです。
- ダミーページを作る。コーナーのディレクトリ名はminishowcaseと違う名前に。
- HTMLエディタで、ダミーページのソースを開く。
- HTMLエディタで、minishowcaseのadd_header.phpとadd_footer.phpも開く。
- ダミーページのソースから、ヘッダ部分とフッタ部分をそれぞれのファイルに書き込む。
- add_header.phpとadd_footer.phpをアップロードして、ダミーページは破棄。
でも、ダミーページのソースからヘッダ部とフッタ部を切り出すのが面倒なのだ。だから、やらない。
