マウスオン・スライドショー作成フォーム

サムネイルにカーソルを乗せると、画像が左から右へぼかしがかかったように切り替わるスライドショーを作成します。

IMAGE
COMMENT

◆使い方◆
説明に従って、必要な項目に記入してください。
最後に「作成」ボタンを押すと、スライドショーのソースが自動作成されます。
そのソースをコピーして、ブログの記事に貼り付ければ完了です。

※gooブログ+IE専用です。IE以外のブラウザでは動作しません。

1 画像をアップロードします

スライドショーにしたい画像を、ご自分のブログにアップロードしてください。
このスライドショーでは5枚必要です。
画像の縦と横のサイズは、5枚とも共通にしてください。

このページと、ご自分のブログの編集画面を横に並べておくと、作業が楽です。
画像は、ブログの記事からはみださないサイズにあらかじめ縮小してください。

2 スライドNOを記入します

任意の数字を半角で記入してください。
同じ番号のスライドショーが同じブログ上にあるとエラーを起こしますので、二つ目以降は前と違う番号を振ってください。

スライドNOgw ※必ず「半角」にして入力すること。

3 画像のURLと、コメントを入力します

画像のURLをコピーして、下記のURL欄に貼り付けてください。
また、その画像の下に表示させるコメントを入力して下さい。

画像1URL
コメント
画像2URL
コメント
画像3URL
コメント
画像4URL
コメント
画像5URL
コメント

◆画像のURLって?◆
アップロードした画像の1枚1枚それぞれについている「アドレス」のことです。
gooブログの場合、ブログの「編集画面」から「画像フォルダ」を開き、使用する画像の上でクリックすると画像だけのウィンドウが開きます。
そのウィンドウのアドレス欄に表示されている、「http://blogimg.goo.ne.jp/user_image/〜」というのが、その画像のURLです。
それを最後までコピーして、このページのURL欄に貼り付けてください。

4 画像のサイズを入力します

アップロードした画像のサイズを入力してください。
(サムネイルのサイズは変更してもしなくても構いません。)

画像のサイズ横(width)px 縦(height)px
サムネイルのサイズ横(width)px 縦(height)px

画像のサイズがわからないときは、アップロードした画像の上で右クリックし「プロパティ」を開いてください。すると画像サイズが、例えば「大きさ 600 × 400 ピクセル」のように表示されています。数字は(横×縦)なので、この場合画像のサイズは横600px、縦400pxです。
gooブログの場合、ブログの「編集画面」から「画像フォルダ」を開き、使用する画像の上でクリックすると画像だけが大きく表示されたウィンドウが開きます。そこで右クリックしてプロパティを開いてください。

5 枠の設定をします

枠線の色 色を選んでください
線の種類
枠線の太さ
※線の種類で溝線、稜線、沈み込み、浮き上がりを選んだ時は、線の太さを3以上にしてください。
枠線と画像の間隔 px
画像と枠線の間の余白。0にすると画像が枠内ぴっちりに表示されます。
背景色 色を選んでください
コメントの色 色を選んでください

以上で入力は終わりです。

6 ソースを作成します

「◆作成◆」ボタンをクリックしてください。


次に「結果をプレビューで確認」ボタンをクリックしてください。新しいウィンドウが開き、作成したスライドショーを確認することができます。

7 ブログに貼り付けます。

出来上がったら、↓この中を右クリックして、コピーしてください。

ブログの記事に貼り付けし、記事を保存して終了です。

修正したいところがあれば、該当項目を直して、もう一度「◆作成◆」ボタンを押してください。
(「◆作成◆」を押さないと、修正結果がソースやプレビューに反映されません。)


スライドショーのソースは「nonのカメラ紀行」様で公開されているマウスオン・スライドショー(トランジション:タイプII)「10 Gradientwipe」を使わせていただきました。
(元のままではなく、レイアウトや書式設定を変更しております。)

フォーム作成 *KT* 2008/09/03---更新2008/09/08