この記事は、KONITANとパソコンWebサイトの一部をもとに作りました。
Sandvoxについて
Sandvoxは、Mac用のWebサイトビルダーです。Karelia Software社の製品で、同社のサイトまたはApple Storeから購入できます。
Sandvoxの特長は、Webサイトを実際に見える形で作成して行くところです。つまり、編集してからプレビューで確認するのではなく、レイアウトやフォントを決めながら見たままのサイトを作って行きます。そして、この操作はネットに接続しないで行なうことができます。
幾つものテンプレートが用意されていて、ブログと同じ感覚でサイトを作成します。デザイン用テンプレートは、アプリケーションに含まれているものの他に、有料テンプレートもあります。
また、サイドバーを付けたり外したり、フォントを変えたり、一般的なカスタマイズを行なうことができます。
Sandvoxを使ってみた
私は、DEMO版を使ってみてから購入しました。
2014年3月から2年間ほど使いましたが、大変良くできたソフトだと思います。
この頃、ホームページ作成の知識はほとんどありませんでしたが、Sandvoxを使うと簡単にWebサイトを作成することができました。ブログを書いている人ならば、誰でも簡単にWebサイトを作ることができると思います。
日本語マニュアルは用意されていませんが、アプリケーションのメニューやツールバーが日本語化されているので、実際に確認しながら使うことができました。
ブラウザでどう見えるかは、ホストに転送して公開し、実際にネット経由で確認する必要があります。ただし、私が実際に使った範囲では、ブラウザで見たときとの違いは感じませんでした。
サイト作成の手順（Sandvoxの使い方）
以前、Sandvoxでサイトを作成したときの、大まかな手順です。ツールバーは標準で下図のようになっています。
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)［フィールド］を選ぶと、フォーマットを少し変更することが出来ます。
