Wixの使い方 初心者でも簡単にウェブサイト作り
編集画面で使用する機能について説明していきます。
アプリ(AppMarket)やネットショップ等説明しないものもありますが…
左側に説明しやすいよう画像が貼ってありますのでご覧下さい。
(説明用の画像で使用したテンプレートは、白紙テンプレートにあるTop Navigation HTML)
まずエリアです。三つのエリアがあり上から、ヘッダー・ページ・フッターとあります。
基本的にヘッダー・フッター部分はサイトの全てのページに表示され、ページ部分は編集したページのみに表示されます。
基本的と言ったのは必ずそうなるわけではありません。
画像等クリックすると、赤枠で囲った全ページに表示というチェックボックスがあるので、そこから変更できます。
違うエリアに移動させた場合は自動でチェックボックスの変更があるんだなー、くらいに覚えておいて下さい。
編集画面の右上(青枠)、左上(赤枠)にボタンがありますね。
右上(青枠)部分は左から、
・元に戻す…編集操作を一つ前の状態に戻します。
・やり直す…「元に戻す」で戻しすぎた場合等に使います。
・コピー…文字通り画像やテキスト等コピー。
・ペースト…コピーしたものを貼り付け。
・グリッドライン…井みたいな点線の線がグリッドラインです。表示・非表示に変更できます。
プレビューで見てもらうと分かりますがサイトを公開する際には表示されません。
・グリッドにスナップ…不明
・プレビュー…サイトを公開した時のイメージを見れます。
・保存…今作成しているサイトを保存できます。
・公開…作成したサイトをネット上に公開します。
・アップグレード…有料機能を使いたい場合。操作には関係ありません。
・ヘルプセンター…分からないものを検索できます。グリッドにスナップェ…
左上(赤枠)部分は各項目ごとに解説していきます。
【ページ】
ここではページ移動やページ名を変更することができます。
少し上にある赤枠で囲ったドロップダウンメニューでもページ移動が可能です。
※使用したテンプレートがボタンつきを選びましたので、ページの変更があれば連動してボタンが変更されます。
「home」の左にある家のようなマークですがこれは、このサイトのホームとなるページを意味します。
このサイトでは「TOP」のページですね。
家のようなマークの左にあるタイルのようなものですが、そこをドラッグしてページの順番を入れ替えることができます。
またドラッグしながら少し右に動かすと少し凹んだ状態になります。
この状態はそのページをサブページに変更したことになります。
画像では「page2」を「home」のサブページに変更。「page2」が消え「home」に潜り込みました。
プレビューを見ると「home」のボタンにカソールを合わせると「page2」が出てきますね。
ページの追加…ページの追加。
ページ変換…ページを切り替える際の移動の仕方が選べます。プレビューで確認して好みのものを選んでください。
ページ名右にある歯車のようなマークはページ設定です。下の方にある「設定とSEO」も同じ機能。
上から順に、
削除・複製…ページの削除・コピーを作成できます。
ページ名…ページの名前を変更できます。
ページアドレス…サイトを公開した際のアドレスとして表示されるの一部分です。
メニューで非表示…サイトを訪問した人には見れないようにします。ただし検索には引っかかるのでそこから見られます。
ホーム(スタート)ページとして設定…ホームとなるページを変更でき、家のようなマークが移動します。
ページの保護…パスワードをかけることができます。またWixアプリを追加することで会員専用ページにすることも可能。
SEOページの設定…ページごとにSEOの設定ができます。SEOについては【設定】で説明します。
【デザイン】
「背景」ではサイト全体の背景を変更できます。
また下にある「背景のアップロードとカスタマイズ」から画像を背景とすることができます。
画像の追加…背景画像を選択できます。アップロードすればあなたの使いたい画像を背景にすることもできます。
画像の表示方法…フルスクリーンやタイル以外は余白ができる場合があるので注意。
サイトと同時にスクロール…どんなに縦長なサイトであろうと下にいっても同じ背景画像がついてくると思ってください。
色の変更…画像が表示されていない場所の色を選択できます。
「色」ではサイト全体の配色パターンを変更できます。
また下にある「パレットのカスタマイズ」ではこの色だけ変えよう!といった時に個別に変更することができます。
左画像では、使用したテンプレートが灰色しかないので、後で説明するボタンを追加し、灰色4段目・青色3段目
のみを変更してみました。
「フォント」ではサイト全体の文字のフォントを変更できます。
開くと分かりますが、アルファベットは変化にバリエーションがあるのに日本語は…
また下にある「フォントのカズタマイズ」では各スタイルごとに変更できます。
このテキストの書式スタイルが分からない!って時はテキストボックスをダブルクリックして、スタイルと薄っすら書かれたドロップダウンメニューを見ると分かります。
左画像では、ヘッディングMだと確認できたのでフォントを適当に選択してみました。
【追加】
「テキスト」では文字を入力するためのテキストボックスが追加できます。
「タイトル」「段落」共に文字が入力できますが、書式スタイルが違うので使い分けましょう。
テキストボックスをダブルクリックすつとテキストの編集を行えます。
左から順に、
書式スタイルのドロップダウンメニュー…書式スタイルを変更できます。
テキスト色…テキストの色を変更できます。
太字・斜体・下線…太字hutoji・斜体syatai・下線kasenn
○○揃え…テキストボックス内での位置を変更できます。
テキストの向き…文字の入力方向の変更ができます。
箇条書き・段落番号…文章を箇条書き・段落番号を付けることができます。
リンク挿入・編集…文字にリンクを貼れます。右のリンクを押すとWixのトップページを開きます→リンク
「画像」では画像を追加したり、画像自体の加工等が行えます。
画像をクリックしメニューの中の「設定」に全てのものがありますので上から順に、
画像の変更…画像を変更。アップロードすればあなたの使いたい画像を追加できます。
画像の表示方法…フレームのサイズに合わす等変更できます。
画像の編集…画像の加工が行えます。
タイトル…タイトル。
代替テキスト…画像が表示されない場合に表示する文字です。
リンク先…画像にリンクを貼れます。
スタイルの変更…カスタマイズからフレームを選んだり、画像を丸くしたりできます。
「クリップアート」は画像の背景色をなくした設定のものが追加できます。
「ギャラリー」
4種類のものがあり共通する部分は、
画像の整理…画像の変更・タイトル・説明・リンク先。タイトル・説明はマウスを合わした時に表示される文字の部分です。
スタイルの変更…種類ごとに多少違いがありますが、表示の仕方を変えたりマウスを合わした時の色など変更できます。
左にスライドショーの初期状態を小さくしたものと、画像の整理からタイトル・説明を変更、スタイルの変更から文字サイズ・色を変更したものを追加してみました。
種類別では(必要そうなものだけ)、
・グリッド
列・行…列・行に表示される画像の個数。このサイトの説明用画像のほとんどが、グリッドの列1行1で表示しています。
ShowMore(行)…ギャラリーの下に小さくShow Moreとある部分をクリックした時に追加で表示する行数です。
余白(px)…画像間の間隔の変更です。
・スライドショー
変換…画像の切り替える時の変換スタイルの設定です。
自動再生…触らなくても自動で画像を切り替えるように変更可能。サイトのトップ画像に使用するとオシャレですね。
オートプレイボタンの表示…タイトル・説明の表示される部分に小さく表示されるボタンの表示・非表示。
・スライダー
リピート再生…追加している画像を延々スライドさせます。チェックを外すと最後の画像でストップします。
・グリッドアニメーション
列・行…列・行に表示される画像の個数です。
余白(px)…画像間の間隔の変更です。
変換…画像の切り替える時の変換スタイルの設定。
オートプレイボタンの表示…タイトル・説明の表示される部分に小さく表示されるボタンの表示・非表示。
リピート再生…追加している画像を延々スライドさせます。チェックを外すと最後の画像でストップ。
「メディア」
「動画」ではYouTube・Vimeoの動画を貼ることができます。ニコ動無理…
上から順に、
ビデオURL…貼りたい動画のURLを入力するとその動画が貼れます。
コントロールバー…動画下部の音量調整や再生時間がある部分がコントロールバーです。そこの表示方法です。
自動再生…そのページにアクセスすると自動で再生されます。
リピート再生…リピート再生。
タイトルバーの表示…表示すると動画上部にタイトルが表示されます。
明るい色のコントロールバー…灰色のコントロールバーに変更されます。
スタイルの変更…フレームが変更できます。
「SoundCloudオーディオ」
SoundCloudの音楽を、サイトで共有できます。私は使ったことないのですが・・・
SoundCloudの埋め込みコードを入手するには、SoundCloudのアカウントにログインし、ミュージックプレイヤーの
左上でShareをクリック。EmbedCodeをクリックし、コードをコピーします。・・・だそうです。
「AudioPlayer」
mp3ファイルの追加ができます。
「図形&区切り線」
「ボックス」はテキストボックスや動画を添付し一緒に移動させたりできます。
ご飯を運ぶオボンみたいなものですwご飯だけでなく味噌汁やお茶等、
複数のものも一緒に運べちゃうんだよ!
「縦線」「横線」は区切り線です。
「クリップアート」…【画像】で説明してあります。
「ボタンとメニュー」ではボタンの追加や編集をを行えます。
デフォル・大きな・強調・テキストボタンは全てスタイルの変更の設定が違うだけで同じです。
リンクを貼ったり色等を変更できます。
テキストメニュー・ボタンのメニューはボタンが繋がったようなものです。「先ほどのボタンとメニュー」と同じでスタイルの
設定が違うだけで同じです。
このサイトのヘッダーにあるボタンもここから追加することができます。
「PayPal」は説明しませんのでヘルプのリンクを貼っておきます。PayPalの追加リンク
「ネットショップ」についても説明しません。オンラインストアを作成するのは無料ですが、実際に販売する際には有料プランにアップグレードする必要があります。ネットショプの作成リンク
「ソーシャル」
Facebook・Twitter等の機能ボタンを作成できます。
「アプリ」は一つずつ紹介なんてできませんが「htmliFrame/Embed」だけ簡単に紹介します。
アプリ(AppMarket)からhtmliFrame/Embedを選択し、右上の「サイトに追加」で追加できます。
設定からドロップダウンメニューでウェブサイトアドレス・HTMLコードが選択できますね。
ウェブサイトアドレスではURLを貼ることで外部サイトを埋め込むことができます。
HTMLコードでは様々なアイテムを追加できます。下のアフィリエイトリンクもこちらで貼り付けました。
【設定】
「サイトのアドレス」
無料だとhttp://●●●.wix.com/▲▲▲といったサイトのアドレスになります。
●●●の部分はユーザー名が入ります。
初期状態ですとユーザー名は登録したメールアドレスの「●●●@YAHOOメールとかgmail」になっていますので変更
することをオススメします。
ユーザー名の変更は、Wixトップページ→マイアカウント→設定より変更できます。
▲▲▲にはサイト名が入ります。変更したい場合はサイト名の編集より変更してください。
「ファビコン」はサイト名の横にある小さなアイコンです。利用する場合、有料プランにアップグレードする必要があります。
「SEO(google)」
SEOとは「Search EngineOptimization」の略で、日本では「検索エンジン最適化」と言います。
これを上手く設定すると検索結果に表示されやすくなります。
せっかく作ったサイトですので、より多くの方に見てもらいたいですよね?
説明しきれないのでリンクを貼っておきます→解析&SEOリンク
「解析」
Googleアナリティクスを使い解析を行うことができます。利用する場合、有料プランにアップグレードする必要があります。
「ソーシャル」
Facebookでサイトが共有されたときに表示されるサムネイル画像を追加・変更できます。
【AppMarket】
「アプリ」で説明してあります。
以上で説明が終わりました。
早速Wixに登録してあなた自身のサイトを作ってみましょう。
説明1
説明2
説明3
説明1
Some description here
Some description here
Some description here
Some description here
「ストリップ」はボックスの親戚で横いっぱいにあるオボンです。
Some description here
Some description here