酒井式ＷＥＢ展ＨＰ作成の手順with「すなねぃる！！」

酒井式ＷＥＢ展への出品サイトの簡単な作り方を紹介しています。「すなねぃる！！」というフリーソフトを使うとサムネイルから開いた画像が画面の真ん中に表示され、大変美しいサイトができあがります。また、操作も簡単なので時間をかけずにサムネイルサイトを作ることができます。

サムネイル作成ソフト「すなねぃる！！」ダウンロードＨＰ（ここをクリック）

このＨＰは、すなねぃる！！の開発者スナッピ氏に許可をいただいて作成しております。

１，画像を保管するフォルダを指定する

「すなねぃる！！」を起動する前に、使う画像をどこかに保存します。マイドキュメントでもどこでも結構です。今回「狼森と笊森、盗森」の途中経過のＨＰを作ってみましたので、それを例にしてみます。

２，作成したＨＰを保存するフォルダを作る

「すなねぃる！！」で作ったページを保存するフォルダを作っておきます。私は、自分のＨＰのフォルダは、すべて「ＭＹ　ＨＰ」というフィルダに入れてあるので、そのフォルダ内に「oinomori」というフォルダを作りました。

３，「すなねぃる！！」を起動します。

４，画像が保管されているフォルダを指定する

「画像の有るフォルダを指定してください」の右のフォルダマークをクリックして、マイドキュメントの「狼森と笊森、盗森」の写真が入っているフォルダを指定します。

５，画像フォルダからＨＰに掲載する写真を選択する

画像ファイルのリストから、ＨＰに写真を指定します。選択すると下に画像プレビューがでるので、それを見ながら、必要な写真を選択しながら画像の名前左の□マークチェックを入れます。

６，ＨＰを保管するフォルダを指定する

次に右側「ホームページの設定」に進みます。「全般」では、一番上「できあがったＨＰファイルをしまうフォルダを指定」します。「２」で作ったフォルダです。

７，出力ＨＴＭＬの名前・画像サイズを決める

出力ＨＴＭＬファイルの名前を指定します。私は、いつも「top.ｈｔｍｌ」とします。作成モードで「サムネイルを作成」を選択し、メイン画像用のページを作成するにチェックを入れます。画像サイズは「その他」を選んで、設定をクリックします。私は、画像サイズを１６０ピクセルに設定します。最後に、メイン画像サイズで、「画像サイズを変更する」にチェックを入れて、６００ピクセルとし、「縦横比を保つ」をチェックします。

８，写真のコメントを削除する

「コメント」タグを選んで、ここのチェックマークをすべてはずします。余計な情報がHPについてしまうからです。ファイル名やサイズ、更新日、写真の情報などいりませんので、はずすのです。

９．ページのタイトル・画像の数を決める

HTML①のタグを開きます。ページのタイトルを入れます。今回は、「狼森と笊森、盗森」としました。その文字のフォントを選択し、サイズを決めます。色も指定します。画像表示レイアウトは、「非フレームで表示」を選び、画像数を４としました。この画像数の指定で横に４つの絵が並ぶことになります。背景の色も、うすい黄色を選択しました。ここが、最初の表紙のページに記載させる情報になります。

１０，トップページへのリンクをはる

HTML②のタグを開きます。
トップページへのリンク（自分の今までにあったHPのTOPへ）を指定します。「hirokawa's siteに戻る」といれてリンク先のURLを入れます。
サムネイル画像からメイン画像ページのリンク文字列では、次の画像のところは、「次の画像＞＞」前の画像のところは、「＜＜前の画像」を入れて、「画像の下に表示」を選択します。
サムネイルのページへのリンクのところは、「狼森と笊森、盗森」に戻る　と入れました。あとは、タブの色を指定しますが、変更していません。

１１，ＨＴＭＬのページを作る

それで、下の「作成」のボタンを押します。できたHPがこのNO1です。です。これは、普通はアップロードしません。今回、わかりやすくするためにアップしてみました。
ここまでが「すなねぃる！！」の仕事である、ということをご理解ください。これができたら、すなねぃる！！の役目はおしまいです。

１２，ＨＰビルダーで装飾する

このあと、ビルダーを起動します。ビルダーで、「１１」のページを呼び出します。あとの必要な情報はビルダーで書き入れていきます。それで作ったページがこれです。「狼森、笊森と盗森」これがビルダーで加工したものです。「１１」で「すなねぃる！！」でつくったものに、ビルダーで書き込み、リンクを張りました。

１３，逆のリンクをはる

この「１２」のページから、自分のトップページ（今回で言うと私のHP　TOPに戻ることができます。それは、「１０」で指定したからです。しかし、逆ができません。そこで、自分のHPからでもこの「狼森と笊森、盗森」のページへ跳べるように自分のHPからのリンクを張ります。これで、大体できあがりです。

Ｑ＆Ａ

私のＨＰ「第８回TOSS酒井式描画WEB美術展」のページをご覧ください。このHPに対しての質問を答えています。
この「Ｑ］は、ＴＯＳＳ網走の寺本聡氏から廣川宛にいただいたものです。このサイトも寺本氏の質問があったので作成するに至りました。
寺本氏に感謝申し上げます。

Q１

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
１．「第８回TOSS酒井式描画Web美術展」のタイトルは、「すなねぃる！！」で作成
したのですか？それならば、メイン画面にも出るはずですよね。これは、ビルダ
ーで作ったのでしょうか？
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
これは、ビルダーで作成しています。

Q２

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
２．その下にあるサムネイル画面、これは「すなねぃる！！」ですか？もしそうであ
るなら、「うんてい遊び」「小学３年生」絵の下にある「学校名、指導者名、リ
ンク先」はどのように挿入するのでしょう？これがどうもよく分らないのです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
サムネイル画像は、「すなねぃる！！」です。「学校名　指導者名　リンク先」はビルダーでいれました。ようするに、画像はすべて「すなねぃる！！」で作成しました。あとの文字のほとんどは、
ビルダーです。
ただ、「すなねぃる！！」で挿入できる文字列は、そのまま使っていることが多いです。

Q3

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
３．バーの下にある「TOSSインターネットランド（TOSS商標）」と「hirokawa's
siteに戻る」「SOUPLE HP」はどのように設定したのでしょう。「すなねぃる！！」
で同じ事をやろうとすると、全部つながってしまいます。これもビルダーで作っ
たのでしょうか。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
「hirokawa's siteに戻る」だけは、すなねぃる！！で作り、
あとの二つは、ビルダーで後付けしたものです。

Q4

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
４．以上の事をまとめると、どこまでが「すなねぃる！！」でどこまでが「ビルダー」で作成したのか？と言うことなのです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以上ご理解いただけたでしょうか？

Q5

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
５．これで、サイトを作成し、ビルダーで呼び出して自分のトップページにリンク
を張ります。
やはり、ここがよく分らないのです。「自分のトップページ」というのは、先生
のサイトの「第8回TOSS酒井式描画Web美術展」にリンクさせていると言うことで
すか？
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
いいえ。違います。これは、？？「１３」で書いたとおり、自分のｉｎｄｅｘのペ
ージからのリンクのことです。文章がわかりづらくてすいません。

↑ページ先頭へ