Wix を使ったホームページ制作④ ボディページ・写真

制作したサイトの、今日はボディページの設定を説明します。

Wixにログインし、左側タブの「サイトを管理」➡「サイトを編集」
へ進みます。
左上の 「ページ: Home」 タブをクリックするとページ一覧がぶら
下がります。見出し枠にカーソルを持って行っても同様になります。
各ページの作業は常に 「ページ: Home」 または見出し枠
➡ メニューを管理➡ 各ページをクリック で行います。

まずトップの次のページ (私のでは「年間活動」) をクリックすると、
そのページが開きます。最初はタイトルだけ決めて、まだ何も書いて
いないので真っ黒です。

◆ 「背景の設定」
何もない画面にカーソルを持っていくと、「ページデザインを変更」
「ページ背景を変更」という2つのタブが出てきます。
「ページデザインを変更」は本文を入れる中央部分のデザイン (写真
や模様の使用、または指定色での塗りつぶしなど) を指定します。

◆ 「ページ背景を変更」 は画面全体の背景を設定します。ここでも写真
や模様の使用、または指定色での塗りつぶしなどが出来ます。
「ページデザインを変更」 すると、中央部分はその指定が優先して
表示され、ページ背景は左右の余白だけに表示されることになります。

◆ 「本文の設定」
画面左端に縦に並ぶ7つのボタンのうち、2つ目の＋ボタンをクリック
して、その中から「テキスト」を選びます。
文章用のサンプルを指定すると画面にテキスト枠が点線で表示される
ので、ドラッグして適宜の位置と大きさにし、文章を入力し、文字
サイズや文字色を指定します。

テキスト枠はいくつでも載せられます。
この後、必要なら「モバイルエディタ」タブでモバイルでの表示状態
をチェックします。パソコンでは問題なくても、モバイルでは文字
送りがぐちゃぐちゃになることがあります。文章はだいたい画面中央
部の半分以下に納めないと、モバイルでスッキリ表示されません。
モバイルエディタで確認して文字送りを調整します。

◆ 「ギャラリーの設定」
これはちょっと後回しにします。明日にしましょう。

◆　写真のサイズ・精細度
最初に、アップしたい写真のタイトルとサイズ (または精細度) を
調整します。
「ギャラリー」「スライドショー」や「リスト」では写真のタイトル
が公開画面で表示されますので、公開したくない情報は削除しておく
必要があります。
また画像のサイズは、写真をメインにするサイトではない場合、特に
町内会サイトなどでは精細である必要が在りません。むしろ子どもの
写真などあまり精細だとかえって問題になる場合があります。
特にスマホでは簡単に拡大できるので、拡大した時に、元画面で小さ
く写っている顔がばっちり見えることがないようなサイズに調整する
のがよさそうです。横200ピクセル程度で十分でしょう。
その方が使用容量が小さくなるメリットもあります。

◆ 「写真の設定」
写真のアップは画面左端の2つ目の＋ボタンをクリックして「画像」を
選びます。「写真素材」をクリックするとまだ何もありません。
右上の「画像をアップロード」をクリックして、パソコンやメモリ
に準備した写真を選び、アップロードし、完了をクリックします。
これでサイトの画像フォルダに指定の画像が保存されますので、
その画像を指定して、右下の「ページに追加」タブをクリックする
と、作業中のページに写真が表示されます。
位置はドラッグすればどこへでも動かせます。、サイズは角をつま
んで伸び縮みさせます。

いずれにせよ、アーカイブにアップする前から画像タイトルを
調整しておくのがベストです。


当初は横1600ピクセルほどの大きな画像をアップしていました。
その後800ピクセル前後にしたのですが、使用容量の問題だけで
なく精細度の関係でも、もっと小さくていいと思うようになり
ました。


「動画の設定」
動画も同様に設定できるようです。しかし動画素材はあまり持っ
ていないのと、無料コースでは容量オーバーが不安なので、私
はアップしていません。

「リンクの設定①　文字列からのリンク」
本文や写真などからページやデータファイルへのリンクが設定
できます。
テキスト枠をクリックし、「テキストを編集」タブをクリックする
と文字色が反転します。どこかを一度クリックすると普通に戻る
ので、リンクしたい文字列をドラッグすると右側に
「テキストの設定」窓が開いていて、その中にチェーン型のタブ
があります。
クリックするとリンク先の指定ができます。サイト内のページ、
PDFデータファイルなどへのリンクができます。ページトップへ、
というリンクもできます。写真は指定できないようです。

「リンクの設定②　画像からのリンク」
画像をクリックすると「画像を変更」のタブが出て、右から２つ
目にチェーン型のタブがあります。これをクリックすると①と
同様にリンクが張れます。リンク先は①と同様です。

「リンクの設定③　リンクボタンから」
画面左端の2つ目の＋ボタンをクリックして「ボタン」を選びます。
とりあえずどれかを選び、画面上に配置します。ボタンをクリック
すると「テキストの変更」ボタンがありますので名称を書き込み
ます。
次にチェーン型のタブをクリックしてリンク先を指定します。
リンク先は①と同様です。
ボタンの色・形はペンの形の「デザインを変更」で変更できます。
名称の文字サイズ・色などは「デザインを変更」をクリックして
下に出てくる「デザインをカスタマイズ」をクリックするといろ
いろ操作する窓が開いて、変更できます。

「リンクの設定④　ライトボックスの使用」
上の３つでは写真へのリンクが出来ません。写真へのリンクは
ライトボックスというものを使うようですが、まだ試していない
のでよく分かりません。

まだ説明できていないものがありますので、もう１ページ必要
になりました。
また明日。