このサイトを作成したときの、大まかな手順です。ツールバーは標準で下図のようになっています。
1. サイトを作成して保存します
(1) Sandvoxを起動します。
(2) [新しいサイトを作成する]をクリックします。
前回サイトを閉じたときは、Sandvoxを起動して保存したサイトを選びます。
(3) デザインを選んで、[選択]をクリックすると、サイトの作成が始まります。
デザインは、とりあえずどれかを適当に選べばよいです。次のステップ以降いつでも変更できます。どのデザインに変更しても一応使えますが、フォントなどを調整し直さなければならないことがあるので、早めに決めた方がよいと思います。
ここでは、Telegraph Officeを選びました。
(4) [ファイル]➡[保存]でサイト名付けて保存します。拡張子は .sandvoxです。
新しいサイトの場合、保存しておかないで閉じると、サイトが消えてしまいます。この時点で保存します。
(5) サイトを閉じるには、[閉じるボタン]をクリックします。
サイトを閉じないでSandvoxを終了すると、次の起動時に最後に使っていたサイトが開きます。
2. ホームページの編集
(1) サイトタイトルを編集入力します。フォントは、ここだけヒラギノ丸ゴ ProN W6にしました。
(2) サイトタグラインを編集入力します。これも含めて、全てヒラギノ角ゴ ProN W3にしました。
これらのフォントはMacのフォントです。Windowsでは、ブラウザのフォントをメイリオにすると、ヒラギノと同じような感じになります。
(3) テキストを入力します。あらかじめ作成した文章をコピー・ペーストできます。
(4) 画像をドラッグして配置します。
(5) 画像を選び、[インスペクタ]➡[位置]でサイズを指定します。
(6) 左右の位置は、左寄せ、中央、または右寄せになります。[インスペクタ]➡[折り返し]で文章の回り込みと一緒に選びます。
(7) ブログ「KONITANとパソコン」のところは、文字列を選び［リンクを作成]➡[リンク]で、リンク先「外部 URL」として、URLを入力します。
(8) [オブジェクト]➡[Sandvox バッジ]でバッジを入力しました。
(9) コピーライトは出てきたものをそのまま使っています。
(10)[オブジェクト]➡[ページカウンター]でページカウンターを入れました。[インスペクタ]➡[オブジェクト]で、表示したい場合は［テキスト］でフォーマットを選びます。
3. テキストページの追加と編集
(1) サイトナビゲーターで[ホームページ]を選び、[新規]➡[空/テキスト−サイドバーなし]とクリックします。
(2) 名称未設定となっているページ名を編集入力します。
(3) いま追加したページを選び▼の状態で、右クリックをして[コレクションに変換]をクリックすると、このページが親ページになります。再びこのページを選んで、[新規]➡[空/テキスト−サイドバーなし]をクリックすると、子供ページとして追加されます。
(4) ホームページの編集と同様に、テキストや画像を入力し、フォント、画像の位置などを調整します。
4. ホストの設定と公開
(1) [ホストを設定]をクリックして、サーバ、ユーザ名、パスワード、フォルダなどを入力します。
(2) [公開]をクリックします。
5. ページにYouTubeのビデオを入れる
(1)［新規］➡［空/テキスト］で新規ページを作る。
(2) 入れたいYouTubeビデオをブラウザで表示して、そのURLをページのカーソル位置にドラッグ&ドロップする。
(3)［インスペクタ］➡インスペクタ ウインドウで右端の［オブジェクト］を選んでおいて➡上端の［オブジェクト］をクリック➡ページ上の［YouTube動画をクリック］するとムービーの下に埋め込みHTMLがコピーされたものが表示されます。
同じことですが、YouTube動画をクリックして、小さな四角8コで囲まれて選べたら、インスペクタ ウインドウで右端の［オブジェクト］をクリックする。
(4) YouTubeのインスペクタが表示されたら、［位置］や［折り返し］を使ってレイアウトを整えます。
(5)動画の下に説明文を入れるときは、インスペクタの［折り返し］でレイアウトの［キャプションを表示］にチェックを入れると「キャプションテキスト」が表れるので、これを編集します。
写真の説明文は、写真をドラッグしたときに出来たページでファイル名を変更すると、フォトアルバムにも反映されます。
6.コンタクトフォーム
(1)テキストページを追加して、［オブジェクト］➡［コンタクトフォーム］とクリックします。
(2)［インスペクタ］➡［オブジェクト］として、メッセージで宛先を入力すると、コンタクトフォームが現れます。
(3)［フィールド］を選ぶと、フォーマットを少し変更することが出来ます。
