合同会社BPカンパニー
神奈川県横浜市｜中小企業向けホームページ制作ならBPカンパニー
中小企業の皆様のありたい姿の実現のためのサービスを提供いたします。
TOP > Wixかんたん更新講座 > 上級編
上級編
初心者のための
Ｗixかんたん更新講座
初心者のための易しい内容から少しステップアップ。
Wixのエディタ（編集）でちょっと難しい機能の解説や、その使い方についてご説明するページです。
（内容は随時更新中です）
Ｗixかんたん更新講座 上級編 もくじ
１ コンテンツマネージャーの使い方（お知らせの挿入）
① コンテンツマネージャーを追加する
② テンプレートにデータを入力する
③ トップページにリピーターを設置する
④ リピーターとコンテンツマネージャーのデータを接続する
⑤ お知らせの表示数の設定を変更する
⑥ 「タイトル」にお知らせページへのリンクを設置する
⑦ サンドボックスデータとライブサイトデータに同期する
２ ブログの追加・記事の作成
① サイトにブログを追加する
② 記事を作成する
③ ブログページの設定を確認する
④ トップページにブログパーツを設置する
１ コンテンツマネージャーの使い方（お知らせの挿入）
Wix.comの簡単な使い方に関しては慣れてきた！
でも気になることがひとつ……
追加要素の中に出てくる、この「コンテンツマネージャー」って何だろう？ヘルプを見たり検索したりしてもいまいち使い方がわからない……そんな方も多いのではないでしょうか？
そこでこのページでは、コンテンツマネージャーについて「お知らせを挿入する」という目的から、なるべくわかりやすく説明をさせていただきます。
Wixの機能を惜しみなく活用してみたいという方はぜひチャレンジしてみてください。
初心者向けページよりも少し内容が難しくなります。
でも作業をひとつずつ確認していけば大丈夫！使い方をマスターして、ご自身のページにも取り入れてみましょう。
① コンテンツマネージャーを追加する
さっそく「サイトに追加」というボタンをクリックしてみましょう。
下の画像のように、コンテンツマネージャーのメニューが表示されるようになります。
一番上の「テンプレートを選択」をクリックします。
「動的ページを追加」ということで、テンプレートがずらっと出てきます。
「動的ページ」とは、そのページにアクセスするたび、その時々によってプログラムが内容を生成するページのことです。通常Wix.comで作成しているのは静的ページで、エディターで編集した形そのままで表示されるページのことです。
動的ページを導入することで、より便利で更新もしやすいホームページにすることができます。テンプレートで取り入れるのは難しくないので、ぜひやってみましょう。
② テンプレートにデータを入力する
今回はトップページに「お知らせを挿入する」ことが目的ですので、使用するテンプレートは「最新ニュース」が便利です。今回はこちらを使って操作方法の解説を進めていきます。
「最新ニュース」をクリックすると、コンテンツマネージャーのダッシュボードが表示されます。
テンプレートなので、見本のお知らせ（ニュース）が入力されている状態になっています。
アイテムを3つに減らしたら、それぞれのカテゴリに自分のサイトのお知らせを入力していきます。
Titleの横の矢印マークをクリックすると、入力画面に移動します。
Title（タイトル）
記事タイトルです。「お知らせ①」などと入力しています。
Image（画像）
お知らせにちなんだ画像を挿入できます。
Date（日付）
そのお知らせの更新日時を好みの形式で入力できます。
Long Description（長文記述）
お知らせの本文だと思ってください。長い文章で入力ができます。
Reporter Name（作成者名）
記事を作成した人の名前などです。「○○○スタッフ」などでもいいですね。
Short Description（短文記述）
お知らせの内容を端的に表した短い文章を入力します。
News（Title）、News（All）
Wixの方で自動で入力される部分ですので何もしなくて大丈夫です。
TitleからShort Descriptionまでの欄を入力したら、お知らせに載せたい情報の準備はOKです。
見本が６つ入力されていますが、サンプルにするには少し多いので、3つに減らしましょう。
下から３つのアイテムの数字部分をクリックするとチェックボックスが選択されますので、そのまま「3件を削除」のボタンをクリックしてください。
③ トップページにリピーターを設置する
次に、このお知らせを載せる場所とレイアウトを決めます。
トップページに戻って、お知らせを載せたい場所にリピーターを挿入しましょう。
＋の追加ボタンからリスト＆グリッドを開きます。
ネイビーのデザインのものを選んでページ上にドラッグし、コンテナのサイズをページ幅に揃えましょう。
このデザインはコンテナが4つ入っているので、リピーターのメニューの「アイテムを管理」から4つ目を削除します。
コンテナを３つにしたら、先ほど作成したお知らせの項目と対応するようにテキストを追加、入力して配置します。（テキストの内容はコンテンツマネージャーとの接続にあまり関係がないので、自分がわかりやすい文字列で大丈夫です）
また、サイトのデザインに合わせて背景も変更しておきましょう。
よくわからない……という方は下の画像をご覧ください。
最終的に先ほどダッシュボードで入力したお知らせの内容が反映されて、このような表示になります。それをイメージしてテキストを配置してみるとわかりやすいと思います。
※完成イメージ
ここはボタンを配置する
★ここがポイント★
「タイトル」にあたるところはテキストではなくボタンを設置します。するとそこをクリックするとお知らせのページに飛ぶという設定をつけることができます（リピーター内だとテキストにリンクを貼ることができません）
④ リピーターとコンテンツマネージャーのデータを接続する
各項目の配置ができたら、先ほどのデータとリピーター内のテキストの内容をリンクさせます。
リピーター内のコンテナを選択して、メニューから「データに接続」をクリックします。
「リピーターを接続」というポップアップが出てくるので、一番上の「All Connettions」をクリックします。
一番上に出てくる「データセットを作成」というボタンをクリックします。
出てくるメニューの「コレクションを選択」のプルダウンボタンで「News」を選んでください。
これでこのリピーターに先ほど入力した「News」のデータが接続されました。
次はテキストやボタンに、コンテンツマネージャーのどのデータをリンクさせるのかを選択していきます。
一番上のコンテナの「日付」のテキストを選択し、一番右端のデータセットのメニューをクリックします。「接続設定」のところで「Date」を選んでください。
「日付」部分に「Date」に入力したテキストが反映されるようになりました。
（エディタ上ではまだ確認することはできませんが、テキストの横に接続のマークが出るようになります。
接続されました
同様にして、「タイトル」には「Title」……と対応するデータを接続していきます。
全ての項目を接続し終えたら、エディタのプレビュー画面できちんと接続が行われたか確認してみてください。下図のように意図した通り表示されていれば成功です。
⑤ おしらせの表示数の設定を変更する
接続がうまくいったら、次は表示するお知らせの数を設定しましょう。
これを行わないと、入力していくお知らせデータが無限にTOPページに表示されてしまいます…
エディタ画面にて、①コンテンツマネージャーと接続したリピーターの真ん中に出てくる「News dateset」というアイコンをクリックすると、②設定のメニューが出てきますので選択してください。
下記のようにデータセット設定のポップアップが出てきますので、③「表示するアイテム数」をお好みの数に変更しましょう。（3つ程度がやはり見やすいと思います）
①
②
③
これで、コンテンツマネージャー上に入力していくお知らせのうち、最新のものが3つTOPページに表示されていくようになりました。
⑥ 「タイトル」にお知らせページへのリンクを設置する
手順③の最後にポイントとして説明したように、リピーターに設置した「タイトル」だけはテキストではなくボタンで追加していると思います。
そこにリンクを設置して、訪問者がクリックしたときお知らせページに飛べるよう設定しましょう。
リピーター内の一番上のコンテナのタイトルボタンを選択し、「テキスト・アイコンの変更」をクリックします。ボタン設定が開くので、一番下のリンクの鎖ボタンを押してください。
「リンク先を選択」のポップアップが出てきますので、「News (Title) (Date)」を選択してください。
選択して少し待つと、コンテンツマネージャーのデータを読み込んで、その下にさらにプルダウンボタンが出てきます。設定したお知らせの①～③が選択できるようになりますので、「お知らせ①」を選んでください。
最終的に下図のような設定にしたら「完了」ボタンを押して完了です。
同様にして設定したコンテナの下のタイトルボタンにも順番に「お知らせ②」「お知らせ③」のリンクを設定してください。
〈エディタ画面上〉
〈プレビュー画面上〉
ちなみにお知らせ一覧のページと個別のお知らせページも出来上がっています。接続を終えていれば、TOPページと同じようにプレビューを確認することができます。
⑦ サンドボックスデータをライブサイトデータに同期する
※2021年6月
サンドボックスデータを無効にするオプションが選べるようになりました。
上記のチェックボックスを外すとサンドボックスデータが無効となります。
無効にすると下記の手順が必要なくなりますので、お好みで選んでください。
（特にテスト環境などが必要なければ無効にした方が操作が簡易になります）
お待たせしました、こちらの手順で最後となります！
締めとして、コンテンツマネージャー内のサンドボックスにあるデータをライブデータに同期する、という作業を行います。
「サンドボックス」とは外部に影響を及ぼさない環境…と認識しておいてください。
今まで入力したお知らせのデータは一旦サンドボックスに保存されています。このままだとWixエディタを公開にしてもお知らせ部分が実際のホームページに反映されません。
ダッシュボードに移ってライブデータに同期しましょう。
ここをクリックするだけ！
下図のようなポップアップが出てきますので、「アイテムを同期」をクリックしてください。
これで完了！エディタの公開ボタンを押してホームページを更新してください。
作成したお知らせが反映されたページになっています。
お疲れ様でした！
少し難しい作業でしたが、最初の設定を行えばこの後は効率的にお知らせを更新していくことができますよ。
2 ブログを追加する
かんたん更新講座の項目３「ページの追加・削除」で一部ご紹介したブログ機能についてです。
コンテンツマネージャーと同様、ツールパネルの上から３つ目にある「＋」の追加アイコンからホームページに追加することができます。
① サイトにブログを追加する
「ブログを追加する」のボタンをクリックすると、以下のメニューが出てきます。ご自身のページに一番適切なタイプを選んでください（画像に記載がある通り、後で変更することができます）
こちらの解説では「個人ブログ」を選択して進めていきます。
サイトにブログページが追加されました。
（アルファベットで「Blog」というページになっていますが、任意の名前に変更することができます。
かんたん更新講座の「２ ページの追加・削除をする」を参照してください。）
② 記事を作成する
さっそく記事の作成から始めてみましょう。
先ほどの画面からそのまま「記事を作成」のボタンをクリックします。
記事の作成画面が出てきます。
まずはベタ打ちで文章を入力してみます。
このままでも良いのですが、入力画面上部にあるメニューで文章の装飾などを行うことができます。
より読みやすく人目をひくブログにするため、積極的に利用してみましょう。
①
文章のフォントの大きさを決められます。
中見出しは「ヘッディング2」小見出しは「ヘッディング3」
普通の文章は「段落」を利用して大きさを変えると見やすくなります。
②
文字の装飾ができます。右から太字、斜体、下線、文字色、文字ハイライトです。
③
左は引用部分を示すために利用できます。右はコードスニペットといってプログラミングコードをフォーマットして載せることができます。
④
番号付きリストと箇条書きです。自動で番号を振ってくれたり先頭の黒丸をつけてまとめてくれます。
⑤
文字の位置をセンターや右寄りなどに定めることができます。
⑥
行の間隔を定めます。
⑦
選択した文字列や画像を少しずつ右寄せ、左寄せにすることができます。
⑧
選択した文字列や画像にURLリンクを貼ることができます。
⑨
カーソルを合わせると現在の文字数と読了時間が出てきます。執筆量の参考になります。
①
②
③
④
⑤
⑥
⑦
⑧
⑨
全ての機能を使うことは稀であると思います。フォントの大きさを変えたり、強調したい部分の文字色を変えるだけでかなり見やすい文章になります↓
さらに入力エリア左側のメニューバー部分を説明していきます。
【追加】
本文に画像やギャラリー、動画などが追加できます。
【設定】
基本設定ではカバー画像の設定、投稿日や執筆者の設定ができます。
詳細設定ではレイアウトによってブログフィードに表示される文章、コメント機能を付けるか否かの設定ができます。
【SEO設定】
Googleの検索画面で表示されるタイトルやディスクリプション（説明文）などの編集ができます。
SNSシェアはわかる場合のみ、高度な設定は専門の知識がない限り触らないで大丈夫です。
【カテゴリー】
ブログ記事のカテゴリーを設定することができます。
【タグ】
ブログ記事に関連させたタグを設定することができます。
【収益化】
ブログ記事を限定コンテンツにして定期購読の機能を付けることができます。
【翻訳】
Wix マルチリンガルというアプリを利用してブログの文章を翻訳することができます。
ここでは本文に画像を追加してみましょう。（自動的にカバー写真になります）
画像を選択したときに出てくる上部のメニューで、画像の位置などを設定することができます。
（画像そのものにリンクを貼ることもできます）
記事が完成したら、右上の公開ボタンで公開することができます。
右側のプルダウンボタンをクリックすると、下書きに保存、投稿日時の設定を選ぶことができます。
公開をクリックするとダッシュボードに移動し、「記事を公開しました」というお知らせが出てきて、記事がきちんと追加されたことがわかります。
③ ブログページの設定を確認する
ブログページの表示形式などを「設定」で確認することができます。
ひとつ記事公開したら、自分の表示したいデザインになっているかを確認しておきましょう。
ブログ部分を選択すると「設定」というメニューが出てくるので、クリックします。
「メイン」の部分は新規で記事を書く、記事を管理する、のメニューが出てきます。
表示設定はブログのフィードに表示させる項目を選択することができます。
初期設定だとすべてにチェックが入っていますので、必要ないものについてはチェックを外してください。
その下のブログメニュー、SNSシェアボタンについてもチェックを外せる項目が出てきます。
「レイアウト」や「デザイン」についても細かく決めることができます。
そのままでも最適な形になっていますが、お好みで変更してください。
④ トップページにブログパーツを設置する
トップページにブログパーツを設置することで、訪問者に最新記事をお知らせすることができます。
トップページに移動し、追加ボタンからブログにカーソルを合わせると、ブログパーツの追加という項目が出てきます。お好みのデザインを選んで、トップページの配置したい場所にドロップすることで設置することができます。
見本では「最新記事」のレイアウトを配置しました。
先ほどのブログページと同じように設定で色々な変更ができるので、確認してみましょう。
最新記事を何個まで表示するか、なども選べます。
ここまでできたらブログの追加は完了です。
今後は記事を追加していったり、それに伴い設定やレイアウトを見直してみたりして良いホームページ作りを目指しましょう！
