企業サイトなどでよくある『News』とか『お知らせ』をwixサイトに導入したいんだけどできるの？
どうやって設置したらいいんだろう？
更新は簡単にできるのかなぁ？
こういった疑問にこたえます。
- wixサイトにもお知らせ欄は設置できます
- wixサイトにお知らせ欄を設置する3つの方法
- 更新がラクなコンテンツマネージャーの設定方法
こんにちは、ろにぃ（@ronnie_2020)です。最近、wixサイトの制作の依頼を頂く機会が増えてきました。
今回は『wixサイトにお知らせ欄を設置する方法』について解説していきます。
これまで情報が見つからないまま代替案で済ませてきた機能。 今回サポートセンターに問い合わせてようやく解決しました。
こういった僕が、解説していきます。
お知らせ欄とは企業サイトなどでよく見かける最新情報が一目でわかるコンテンツです↓
ひと目で最新情報がわかって、更新も簡単にできそうなやつ。
今まで何年も悩んできた問題がようやく解決できたので公開します。ぜひ最後までご覧ください！
『自分で作るなんてめんどくさい！』という方向けにココナラにて作業代行を承っております。
検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる
wixサイトにもお知らせ欄は設置できます
サイトを見ていて、このお知らせ欄があるとサイトの更新頻度がすぐにわかりますよね。 これってとても重要なのではないかと思っています。
最終更新が数年前だと、
と思ってしまいますから。
大事なのは更新の手軽さ
更新の手軽さはとても大切。
面倒で時間のかかる作業になると放置したくなりますよね？
『あっ、この情報リリースしなきゃ！』
と思った時に、2，3分でさっと更新できるくらいであって欲しいですよね。
有料アプリは使用しない
wixにはたくさんのプラグインアプリがあるのが魅力。
でも 結構不具合があったり、アプリひとつでサイト維持費を越えてしまうような金額のものまである。
無料のものだと機能が限られ、 使い物にならなかったりもするので、アプリは使わないようにしています。
wixサイトにお知らせ欄を設置する３つの方法
wixサイトにお知らせ欄を導入するため、僕が実践してきたのは以下の３パターンです。
これら３つを順に解説していきます。
あくまで誰でも気軽に更新できる方法でお伝えします。
① お知らせ機能としてTwitterを使う
wixサイトにTwitterのタイムラインを埋め込み、 お知らせ機能として使用してしまう方法です。
- 更新が10秒でできる！
Twitterを更新すればサイトに連動しているのでとても簡単にできます。
- 集客としてTwitterが使えなくなる
ツイートが全てサイトに反映されてしまうため、 お知らせ欄に関係ないことは発信できなくなります。
SNS集客として根強い人気を誇るTwitterを使えなくなるのは痛いかも。
② ブログ機能を使う
wixブログ機能で『お知らせ』のカテゴリーを作り、 それだけを表示するようにする方法です。
- デザインが良い！
- スマホでも更新できるのでとてもラク！
- レイアウトの調整範囲が限られ、１つ１つが大きい
特にスマホで見た時にお知らせがいくつもあると、 延々とスクロールしなければならなくなる。
③ コンテンツマネージャーを使う
企業サイトでよく見る形をそのまま再現できます。
- 始めにデザインを決めてしまえば、 あとはexcel入力をするような感覚で更新できる
- 更新時に重いwixエディターを開く必要がない
- 自由にカスタマイズできる。
- PCでの作業が必要
- 導入がややこしい！⇒この記事で解決できます！
と感じる方にはこのコンテンツマネージャーの利用がおすすめです！
更新が簡単なコンテンツマネージャーの設置方法 ※2022年3月更新
便利ですがわかりにくく、サポートセンターの解説だけでは 不足した部分が多数あるコンテンツマネージャー。
ここからは真似するだけで見やすく、更新が簡単なお知らせ欄が設置できるよう解説していきます。
コンテンツマネージャーのニュースを追加する
wixのエディターを開き、コンテンツマネージャーのニュースを追加します。
『最新ニュース』をサイトに追加すると、自動的にページ作成されます。
ページが追加されるとコンテンツマネージャーの編集画面が開きます。
コンテンツマネージャーデータを編集する
ニュースとして必要な項目がセットされています。
不要なものは削除します。
今回はReporter NameとSubtitleは削除しました。
次に必要な情報、Title（お知らせのタイトル）、image（お知らせのアイキャッチ画像）、Date（お知らせする日時）、Article Text（お知らせの詳細）を編集します。
これでお知らせ欄に載せたい情報ができました。
プリセットではお知らせが６つ作成されますので、不要な分は消してしまいましょう。
次はこのデータを表示するレイアウト決めです。
お知らせ欄のデザインを整える
次にお知らせ欄を表示させる部分のデザインを決めます。
トップページの追加した箇所にストリップを追加します。
wixエディターの『追加』から『リスト＆グリッド』の『リピーター』を選択し、 適当なリピーターをクリックして追加します。
エディターメニューの追加→リスト→リピーターから追加するリピーターを選択。編集して使うのでシンプルなものでOK。
追加したリピーターを編集します。
編集した内容は以下の通り
- リピーター、コンテナの幅、高さを調整しストリップ内に収める
- 表示されているテキストを１つだけ残し『日付』と編集（便宜上日付としていますが何でも構いません）
- 文字だけのボタンを追加し、タイトルと編集（これもなんでも構わない）リンク先を『News Title』のページに設定
- ラインの幅を調整
上記の編集内容はお好みでデザインしてください。
ここではわかりやすく、テキストで後で更新日が入るところに『日付』、記事タイトルが入る部分のボタンを『タイトル』と入力して割り当てましたが、 入力する文字は何でも構いません。
あとでコンテンツマネージャーとリンクするので入れ替わります。
リピーターは一番上のコンテナ内を編集すると、 それに連動して下のコンテナ内も編集されます。
例えば、『タイトルをクリックすると詳細のページに移行する』という機能を使いたい時、 タイトルをボタンで作ることにより、クリック時の動作設定が可能。
リンク先をNews(Title）ページにすればお知らせ欄から詳細ページへ飛ばすことができるようになるんです！
ボタンは背景を消せるので、見た目はテキストと変わらないように配置ができます。
テキストにリンクを貼ろうと思ったのですが、それができず散々ググりました。
しかしこのリピーターとボタンの使用について情報がなく、 カスタマーセンターの方がやさしく丁寧に教えてくれました。
リピーターとコンテンツマネージャーをリンクさせる
リピーターに配置したテキスト、ボタンをそれぞれを先程作ったコンテンツマネージャーのNewsとリンクさせます。
各項目を割り当て、プレビューを確認すると、
設定した通り表示され完成です。
お知らせの表示数を制限する
古い情報が延々と並んだら見栄えが悪いですよね？ 新しい情報だけを表示できるよう、表示される数を制限できます。
リピーター内にあるデータセットのアイコンをクリック、設定から 『表示するアイテム数』をお好きな数にセットします。
画像では３に設定しましたので、新しいお知らせから３つ目までしか表示されなくなりました。
これで古い情報は残しておいてもお知らせ欄には表示されません。
お知らせ一覧ページの設定
ボタンは複数表示されないようリピートの外、ストリップの中に設置するように注意してください！
これでボタンを押すとお知らせ一覧のページに飛べるように設定できました。
あとはお知らせ欄のデザインを整えるのと同様、News(All）とNews（Title）のページのデザインを整えて完成です。
・見出しの設定
・画像や動画の挿入
などブログみたいな編集がエディターをひらかなくてもできるよ！
テキストにAricle Text（リッチコンテンツ）を接続
エディターを開かずダッシュボードのコンテンツマネージャーから装飾も可能なお知らせ本文の入力が可能
今後の更新はダッシュボードのコンテンツマネージャーで情報を追加していくだけ！
とてもカンタンに更新できるようになりました。
【2022年】wixサイトにお知らせ欄を設置する方法を徹底解説！ まとめ
最後にまとめます。
wixサイトにもお知らせ欄は設置できる
- 手軽さが重要
- 有料アプリは不要
wixサイトにお知らせ欄を設置する3つの方法
- Twitterを使う
- ブログ機能を使う
- コンテンツマネージャーを使う
コンテンツマネージャーの設定方法
- コンテンツマネージャーのNewsを追加する
- ダッシュボードのコンテンツマネージャーデータを書き換える
- ホーム画面にリピーターを追加し、編集する
- コンテンツマネージャーとリンクさせる
- お知らせ表示を制限する
- お知らせ一覧ページの設定
以上について解説してきました。
更新に手間がかかり、つい放置してしまいがちになるwixサイト
これでラクに更新できるようになり、 webサイトからの情報発信も気軽にできるでぜひ活用ください！
本記事を読んだけど、
- 自分でできる気がしない！
- 自分でやる時間がない！
という方向けにココナラにて作業代行を承っております。
検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる
コメント
コメント一覧 （13件）
初めまして、こちらのサイトで
お知らせ一覧の作成方法通りやったのですが
リピーターにリンクを繋げても表示されませんでした。
これはwixサイトのバグなのか、それとも
何か間違えたのかよく分かりません。
教えて頂けたら幸いです。
中山様
はじめまして、お問合せありがとうございます。
リピーターのテキスト、ボタン（記事内の日付、タイトル）はそれぞれ対応するデータに接続されていますでしょうか？
エディター上で更新されなくてもプレビューで見ると更新されているということは時々あります。
初めまして、とても分かりやすい解説で大変助かります。
ありがとうございます。
私もリピーターにリンクを繋げても表示されないのですが、これは「公開前」だからでしょうか？
公開したら表示されるのでしょうか？
久保田 様
はじめまして、コメント有難うございます。
製作中、以下のメッセージが表示されるかと思います。
一度公開をしてお試しください。
公開するのが都合が悪い場合、再度非公開にすることも可能です。
記事の更新ありがとうございました！
こちらの更新して頂いたおかげでずっとつまずいていたお知らせ欄を作ることができ、
HPが一段グレードアップできました！！
大変参考になりました。
今後よろしければwix内機能でできるSEO対策も記事化して頂けたら大変ありがたいです！
めぐる 様
コメント有難うございます！
wixでできるSEO対策、よくご相談頂きます。
記事化、検討してみます!
初めまして。わからない部分があったので、詳しく教えてください。
リピーターを追加してから、「編集した内容は以下の通り」の部分の、編集した内容を教えてもらえるとありがたいです。あまり使い慣れていないので、わかりやすく教えてもらいたいです。
よろしくお願いします。
編集した内容は以下の通りの下に記載の
・リピーター、コンテナの幅、高さを調整しストリップ内に収める
・表示されているテキストを１つだけ残し『日付』と編集
・文字だけのボタンを追加し、タイトルと編集。リンク先を『News Title』のページに設定
・ラインの幅を調整
が編集した内容になります。
不明な点はどこになりますでしょうか？
具体的にには「表示されているテキストを１つだけ残し『日付』と編集」からしたの部分になります。
よろしくおねがいします
その文章の上の画像と全く同じように、
コンテナにテキスト（画像の日付）とボタン（画像のタイトル＝こちらはテキストではなくボタンを配置し、背景、枠線を透明にして文字だけを残す）を配置します。
リンクの設定については２つ下の画像の通りとなります。
初めまして。リッチコンテンツをリンクする方法が分かりません。詳しく教えて頂けないでしょうか？よろしくお願い致します。
SAMU様
はじめまして、コメントありがとうございます。
リッチコンテンツはお知らせの個別ページの編集画面で『メニューの追加』⇒『コンテンツマネージャー』⇒『リッチコンテンツを追加』を選択すると追加されます。
追加されたリッチコンテンツを『データに接続』⇒『データセットを選択』⇒『リッチコンテンツを選択』
これでリンク設定の完了となります。
ありがとうございます。