メインコンテンツにスキップ
すべてのコレクションはじめに
制作中の「うまくいかない」を解消する20のチェックリスト
制作中の「うまくいかない」を解消する20のチェックリスト

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

Misaki avatar
対応者:Misaki
1か月以上前に更新

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

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

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

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

解決方法

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

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

関連記事

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

解決方法

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

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

関連記事

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

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

解決方法

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

スクリーンショット:デザインエディタのレイヤーパネルからCMSリストを選択し、動的リストに紐づいているCMSモデルを表示している様子。

関連記事

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

解決方法

開始位置が画面・親ボックスから出ていると、再生されません。

スクリーンショット:デザインエディタのスクリーンから出現時アニメーションを設定したボックスがはみ出している様子。

関連記事

非表示設定になっていませんか?

解決方法

チェックが外れていると、そのコンテンツが非表示になります。

スクリーンショット:デザインエディタで特定のボックスを選択し、表示設定のブレイクポイントごとのチェックボックスにチェックが入っていることを確認している様子。

関連記事

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

解決方法

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

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

関連記事

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

解決方法

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

スクリーンショット:デザインエディタ上で動的リストを選択し、右パネルの「表示条件」が設定されていないことを確認している様子。

関連記事


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

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

解決方法

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

スクリーンショット:デザインエディタ上で動的リストを選択し、右パネルの「リンク」の設定を確認している様子。

関連記事

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

解決方法

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

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

関連記事

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

解決方法

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

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

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

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

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

スクリーンショット:レイヤーパネルから特定のボックスを選択し、上パネルの「重ね順」を確認している様子。

関連記事

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

解決方法

記事詳細ページを表示するためには、動的ページが必要です。

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

関連記事


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

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

解決方法

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

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

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

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

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

スクリーンショット:レイヤーパネルから特定のボックスを選択し、上パネルの「重ね順」を確認している様子。

関連記事


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

縦幅はautoになっていますか?

解決方法

ボックスが中に入っているボックスの縦幅は、基本的にautoに設定します。autoを設定すると、中のボックスの高さに応じて外側のボックスの高さが自動調整されます。

スクリーンショット:デザインエディタで子要素を包括した親ボックスを選択し、上パネルの「縦幅」の単位を確認している様子。

関連記事


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

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

解決方法

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

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

関連記事

縦幅はautoになっていますか?

解決方法

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

スクリーンショット:デザインエディタで子要素を包括した親ボックスを選択し、上パネルの「縦幅」の単位を確認している様子。

関連記事

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

解決方法

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

スクリーンショット:デザインエディタで3カラム表示のボックスの1つを選択し、上パネルの「横幅」の単位を確認している様子。

関連記事

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

解決方法

ボックスの上に表示される矢印のメニューから並べたい向きの矢印を選択することで、ボックスが矢印の指す方向に並びます。

スクリーンショット:デザインエディタで子要素を包括した親ボックスを選択し、ボックスの上に表示される「矢印のメニュー」を展開している様子。

関連記事


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

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

解決方法

(1)ブラウザの右上の設定マークをクリック

(2)「ズーム」を確認

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

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

解決方法

(1)閲覧しているデバイスの横幅を確認

(2)グレーのバーを動かして横幅を閲覧しているデバイス幅に揃える

デザインエディタで、スクリーンの両サイドに表示されるバーを動かして、閲覧しているデバイス幅と揃えて確認している様子。

関連記事


解決しない場合

この記事で解決しない疑問がある場合は、エディタ右下の[?]からチャットサポートへお問い合わせください。

また、ユーザー同士でStudioの使い方について情報交換ができる「Studio Community」のQ&Aもぜひご活用ください。

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