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

Webサイトにおいて「お知らせ欄」は、最新情報や重要な案内を伝えるための大切なセクションです。
StudioではCMS機能を用いることで、記事の追加・編集が初心者でもできるお知らせ欄を実装することができます。完成イメージとしては、下記のとおりです。

今回は、実際の画像を使いながら、お知らせ欄を実装していく手順について解説していきます。
ぜひ参考にしてみてください!
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。

StudioのCMSでお知らせ欄を作る方法
StudioのCMS機能でお知らせ欄を作る手順は、下記のとおりです。
それぞれ具体的に説明します。
①:CMSで「ニュース・お知らせ」のテンプレを選択する
プロジェクトの上部メニューにある「CMS」をクリックします。

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

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

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

②:デザインエディタでCMSを追加する
デザインエディタにアクセスします。
左メニュー欄から「追加」→「CMS」→記事リストをキャンバス上にドラッグ&ドロップします。


CMSで管理されているアイテムが、自動でサイトに反映されるようになりました!
現在はCMSアイテムが2件しか表示されていない、「もっと見る」のボタンがないなど、機能的に不十分といえます。今回はCMSアイテムが標準で5件表示されるように、かつ「もっと見る」ボタンを設置していきます。
CMSアイテム群を選択した状態で、左メニュー欄の「レイヤー」を開きます。


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


③:好みのデザインに調整する
デフォルト状態だと、CMSアイテムは下記の要素が含まれています。
- アイキャッチ画像
- 記事の公開日
- 記事のタイトル
- 記事の本文(冒頭100文字程度)
- 筆者のプロフィール画像
- 筆者のプロフィール名
ただし、今回はシンプルなお知らせ欄にしたいです。下記のような「記事の公開日」と「カテゴリ」と「タイトル」が表示されたお知らせ欄に変更していきます。


現在表示されている「アイキャッチ画像」と「記事の本文」と「記事のプロフィール画像」と「記事のプロフィール名」は必要ないので削除します。
削除すると、下記のようなデザインになったはずです。


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


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


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


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



デフォルトで準備されている記事・カテゴリはすべて削除してOKです!
CMSの編集画面に入ったら、「新規追加」のボタンから新しい記事・カテゴリを追加しましょう。


StudioのCMSに関するよくある質問
Studioでサイト制作は「Terace」にお任せ!
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。



「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています!
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。


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






今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください!