メインコンテンツにスキップ

制作中の「うまくいかない」を解消する20のチェックリスト

CMSアイテムが表示されない、リンクが機能しない、デバイス間で崩れるなど、Studioでよくある制作中のつまずきを20のチェックリストで解決!

一週間前以上前にアップデートされました

Studioでよくある制作中のつまずき

Studioでサイト制作中につまずきがちなポイントとその解決方法をご紹介します。問題に対して、各チェック項目から該当しそうなものを確認し、「解決方法」をお試しください。


特定の要素やCMSアイテム、記事が表示されません

【Studio CMS】アイテムの公開ステータスを「公開」にしていますか?

解決方法

CMSアイテムの公開ステータスを「公開中」に変更してください。

スクリーンショット:CMSダッシュボードからアイテムの公開ステータスを「公開中」に変更する様子。

関連記事

【Studio CMS】コレクションの公開ステータスを「公開」にしていますか?

解決方法

CMSコレクションの公開ステータスを「公開中」に変更してください。

スクリーンショット:CMSダッシュボードからコレクションの公開ステータスを「公開中」に変更する様子。

関連記事

【Studio CMS】動的ページは活用していますか?

解決方法

Studio CMSの記事アイテムを表示するためには、動的ページで作成した記事詳細を表示するページをを作成する必要があります。

スクリーンショット:デザインエディタのページ一覧に記事詳細ページ(動的ページ)が存在していることを確認している様子。

関連記事

【Studio CMS】紐付けるCMSモデルは正しいですか?

解決方法

動的リストに紐づいているCMSモデルに誤りがないか確認してください。

関連記事

出現時アニメーションの開始位置は正しいですか?

解決方法

出現時アニメーションの開始位置が、スクリーンや親ボックスから出ていると、アニメーションが再生されない原因となります。

プレビューや公開サイトの画面幅が、アニメーション開始位置より狭くなると要素が正しく出現しなくなります。

関連記事

ボックス要素が非表示設定になっていませんか?

解決方法

特定のデバイス幅でのみ表示されない要素は、ボックスの表示設定で該当のデバイス幅(ブレイクポイント)でチェックが外れている可能性があります。

関連記事

重ね順は正しいですか?(他のボックスと干渉していませんか?)

解決方法

対象のボックスに、別のボックスが重なっていないかを確認してください。

スクリーンショット:特定のボックスに、別のボックスのパディングが重なっている様子。

関連記事

表示条件が設定されていませんか?

解決方法

動的リストまたは動的ページ内のボックス要素をが表示されない場合には、誤った「表示条件」が設定されていないかを確認してください。

関連記事


正しいリンク先に遷移しません(異なるページ、404ページが表示される)

設定したリンクは正しいものになっていますか?

解決方法

設定しているリンクに誤りがないかを確認してください。

関連記事

リンクを設定するボックスは正しいですか?

解決方法

リンクを設定しているボックスに誤りがないか、レイヤーパネルから確認してください。

スクリーンショット:デザインエディタ上でアイコンとテキストが並んだボックスのアイコンのみを選択し、右パネルの「リンク」の設定を確認している様子。

関連記事

重ね順は正しいですか?(他のボックスと干渉していませんか?)

解決方法

リンクやホバーアニメーションが機能しない問題のあるボックスに、別のボックスが重なっているかどうかをエディター上で確認してください。

必要に応じて、配置を見直したり、重ね順を調整してください。

部分的に重なるボックスによる問題

スクリーンショット:特定のボックスに、別のボックスのパディングが重なっている様子。

全体を覆うアニメーションボックスによる問題

関連記事

【Studio CMS】動的ページは活用していますか?

解決方法

Studio CMSの記事アイテムを表示するためには、動的ページで作成した記事詳細を表示するページをを作成する必要があります。

スクリーンショット:デザインエディタのページ一覧に記事詳細ページ(動的ページ)が存在している様子。

関連記事


リンクを設定しましたがクリックできません

重ね順は正しいですか?(他のボックスと干渉していませんか?)

解決方法

リンクやホバーアニメーションが機能しない問題のあるボックスに、別のボックスが重なっているかどうかをエディター上で確認してください。

必要に応じて、配置を見直したり、重ね順を調整してください。

部分的に重なるボックスによる問題

スクリーンショット:特定のボックスに、別のボックスのパディングが重なっている様子。

全体を覆うアニメーションボックスによる問題

関連記事


テキストやコンテンツが被ってしまいます(はみ出てしまう、見切れてしまう、表示されない)

高さはautoになっていますか?

解決方法

ボックスが中に入っているボックスの高さは、基本的にautoに設定します。

autoにすることで、中のボックスの高さに応じて外側のボックスの高さが自動調整されます。

関連記事


違うデバイスで見ると崩れます

レスポンシブデザインの設定をしていますか?

解決方法

サイト閲覧者が使用するデバイス(例: デスクトップPC、タブレット、スマートフォンなど)の画面サイズに応じて、表示が自動的に調整・最適化されるよう、画面サイズごとに要素のサイズやレイアウトを調整してください。

基準サイズから順にモバイルサイズに向かってブレイクポイントを切り替えてレスポンシブ設定する様子。

関連記事

高さはautoになっていますか?

解決方法

様々なレイアウトに対応しやすくなる為、親ボックスの高さはautoに設定することをお勧めします。

関連記事

%、flex、autoなど他の単位を試してみましたか?

解決方法

px以外の単位(%, auto, flexなど)を意識して使うことでより柔軟なレイアウトが可能になります。

関連記事

並び方の変更を試してみましたか?

解決方法

ボックスの上に表示される矢印のメニュー、または、右パネル内ボックスタブの方向設定から設定できます。

並べたい向きの矢印を選択することで、ボックスが矢印の指す方向に並びます。

関連記事


エディターとライブプレビュー、サイトの見え方が違います

ブラウザの倍率は同じですか?

解決方法

  1. ブラウザの右上の設定マークをクリックします。

  2. 「ズーム」を選択して、ブラウザの表示倍率を確認します。

ブラウザでサイトを表示し、ズームが100%になっていることを確認している様子

同じ横幅で見ていますか?

解決方法

  1. 閲覧しているデバイスの横幅の値を確認します。

  2. スクリーン横のバーを動かして、横幅を閲覧しているデバイス幅に揃えて表示を確認します。

関連記事


解決しない場合

この記事で解決しない疑問がある場合は、チャットサポートや、ユーザー同士でStudioの使い方について情報交換ができる「Studio Community」もぜひご活用ください。

こちらの回答で解決しましたか?