Sandvox

RapidWeaverで作成しています。

私は、2007年頃からブログを続けていますが、ホームページ作成の知識はほとんどありません。
それでも、Sandvoxを使うと簡単にWebサイトを作成することができました。
幾つものデザインが用意されているので、ブログを作るのと同じ感覚でサイトを作成します。ブログを書いている人ならば、誰でもWebサイトを作ることができると思います。

Sandvoxの特長は、Webサイトを実際に見える形で作成して行くことです。つまり、編集してからプレビューで確認するのではなく、レイアウトやフォントを決めながら作って行きます。
したがって、ブラウザでどう見えるかは、作りかけのうちからホストに転送して公開し、実際にネット経由で確認する、というのが標準的な使い方のようです。
私が実際に使った範囲では、ブラウザで見たときとの違いは感じませんでした。
ザイン用テンプレートは、アプリケーションに含まれているものの他に、有料テンプレートもあります。 また、サイドバーを付けたり外したり、フォントを変えたり、かなりのカスタマイズを行なうことができます。
今のところ日本語マニュアルが用意されていないので、取っ付きにくいかも知れません。しかし、アプリケーションのメニューやツールバーは日本語化されているので、実際に確認しながら使うことができました。
以前、Sandvoxでサイトを作成したときの、大まかな手順です。ツールバーは標準で下図のようになっています。
1. サイトを作成して保存します
(1) Sandvoxを起動します。
(2) [新しいサイトを作成する]をクリックします。
前回サイトを閉じたときは、Sandvoxを起動して保存したサイトを選びます。
(3) デザインを選んで、[選択]をクリックすると、サイトの作成が始まります。
デザインは、とりあえずどれかを適当に選べばよいです。次のステップ以降いつでも変更できます。どのデザインに変更しても一応使えますが、フォントなどを調整し直さなければならないことがあるので、早めに決めた方がよいと思います。
私は、Telegraph Officeを選びました。
(4) [ファイル]➡[保存]でサイト名付けて保存します。拡張子は .sandvoxです。
新しいサイトの場合、保存しておかないで閉じると、サイトが消えてしまいます。この時点で保存します。
(5) サイトを閉じるには、[閉じるボタン]をクリックします。
サイトを閉じないでSandvoxを終了すると、次の起動時に最後に使っていたサイトが開きます。
(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)[フィールド]を選ぶと、フォーマットを少し変更することが出来ます。
Sandvoxについて
2. ホームページの編集
(1) サイトタイトルを編集入力します。フォントは、ここだけヒラギノ丸ゴ ProN W6にしました。
(2) サイトタグラインを編集入力します。これも含めて、全てヒラギノ角ゴ ProN W3にしました。
これらのフォントはMacのフォントです。Windowsでは、ブラウザのフォントをメイリオにすると、ヒラギノと同じような感じになります。
(3) テキストを入力します。あらかじめ作成した文章をコピー・ペーストできます。
(4) 画像をドラッグして配置します。
サイト作成の手順(Sandvoxの使い方)