スライドショー作成(2) － 「cincopa」サイトの埋め込みスライドショー作成サービス(2)

今回はスライドショーとは言いませんが、多数の写真を分かり易くデザインも良く、インデックス的な役割を果たす「cincopa」のテンプレート(Skin)を使ってみます。



左フレームの「Skin Types」で「Grid (Videos & Images)」→「Responsive imagelist with rectangle thumbs」を選択します(こちら)。


縦長の写真4枚を用意したので、こちらの様にブログ記事エリアの幅と写真サムネイルを横に3枚表示するように設定します。



スクリプトで(「No JS support」のスクリプトでブログ記事エリアの幅となる修正して。以下同様)記事に埋め込んだのが下です。



拡大画像はスクリプト内の<iframe width="600" height="430"・・・>によりますので、ブログ記事の幅に合わせたい時は写真の縦横比を考慮して調整します。



この場合記事に空白エリアが生じます。この辺はサムネイルと拡大写真を同じエリアに表示する限界といえます。写真の数を大幅に増やして拡大写真の表示サイズに合わせサムネイルの数を増加して、スペースを有効に使う手はあります。



逆に写真の数が非常に多く、サムネイルの表示エリアが拡大する場合には、サムネイルに対するページ制御が必要になります。その場合にはこちらの様にカスタマイズの「Advanced」で、1ページのサムネイル数を制限してページ制御パネルを設定します。


結果が下です。



これまでの2例は同じ縦横比の写真でしたが、実際にはそうはいきません。そこで使えるのがデザイン「Pinterest style gallery with rounded thumbs」です(こちら)。




サムネイル幅などを設定した(こちら)上の結果が下です。




尚、ここではSeesaaブログシステムに限った投稿をしていますが、他のブログシステムや一般的なWebサイトで使う時は上掲の制約がなかったり、逆に別の制約があるかも知れません。