
企業サイトでよくある「NEWS]とか「お知らせ」をWixサイトに導入したいんだけどできないの?
こういった疑問にこたえます。



こんにちはろにぃです。Wix歴10年、現在は、
・自分でサイトを運営
・クライアントのサイトの作成、編集、管理
・SEO相談
などクライアントワークの経験を活かして、サイト制作やSEOについて情報発信をしております。
こういったぼくが解説していきます。
お知らせ欄とは最新情報が一目でわかるコレ


このお知らせ欄を自分のWixサイトにも導入したいという相談を多くもらうため、解説記事を用意しました。ぜひ最後まで読んで、あなたのサイトにも導入してみてください!
本記事をご覧頂き、不明点がありましたら質問対応いたしますので、ぜひお問い合わせください。
wixサイトにもお知らせ欄は設置できる


サイトを見た時、お知らせ欄があるとサイトの更新頻度がすぐにわかりますよね。実はこれってすごく重要。最終更新が数年前だと、
このサイトの情報、古そうだけど大丈夫?
と思いますよね?
大事なのは更新の手軽さ
面倒で時間のかかる作業だと、つい放置したくなりますよね?
あっ、この情報リリースしなきゃ!
と思った時に2・3分でサクッと更新できるくらいであって欲しい。
有料アプリは使用しない
Wixにはたくさんのプラグインアプリがあるのが魅力。でも不具合があったり、アプリひとつでサイト維持費を超えてしまうような金額のものまである。
無料のものだと機能が限られ、使い物にならなかったりもするので、アプリは使わないようにしています。
wixサイトにお知らせ欄を設置する3つの方法


Wixサイトにお知らせ欄を導入するため、ぼくが実際にやってみたのは以下の3パターン
- Twitterを使う
- ブログ機能を使う
- コンテンツマネージャーを使う
順に解説していきます。
①お知らせ機能としてTwitterを使う
WixサイトにTwitterタイムラインを埋め込み、お知らせ機能として使用する方法です。


Twitterを更新すればサイトに連動しているのでとても簡単にできます。
ツイートが全てサイトに反映されてしまうため、お知らせに関係ないことは発信できなくなります。SNS集客で根強い人気を誇るTwitterを使えなくなるのは痛いので却下。
②ブログ機能を使う


Wixブログで「お知らせ」カテゴリーを作り、その1カテゴリーだけを表示する方法。
特にスマホで見た時、いくつもお知らせがあると延々とスクロールしなければならなくなります。3つくらいでもまだあるの?と感じてしまうかも。
③コンテンツマネージャーを使う


企業サイトでよく見る形をそのまま再現できます。



安心してください!この記事で解決できます!!
「Twitterは集客で利用したいし、ブログはカスタマイズが限られるので使いにくいなぁ」
という方はコンテンツマネージャー利用一択です。
更新が簡単なお知らせ欄を作れるコンテンツマネージャーの設置方法


少し複雑な作業が必要なコンテンツマネージャー。画像を見ながら真似して進めてもらえれば迷わないよう解説していきます。
手順は以下の6ステップ
- コンテンツマネージャーのニュースを追加する
- コンテンツマネージャーデータを編集する
- お知らせ欄のデザインを整える
- リピーターとコンテンツマネージャーをリンクさせる
- お知らせの表示数を設定する
- お知らせ一覧のページの設定をする
①コンテンツマネージャーのニュースを追加する
Wixエディターを開き、コンテンツマネージャーのニュースを追加します。




「最新ニュース」をサイトに追加すると、自動的にページが作成されます。


ページが追加されるとコンテンツマネージャーの編集画面が開く。
②コンテンツマネージャーのデータを編集する


ニュースとして必要な項目が自動で作成されているので、不要なものは削除します。


今回はReporter NameとSubtitleは削除します。
次に必要な情報の、
- Title(お知らせの題名)
- image(お知らせのアイキャッチ画像)
- Date(お知らせの発信日)
- Article Text(お知らせの詳細)
を編集します。


これでお知らせ欄に載せたい情報が完成。初期設定では6つのお知らせが作成されるので、不要な分は削除しましょう。


次にこのデータをサイトに表示するレイアウトを決めます。
③お知らせ欄のデザインを整える
サイトのトップページ編集画面に移動し、お知らせを設置したい場所へストリップを追加します。


Wixエディターメニューの「追加」から「リスト&グリッド」の「リピーター}を選択。適当にリピーターを選んで追加


追加したリピーターを編集します。




画像で編集したのは、
- リピーター、コンテナの幅、高さを調整しストリップ内に収める
- 表示されているテキストを1つだけ残し「日付」と編集
- 文字だけのボタンを残し、タイトルと編集。リンク先を「News Title」のページに設定
- ライン(区切り)の幅を調整
上記の編集内容はお好みでデザインしてください。疑問に思いそうな点を一旦まとめます。
例えば、「タイトルをクリックすると詳細ページに移行する」設定をしたい場合、タイトルをボタンで作ればクリック時の動作設定ができるんです。


ボタンは枠や背景が消せるので、見た目はテキストと変わらないように配置できるんです。リピーターではテキストにリンクを設定できないので、このボタンリンクで対応します。
④リピーターとコンテンツマネージャーをリンクさせる
リピーターに配置したテキスト、ボタンをそれぞれ②コンテンツマネージャーのデータを編集するで作ったコンテンツマネージャーのNewsとリンクさせます。




各項目を割り当て、プレビューを確認すると、


設定した通り表示され完成です。
⑤お知らせの表示数を設定する
古い情報が延々と並んだら見栄えが悪いですよね?新しい情報だけを表示するよう、表示数を設定します。
リピーター内にあるデータセットのアイコンをクリック、設定から「表示するアイテム数」をお好きな数にセットします。


画像では3つに設定したので、新しいお知らせから3つ目までしか表示されなくなりました。古い情報はわざわざ消さなくてもサイトには表示されません。
⑥お知らせ一覧ページの設定


ボタンをクリックすると一覧のページに移行します。


あとは③お知らせ欄のデザインを整えると同様、News(All)とNews(Title)のページデザインを整えます。
News(Title)ページにはテキストとリッチコンテンツをリンク接続しておけば、
- 見出しの設定
- 画像や動画の挿入
など、ブログのような編集がエディターを開かなくてもできます。




今後の更新はWixダッシュボードにあるコンテンツマネージャーで情報発信をするだけ。とてもかんたんに更新できるようになりました。
まとめ
最後にまとめます。
- 手軽さが重要
- 有料アプリは不要
- Twitterを使う
- ブログ機能を使う
- コンテンツマネージャーを使う
- コンテンツマネージャーのニュースを追加する
- コンテンツマネージャーデータを編集する
- お知らせ欄のデザインを整える
- リピーターとコンテンツマネージャーをリンクさせる
- お知らせの表示数を設定する
- お知らせ一覧のページの設定をする
以上について解説してきました。更新が面倒でつい放置しがちになるWixサイト。これでラクに更新できるようになりwebサイトからの情報発信も気軽にできます。ぜひ活用ください!
本記事を読んだけど、
- 自分でできる気がしない
- 自分でやる時間がない
という方向けにWixサイトの修正代行を承っています。希望される方はぜひご相談ください!
コメント
コメント一覧 (13件)
初めまして、こちらのサイトで
お知らせ一覧の作成方法通りやったのですが
リピーターにリンクを繋げても表示されませんでした。
これはwixサイトのバグなのか、それとも
何か間違えたのかよく分かりません。
教えて頂けたら幸いです。
中山様
はじめまして、お問合せありがとうございます。
リピーターのテキスト、ボタン(記事内の日付、タイトル)はそれぞれ対応するデータに接続されていますでしょうか?
エディター上で更新されなくてもプレビューで見ると更新されているということは時々あります。
初めまして、とても分かりやすい解説で大変助かります。
ありがとうございます。
私もリピーターにリンクを繋げても表示されないのですが、これは「公開前」だからでしょうか?
公開したら表示されるのでしょうか?
久保田 様
はじめまして、コメント有難うございます。
製作中、以下のメッセージが表示されるかと思います。
一度公開をしてお試しください。
公開するのが都合が悪い場合、再度非公開にすることも可能です。
記事の更新ありがとうございました!
こちらの更新して頂いたおかげでずっとつまずいていたお知らせ欄を作ることができ、
HPが一段グレードアップできました!!
大変参考になりました。
今後よろしければwix内機能でできるSEO対策も記事化して頂けたら大変ありがたいです!
めぐる 様
コメント有難うございます!
wixでできるSEO対策、よくご相談頂きます。
記事化、検討してみます!
初めまして。わからない部分があったので、詳しく教えてください。
リピーターを追加してから、「編集した内容は以下の通り」の部分の、編集した内容を教えてもらえるとありがたいです。あまり使い慣れていないので、わかりやすく教えてもらいたいです。
よろしくお願いします。
編集した内容は以下の通りの下に記載の
・リピーター、コンテナの幅、高さを調整しストリップ内に収める
・表示されているテキストを1つだけ残し『日付』と編集
・文字だけのボタンを追加し、タイトルと編集。リンク先を『News Title』のページに設定
・ラインの幅を調整
が編集した内容になります。
不明な点はどこになりますでしょうか?
具体的にには「表示されているテキストを1つだけ残し『日付』と編集」からしたの部分になります。
よろしくおねがいします
その文章の上の画像と全く同じように、
コンテナにテキスト(画像の日付)とボタン(画像のタイトル=こちらはテキストではなくボタンを配置し、背景、枠線を透明にして文字だけを残す)を配置します。
リンクの設定については2つ下の画像の通りとなります。
初めまして。リッチコンテンツをリンクする方法が分かりません。詳しく教えて頂けないでしょうか?よろしくお願い致します。
SAMU様
はじめまして、コメントありがとうございます。
リッチコンテンツはお知らせの個別ページの編集画面で『メニューの追加』⇒『コンテンツマネージャー』⇒『リッチコンテンツを追加』を選択すると追加されます。
追加されたリッチコンテンツを『データに接続』⇒『データセットを選択』⇒『リッチコンテンツを選択』
これでリンク設定の完了となります。
ありがとうございます。