メインコンテンツにスキップ
セミナー動画
YouTube
コミュニティで知見を深める
English
日本語
日本語
セミナー動画
YouTube
コミュニティで知見を深める
English
日本語
日本語
記事を検索...
すべてのコレクション
ボックスのデザイン設定
ボックスのデザイン設定
67件の記事
Figma to Studio
ボックスのレイアウトとポジション
ボックスのレイアウト:サイズ(幅・高さ)
ボックスのレイアウト:マージン・パディング・ギャップ(余白)
ボックスのレイアウト:配列方向と配置
ボックスのポジション:位置・重ね順・はみ出し
ボックスのポジション:位置(相対・固定・絶対・追従)
ボックスのポジション:はみ出し設定
ボックスを重ねる(ネガティブマージン)
複数のボックスの縦幅(高さ)を揃える
固定位置のボックスをスクリーン下部・右端に配置する
変形・回転・傾き
ボックスの外観設定
ボックスの外観:フィルターを設定する
ボックスの外観:背景色を設定する
ボックスの外観:枠線を設定する
ボックスの外観:角丸を設定する
ボックスの外観:影(シャドウ)を設定する
ボックスの外観:不透明度
背景を斜めに塗る・斜め背景を作成する
デザインの一括管理(カラースタイル・テキストスタイル)
カラースタイルを設定する
選択色を活用する
マイカラー(My Color)への新規登録停止と機能提供終了について
テキストスタイルの設定と管理
フォント
Studioで利用できるフォント
フォントリスト:サイト内で使用するフォントを管理する
フォントの設定・置換・削除
カスタムフォント(Custom Fonts)
StudioでTypeSquareを使用する
フォント選びと使い分けのヒント:システムフォント(System Font)とWebフォント
エディタで設定したフォントが、異なるフォントとして表示される場合
1プロジェクトで使用できる書体数の上限
FONTPLUSの提供終了について(2026年4月7日終了)
コンポーネント
コンポーネント
コンポーネントでプロパティを活用して、設置場所ごとに内部の要素を変える
エフェクトとアニメーション
条件付きスタイル
条件付きスタイル:スクロールエフェクトを設定する(Scroll Effect)
アニメーション(イージング・時間・遅延)を設定する
ボタンにカーソルを乗せると色が変わるアニメーションの作成方法
ホバー時に画像を切り替える
ホバー時に端から色が変わるボタンを作成する
出現時に下からフェードインするアニメーションを作成する
タイピング風テキストのアニメーションを作成する
ローディング風アニメーションを作成する
スクロールに連動して画像がゆっくりスライドする表現(パララックス)を設定する
リンクやホバーアニメーションが動作しない時の修正方法
「出現時」のアニメーションが表示されない原因と対処法
デザインの小技、便利機能便
コマンドパレットでプロジェクト内外を検索する
ヘッダーやボタンを画面に固定表示する
ボックスを横並び・縦並びに変更する方法
画像上のテキストを見やすくするコツ
タブ切り替えデザインの作成方法
エディタ上でテーブル(表)を追加したい
ダウンロードボタンを設置したい
アフィリエイトタグを設置したい
エディタ上のページやデザインの一部を誤って削除してしまった場合の対処法
デザイン編集時のトラブルシューティング
エディタ上でボックスを選択できません
左パネルを開けない、右パネルの設定項目が少ない場合
「デザインデータの容量が大きくなっています」と表示される場合
ボックス入れ子構造の階層上限
固定位置でヘッダーを配置すると、デザインと重なってしまう
埋め込んだ背景動画の上下や左右に余白ができてしまう場合
コピー & ペーストができない場合
画像に青い網がかかって文字を重ねられない場合
Toggle ボックスのメニューが上下に開いて動いてしまう場合
ボックスの画像・テキスト・リンクを変更すると、他のボックスも同じ内容に置き換わってしまう
デザイン表示のトラブルシューティング
サイトが意図せず左に寄る、右側に余白ができる
スクロールバーが表示されない
縦書きテキストが、プレビューやサイトで重なってしまう場合