デザインエディタ | Studio Help

Studio Help

すべてのコレクション

デザインエディタ

デザインエディタ

プロジェクト全体の設定

エディタの動作環境

プロジェクトの作成と管理

プロジェクトをリセットする

サイトのバージョンを管理する

Studioバナーの表示設定

サムネイル（OGP）設定

ファビコンの設定方法

サイト・ページにカスタムコードを追加する

Studioエディタにアップロード可能なファイル形式とサイズ

PDFファイルのアップロードと管理

ひとつ戻るボタンの使い方

プロジェクト一覧に表示されるカバー画像の変更手順

ページ毎の設定

公開ページ数のプラン別上限

ページタイプ

ページ管理

ページのメタ情報

ページの公開範囲設定

モーダルを追加する

404ページを設置する方法

構造化データの設定方法

モーダルへのリンク設定方法

コピー＆ペーストについて

レイヤーパネル

レスポンシブ

レスポンシブ設定方法

ブレイクポイントの設定方法

スクリーン幅の変更

エディタとスマホ（公開サイト・プレビュー）でのサイト表示が異なります

PCとモバイルで表示する画像を変える方法

ハンバーガーメニューの作成方法

ボックスの追加

ボックスの選択

ボックスのグループ化とは

親子ボックス

ボックスの配置調整

ボックスを横並び・縦並びに変更する方法

Toggle（トグル）ボックスの追加

ボックス毎の設定（スタイルバー）

ボックスの配置：相対位置・固定位置・絶対位置・追従位置

ボックスのサイズ単位設定方法

マージン・パディング・ギャップの設定方法

ネガティブマージン

ボックスの表示設定

ボックスへの色の設定方法

ボックスの枠線設定

シャドウの設定方法

ボックスの角丸設定

ブレンドモード・フィルター・背面フィルター

条件付きスタイル

アニメーション

ローディング風アニメーションの作成方法

ボタンにカーソルを乗せると色が変わるアニメーションの作成方法

フェードしながらスライド表示させるアニメーションの作成方法

モーダル内でスクロールを設定する方法

ホバーで色が端から変わるボタンアニメーションの作成方法

斜め背景を作成する方法

ボックス毎の設定（ボックス設定パネル）

リンクの種類と設定方法

X（Twitter）シェアボタンの設置方法

「この記事をシェアする」ボタンの設置方法

電話をかけるリンクの設定方法

メールソフトを自動起動するリンクの作成方法

ページトップに戻るボタンを配置する方法

画像ボックス

画像ボックスの特徴と配置・変更方法

画像ファイルのアップロードと管理

画像スタイルメニュー

画像ボックスのBoxモード・Imgモードとは

画像のalt設定

フリー画像

背景画像を固定表示する方法

テキストボックス

テキストボックス

リッチテキストボックス

テキストのスタイル変更方法

テキストの文字組み

Studioで利用できるフォント

フォント選びと使い分けのヒント：システムフォント（System Font）とWebフォント

フォントの設定・置換・削除方法

TypeSquareの使い方

フォントの管理方法

アイコンボックス

アイコンボックス

アイコンの変更

アイコンのスタイル変更

Embedボックス

Embedボックスを追加する

YouTube動画をサイトに埋め込む方法

Vimeo動画を埋め込む

X（Twitter）を埋め込む

Facebookを埋め込む

formrunを埋め込む

Fireworkを埋め込む

HubSpot Formを埋め込む

Googleフォームを埋め込む

Googleカレンダーを埋め込む

Google Mapsを埋め込む

Embedボックスのレスポンシブ対応

Lottieの埋め込みとカスタマイズ

背景動画の設定方法

X（Twitter）フィードを埋め込む方法

リストボックス

リストの設定方法

リストカルーセルの配置・編集方法

noteのRSS設置手順

リストのアイテムごとにリンクを設定する方法

API連携 (Beta)とは

microCMS API 連携

Notion API 連携

Airtable API 連携

作業効率化

Figma to Studio

テキストスタイルの設定と管理

選択色の確認と色の一括変更方法

コンポーネント

セクションの追加

コンテンツ編集モード

コマンドパレットを活用する

キーボードショートカット一覧

タイトルと説明文（ディスクリプション）をAIで自動生成する

カラースタイルの設定方法

エディタのコメント機能