【Studio】CMS機能でお知らせ欄を作る方法

Webサイトにおいて「お知らせ欄」は、最新情報重要な案内を伝えるための大切なセクションです。

StudioではCMS機能を用いることで、記事の追加・編集が初心者でもできるお知らせ欄を実装することができます。完成イメージとしては、下記のとおりです。

今回は、実際の画像を使いながら、お知らせ欄を実装していく手順について解説していきます。

ぜひ参考にしてみてください!

「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。

Service
【最安15万円〜】
全てセット料金のホームページ制作サービス

サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。

最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。

期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください!

目次

StudioのCMSでお知らせ欄を作る方法

StudioのCMS機能でお知らせ欄を作る手順は、下記のとおりです。

それぞれ具体的に説明します。

①:CMSで「ニュース・お知らせ」のテンプレを選択する

プロジェクトの上部メニューにある「CMS」をクリックします。

モデルの横にある「+」ボタンをクリック、「テンプレートから選択」をクリックします。

1番右にある「ニュース・お知らせ」をクリックします。

テンプレートからモデルを追加すれば、必要なモデルを自動で準備してくれるため、手間が省けるメリットがあります。

下記のように、記事モデルとカテゴリモデルが自動で準備されたはずです。

②:デザインエディタでCMSを追加する

デザインエディタにアクセスします。

左メニュー欄から「追加」→「CMS」→記事リストをキャンバス上にドラッグ&ドロップします。

Kaji

CMSで管理されているアイテムが、自動でサイトに反映されるようになりました!

現在はCMSアイテムが2件しか表示されていない、「もっと見る」のボタンがないなど、機能的に不十分といえます。今回はCMSアイテムが標準で5件表示されるように、かつ「もっと見る」ボタンを設置していきます。

CMSアイテム群を選択した状態で、左メニュー欄の「レイヤー」を開きます。

「表示数:5」に変更して、もっと見るボタンをONに変更します。

③:好みのデザインに調整する

デフォルト状態だと、CMSアイテムは下記の要素が含まれています。

CMSアイテムのデフォルト要素
  • アイキャッチ画像
  • 記事の公開日
  • 記事のタイトル
  • 記事の本文(冒頭100文字程度)
  • 筆者のプロフィール画像
  • 筆者のプロフィール名

ただし、今回はシンプルなお知らせ欄にしたいです。下記のような「記事の公開日」と「カテゴリ」と「タイトル」が表示されたお知らせ欄に変更していきます。

現在表示されている「アイキャッチ画像」と「記事の本文」と「記事のプロフィール画像」と「記事のプロフィール名」は必要ないので削除します。

削除すると、下記のようなデザインになったはずです。

カテゴリのタグを付けておきたいので、日付の横に「Text」を追加して、好みのデザインに変更します。

文字を白文字、背景に水色、角丸を50px程度、上下5px・左右8pxほどの余白を持たせておきました!

左メニュー欄のレイヤーで、カテゴリのタイトル名と紐付けます。

すると、下記のようにカテゴリ名が動的に表示されるようになったはずです。

④:記事・カテゴリの内容を変更する

CMSでお知らせ欄をほとんど作り終えました。あとは中身がデフォルト状態なので、記事・カテゴリを変更しましょう。

Kaji

デフォルトで準備されている記事・カテゴリはすべて削除してOKです!

CMSの編集画面に入ったら、「新規追加」のボタンから新しい記事・カテゴリを追加しましょう。

StudioのCMSに関するよくある質問

CMSアイテムが表示されない原因は?

ライブプレビューでは表示されるけど、サイトを公開するとCMSアイテムが表示されないケースはよく聞きます。

ほとんどのケースで、原因は下記2つです。

  • アイテムが「公開」以外のステータスになっている
  • 更新ボタンを押していない

対策方法について詳しく知りたい方は、「【Studio】CMSアイテムが表示されない時の対処法」をご覧ください。

CMSモデル数・アイテム数のカウント方法ってどのようにしますか?

お知らせ欄に「カテゴリ」を付ける場合、モデル数は2個となります。

またアイテム数はカテゴリ数、記事数によって変動します。例えば、カテゴリが3個あって、記事が10記事あった場合、合計アイテム数は13個となります。

料金プラン毎にモデル数・アイテム数の上限が変わってくるので、カウント方法について理解しておくことを推奨しています。

まだ理解できていない方は、ぜひ以下の記事をご覧ください。

タグやカテゴリでCMSアイテムを絞り込むことはできますか?

絞り込むことは可能です。

例えば、下記のようにカテゴリをクリックすると、該当するアイテムだけが表示されるように設定できます。

初心者が自らカスタマイズして、CMSアイテムの絞り込みを設定するのは難しいため、なるべくStudio側で用意されているテンプレートを使うのがおすすめです。

テンプレートを活用して、CMSアイテムをタグで絞り込む方法は、以下の記事で詳しく説明しています。

Studioでサイト制作は「Terace」にお任せ!

Kaji

「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています!

サービスの特徴
  • ポッキリ価格でホームページを制作できる
  • 専属デザイナーが完全オリジナルのデザイン作成
  • 納品後1ヶ月間は無料の電話サポートあり
  • 自社更新できるホームページが作れる
  • ホームページ制作期間中は何度でも無料相談できる
  • 顔の出ているフリーランス3人が運営
  • 維持費0円でホームページを運営できる

料金プランは、以下の通りです。

ポッキリ価格でホームページが作れるサービスであり、個人事業主中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。

今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。

先着順で締め切るので、気になる方はぜひお早めにお問い合わせください!

ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集

ホームページ制作に関するよくある質問14選にすべて答えています。

「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。

無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事の執筆者

同志社大学を卒業後、新卒でレバレジーズ株式会社に入社。現在はメディア責任者をやりながら、Terace(テラス)のフロントエンドエンジニアとして活動しています。企業と提携してSEOコンサルなどもやっています。SEO検定1級保有

目次