これまでスライドショーとしてまとめる場合には写真共有サイトにアップロードして、スライドショー機能を使っていました(例えば「フォト蔵」でこちら)。
スライドショーにも少し好みのデザインを入れたいとして、スライドショーの仕組みを使ってみます。今回は多機能な「cincopa」サイトの埋め込みスライドショー作成サービスを使います。先ずこちらから(無料の)アカウントを取得します。
「START NOW」から始めてもいいのですが(「Select Skin」を一度してからの登録となる)、「LOG IN」→「Sign up with email」で新規ユーザ登録します。
４ステップで行いますが、最初のステップ「Select Skin」で左フレームから「Slider (Videos & Images)」をクリックして好みのデザインを選びます(こちら)。
今回は中央の「Responsive jquery slider」を選択しました。こちらは機能の説明なので「Ok, GOT IT!」をクリックして左フレームの「Basic」情報を埋めます(こちら)。
本ブログ記事の幅に合わせて400 PXを設定しています。
「NEXT」で第3のステップ「Upload & Manage Assets」へ進みます。｢Drag and Drop｣または「Choose Hiles」でスライドショーに組み込む写真を指定します(こちら)。
登録写真は全て同じサイズ・同じ縦長の縦横比(9：16)です。複数ファイル同時アップロードができ、追加も可能です。画像の編集もこのステップでできます。
写真がそろった所で「NEXT」により最終ステップ「Embed Gallery」でスクリプトを作ります。ブログシステムによって異なりますが、Seesaaブログでは<iframe>を使いますので、左フレームで「No JS suport」を選択します(こちら)。
このコードをブログ記事に埋め込みますが、<iframe>にある｢width=｣と｢height=｣の値を修正する必要があります。今回は操作パネルを表示する為に「width="400" height="730"｣としました。
