【初心者】Studioのおすすめテクニック5選｜活用してWebサイト制作を魅力的に

2022/3/15葉栗雄貴

株式会社caroaでインターンをしている松本です。caroaではStudioを活用したWEBサイト制作を行っています。

今回は私がStudioでWEB制作をしている中で、わかりづらかったことや知っておくと便利だなと個人的に思ったテクニックをまとめました！

最近StudioでWEB制作を始めた方や、さらに使いこなしたいと思っている方にぜひ読んでいただきたい内容となっています。

1. CMS・リストで使えるテクニック

CMSリストや手動でリスト化したボックスの、先頭のアイテムだけにスタイルを適用できます。

リストの先頭のアイテムをクリックして、右上にある条件付きスタイルというメニューから「最初のアイテム」を選択します。あとはいつも通り設定すれば、先頭のアイテムだけにスタイルを適用できます。

このテクニックの活用例

下の画像のように最新の記事だけを目立たせたい時や、リストの上にあるボックスとの間隔を調整する時などに活用してみてください。

Studio公式の解説はこちら

CMSリストや手動でリスト化したボックスのそれぞれのアイテムごとに、個別のリンクを設定できます。

CMSと手動でリスト化した場合はやり方違うため、方法は以下の画像を参考にしてください。

少し複雑ですが、覚えてしまえばかなり効率的にリンク付きのリストが作れますよ！

CMSリストの場合

手動化リストの場合

CMSを記事タイプで作成すると、OGP画像（SNSでシェアする時に表示されるサムネイルのこと）を記事ごとに変更できます。

記事タイプのCMSで動的ページを作成後、ページ設定のカバー画像をCMSのプロパティで設定できます。

サムネイルが記事ごとに変われば、SNS等でシェアされた時に記事の内容がさらに伝わりやすくなると思います。

Studio公式の解説はこちら

ブログ記事やサービス紹介の一覧を作る時、サムネイル画像＋文章の角丸のボックスを作りたいと思ったことはありませんか？（下の画像のようなデザインです）。私は最初、画像の上部のみ角丸に切り取る方法がわからず、このようなボックスの作り方がわかりませんでした。

画像が角丸からはみ出ないようにするには、画像と文章を囲っているボックスの「はみ出し」設定で「切り取り」を選択します。そうすると、ボックスからはみ出た部分は自動的に見えなくなるので、下の画像のようなボックスが作れますよ！

モーダルページの、名称がBackdropとなっているレイヤーを選択すると、モーダル出現時のアニメーションを設定できます。

フェードインや上下左右から出現など数種類あり、サイトの雰囲気に合わせたアニメーションをつけられます。

今回は、初心者の方にもっとStudioを活用していただくためのヒントになりそうな機能を紹介してみました！ぜひご自分でサイトを制作する時に使ってみてください。

次回は応用編として、Studioでより便利で使いやすいサイトを作るためのテクニックを紹介したいと思います！！