静岡PR運営者プロフィール写真、カメラ、デザインがちょっと得意な静岡県民。した性格は「これぞ静岡人」といったところ。将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。yamaWixのサンプルサイトで解説!Wixエディタでよく使う機能と操作方法ツイートシェアはてブLINEPocketこんにちは、yamaです。初心者さん向けにWixエディタの基本的な操作方法を書いています。目次から必要部分を読んでいただき、ホームページ作成に役立ててください。Wixエディタで作ったポートフォリオサイトを作例に解説します。基本操作のみで初心者さんでもおしゃれなサイトが簡単に作れますよ。作例はWixの「グラフィックデザイナーB」のテンプレートをカスタマイズしています。画像を変更する時はどうする?Wixエディタでレイアウトを変更する方法(テキスト・画像)画像サイズを調整するテキストエリアを調整するリンクを設定する画像にリンクを設定するテキストリンクの設定アニメーション効果を加えたい!プレビューでレイアウトを確認する最後に、今回のまとめWixのホームページの構成を確認するホームページがどれくらいのページ数か?今、編集しているページはどこの階層なのか?ホームページの作成中、サイトの構成を確認することがあります。Wixエディタでは、画面上のメニューから「ページ」をクリックすると、サイト構成が確認できます。「グラフィックデザイナーB」のテンプレートの場合、トップページの「GALLERY」の下層ページにPROJECT01からPROJECT09が設定されていて、ABOUT、CONTACT、BLOGのページ構成だとわかります。ページ数が増えると、どうしてもサイトの構造が複雑になります。管理面やユーザーさんの利便性も考えると、できるだけシンプルな構成にしたいですね。ホームページを作成していると、「ページ数を増やしたい」「不要なページを削除したい」「ページを複製したい」ということがあります。する時は、「左メニュー」の「メニュー&ページ」をクリックし、ページリストを表示させます。ポイントページの操作は「メニュー&ページ」からページの追加方法ページリスト最下部の「+ページを追加」をクリックすると、新しいページが追加されます。後は、新しいぺージのタイトルを入力すればOKです。新しく作成したページは、サイトメニュー内でドラッグして動かすことができます。「メニュー&ページ」からページの一覧を表示させます。選択するとぺージを削除できます。削除前にはアラートが表示されます。必要なページを削除しないように気をつけましょう。共通レイアウトの下層ページを使用しています。複数ページで共通のレイアウトを使用する場合、ページごとに共通の設定を繰り返すのは大変ですよね。そのような時は、ベースになるページを1ページ作成し、それを複製すると便利です。ここでは、複製元のページを「PROJECT01」としています。進み、ページの一覧を表示します。「複製」を選択します。必要なページ数を複製しましょう。複製元のページ名」という名前が設定されます。任意のページタイトルに変更しましょう。→「テキストを編集」アイコンをクリックすると編集可能になります。テキスト部分をダブルクリックしてもOKです。文字サイズや右寄せ・左寄せ・中央寄せ等は「テキスト設定パネル」で変更します。このパネルは「テキストを編集」状態になると自動で表示されます。yama感覚的に操作できるので簡単ですね。テキストエリアを追加する方法ページ内に新たにテキストを入れたい場合は、メニューボタンの「追加」→「テキストを追加」でテキストエリアを配置します。テキストエリアのサイズ変更・配置の移動はマウスでドラッグするだけで変更可能です。見出しをカスタマイズする方法サンプルサイトでは、初期設定の見出しに下線を引くシンプルな装飾を加えています。仕上がりイメージはこんな感じです。左メニューから「追加」→「シェイプ」→「おすすめライン」と進みます。今回はシンプルな細いラインを選びました。パーツをドラッグして任意の場所にドロップしましょう。パーツの位置は後から調整できます。yama最初にザックリ配置して調整した方が効率が良いですよ今回は罫線を追加しただけですが、吹き出しなどの装飾方法も同じです。ポイント図形などの装飾を加える時は「追加」→「シェイプ」からWixエディタで画像を挿入する方法まずは画像をアップロードしましょう。ページで詳しく紹介しています。ここでは、新規作成したページに画像を挿入します。アップロード」をクリックし、画像を選択する画面に移動します。挿入したい画像をクリックし、「ページに追加」ボタンを押すと、ページ内に画像が配置されます。画像のレイアウトはドラッグで調整できます。画像を変更する時はどうする?すでに配置されている画像を変更したい時は、配置している画像をクリック→「画像を変更」ボタンをクリックします。「画像を選択」画面に切り替わるので、挿入したい画像を選択すればOKです。アップロード」から差替えは、「画像をクリック」→「画像を変更」Wixエディタでレイアウトを変更する方法(テキスト・画像)Wixエディタでは、画像やテキストをドラッグで自由に配置できます。サンプルサイトのプロフィールページを例に、テキストや画像を自由にレイアウトしてページを作ります。テンプレートの初期設定はこちら↓↓↓↓カスタマイズしたプロフィールページ↓↓↓↓プロフィール写真・見出し・自己紹介文・ボタンと使用している要素は同じです。それでは、順番に紹介しましょう。レイアウトはそのままに、画像とテキストを入替えてみます。次に、画像とテキストのレイアウトを変更します。レイアウトを変更する時は、パーツをドラッグして移動させます。配置位置を数値指定したい時は、右メニューの「位置」からX軸、Y軸を指定することも可能です。やりやすい方法で調整していきましょう。レイアウトが変更できました。各要素バランスを調整して仕上げましょう。ポイントWixエディタは、画像やテキストをドラッグで自由に配置できる画像サイズを調整する次の3つの調整方法を紹介します。全体のサイズを変更する時は、画像をクリックします。画像枠に表示されるハンドルをドラッグしてサイズ調整しましょう。枠内の画像の位置を調節する方法(トリミング)画像が正方形の枠内に配置されていますが、人物が枠の左側に寄っています。この位置を調整します。枠の外側にグレイになった人物の写真がありますね。グレイ部分をドラッグすると、枠内の写真の配置を調整できます。画像が枠の中心に収まりました。画像枠を変更する方法(シェイプの変更)画像を収めている枠(シェイプ)のデザインを変更します。シェイプの変更は、「切り抜き」のメニューから「クロップ」を選択します。シェイプのサンプルが表示されます。シェイプを選択した後、「適用」をクリックして反映させます。画像が円形のシェイプの中におさまりましたね。テキストエリアを調整するテキストエリアのサイズは、テキストエリアの四隅に表示されるドラッグハンドルで変更します。画像とのバランスを見ながらレイアウトを調整しましょう。画像の縮小、シェイプの変更、テキストエリアを調整して自己紹介ページが完成しました。テキストエリアのサイズを変更しても文字サイズは変わりません。文字サイズは「テキスト設定」から変更します。リンクを設定する文字や画像などのパーツをクリックしたときに他ページに移動させるリンクの設定をします。画像にリンクを設定テキストリンクの設定よく使う2つの方法を紹介します。「リンクを追加」を選択すると「リンク先を設定」のポップアップ画面が表示されます。「リンク先を選択」では、リンク先の詳細設定をします。画面左のリストで、移動先がWix内のページか外部サイトかなどを設定します。リンク先がWixサイト内の場合「ページを選択」から移動先のページを指定します。クリックするとリンクが反映されます。ポイントリンク先は「リンク先を選択」から詳細の設定をするテキストリンクの設定テキストを編集状態にして、リンク設定したいテキストをハイライトさせます。ポップアップ画面の「リンク」をクリックすると、「リンク先を選択」画面が表示されます。あとは画像リンクの時と同じ要領で詳細を設定します。アニメーション効果を加えたい!Wixエディタでは、様々なアニメーション効果を加えることができます。サンプルサイトのギャラリーページでは、テキストにアニメーション効果を加えています。ここではテキストへの設定方法を紹介しますが、画像にも効果を加えることも可能です。→「アニメーション」を選択します。アニメーションのサンプルから好みの効果を選択しましょう。サンプル名にマウスを合わせると、画面上で効果を確認できます。今回は「フロート」を選択しました。「カスタマイズ」から詳細を設定できます。参考までにサンプルサイトの設定内容です。待機時間:0初回のみアニメーション効果をするか:チェック選んだアニメーション効果により設定項目は異なりますのでご注意ください。プレビューでレイアウトを確認するデザインや設定が完了した後は、公開前にプレビューで動作チェックをしましょう。Wixエディタの編集画面の右上、「プレビュー」からサイトのテスト表示ができます。修正したい時は「エディタに戻る」で編集画面に戻り調整しましょう。最後に、今回のまとめWixで作ったサンプルを例に、Wixエディタでよく使う機能と操作方法を紹介しました。パーツの配置、サイズ変更などを直感的に操作できるので、画面で確認しならがレイアウトを自由に作ることができます。アニメーション効果も、サンプルを選択するだけで実装できます。視覚的なアクセントになるアニメーションはつい加えたくなりますが、サイトの動作が重くなるので実装する箇所は吟味したいですね。Wixって面白そうだなと感じた方はぜひチャンレジしてください。操作はとっても簡単ですよ。それでは、今回はこのへんで。Wixのアカウント作成方法はこちらの記事で紹介しています。初心者も無料で簡単にできるホームページの作り方!2019年11月5日Wixの使い方ホームページwebデザインこの記事が気に入ったらいいねしよう!最新記事をお届けします。レイアウトデザインのコツデザインの基礎について、実際の案件をベースにしたデザインワークを行う無料デザイン講座です。メルマガ登録はこちら!個人・ブロガー向けデザイン制作サービス個人で活動している方、ブロガー向けのデザイン作成サービスです。「何をどうしていいのかわからない!!」そんなデザインに関する悩みを解決します。個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。料金設定も個人向けにわかりやすく設定しています。Line@デザインのコツに関する質問・疑問。デジカメの購入相談など。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。AI機能がプロレベルの写真編集を実現!RECOMMENDこちらの記事も人気です。初心者も無料で簡単にできるホームページの作り方!ABOUTこの記事をかいた人yama写真、カメラ、デザインがちょっと得意な静岡県民。した性格は「これぞ静岡人」といったところ。将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。運営者プロフィール写真、カメラ、デザインがちょっと得意な静岡県民。した性格は「これぞ静岡人」といったところ。将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。