Studio

各種ボックス

ページ内のコンテンツを整理し、レイアウトを構築する際に使えるセクションの種類と追加手順を説明します。あらかじめレスポンシブ設定されたセクションパーツの配置が便利です。セクションパーツのサイズを変更するとレスポンシブ設定が崩れるため注意が必要です。

セクション・セクションパーツ

セクション

画像ボックスは、ページに画像を追加する際に利用するボックス要素です。Studioにアップロードした画像、Unsplashのフリー画像、外部サーバーに保存された画像のURL指定に対応しています。

画像ボックス

Studioの画像ボックスで選べる [Box] モードと [Img] モードの違いを整理します。各モードの特徴、向いている使い方、切り替え時の注意点を解説します。

画像ボックス：BoxモードとImgモード

エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのフィルターや、背景画像のサイズ調整、リピート、位置調整の方法を説明します。

画像ボックス：画像に背景加工をする

imgモードの画像ボックスに代替テキストを設定する方法を説明します。SEOの観点からも、この情報を設定することは非常に重要です。リストアイテム内の画像ごとに異なるalt設定をする方法も解説します。

画像ボックス：代替テキストを設定する（alt）

画像ボックスをImgモードに設定すると、画像の縦横比を保持したまま柔軟にサイズ調整ができますが、高さと幅をどちらもpxなどの固定値で指定すると縦横比が崩れる原因になります。

画像ボックス：Imgモードで縦横比率が崩れる場合

Studioでは、高品質な無料の写真リソースサイト「Unsplash」と、AI生成による高解像度・高品質な写真素材を提供するサービス「Studio .Stock」の素材を利用できます。デザインエディタ上で画像が検索をし、選んだ画像をページにすぐに配置できます。

画像ボックス：フリー画像を利用する

Studioで画像の縦横比を固定したい場合は、画像ボックスの右上にあるスイッチをImgに切り替えます。Imgモードでは画像素材の縦横比率を保持したまま表示できます。

画像ボックス：画像の比率を固定する

画像の位置を調整し、擬似的なトリミング効果を得る方法を説明します。

画像ボックス：擬似的にトリミングする（ボックス内の配置調整）

背景画像を固定することで、スクロールしても背景画像が動かないレイアウトを作成できます。背景画像を固定する具体的な手順を説明します。

画像ボックス：背景画像を固定表示する

動画ボックスは、mp4やwebm形式の動画をページ上に直接配置できる機能です。画像やテキストと同様に自由なレイアウトが可能で、サイトに動画ならではの動きやインパクトを加えたい場面で活用できます。

動画ボックス

画像ボックスと動画ボックス

文字コンテンツをWebページに表示する場合に使用する、テキストボックスの追加方法や編集方法をご紹介します。

テキストボックス

リッチテキストボックスを使用すると、テキストの一部にだけスタイルを適用したり、マークダウン記法で入力できます。この記事では、長文コンテンツやStudio CMSの本文表示での活用方法と、テキストグラデーションを使う際の注意点を説明します。

リッチテキストボックス

テキストのサイズ、太さ、行高、配置などを編集する手順を紹介します。右パネル内のテキストタブで各種操作を行います。

テキストの配置やデザインを編集する

テキストの文字組み（横書き・縦書き）を変更する方法について解説します。具体的なオプションの違いや、機能の条件についても説明します。

テキストの文字組み（横書き・縦書き）を変更する

リッチテキストボックスを使って、一部の文字の色や背景色を変更する方法を紹介します。

文字の色や背景色を部分的に変更する

Studioのリッチテキストで使用できる箇条書き機能では、「1.」や「・」形式にのみ対応しています。番号のカスタマイズや階層化を行いたい場合は、テキストで対応してください。

リッチテキストの箇条書きをカスタマイズ・階層化したい

テキストボックスにCMSプロパティや、リスト・コンポーネントなどのプロパティを紐づけた際に、文字列フィルターを設定して表示内容をカスタマイズできます。

プロパティに文字列フィルターを設定する

テキストボックス・リッチテキストボックス

Studioでは、Font AwesomeとMaterial Symbolsの2種類のアイコンを使用できます。Material Symbolsは線の太さやスタイル、塗りを調整でき、デザインに合わせやすいのが特徴です。

アイコンボックス

2023年11月2日以前に配置していたアイコンは一度変更すると、再度利用できなくなる可能性があります。

Font Awesome アイコンのバージョンアップデートについて

StudioのEmbed（埋め込み）ボックスでは、HTML・CSS・JavaScriptコードや各種外部サービスをページに埋め込みができます。この記事では、ボックスの追加方法、コードタイプの違い、編集画面の操作、注意点や外観設定について説明します。

Embed（埋め込み）ボックス

Instagram埋め込みボックスを使って、フィードの個別投稿をWebサイトに埋め込む方法を解説します。

Instagramの投稿を埋め込む

X（Twitter）の埋め込みボックスを使って、特定の投稿をWebサイトに埋め込む方法を解説します。

X（Twitter）の個別投稿を埋め込む

埋め込み用のボックスを使って、YouTube動画をサイト上に埋め込み表示する方法をご紹介します。自動再生やループ再生のカスタマイズも可能です。

YouTube動画を埋め込む

TikTok動画やフィードは、埋め込みボックスを活用してサイトに埋め込むことができます。

TikTok動画を埋め込む

Facebookのいいね！ボタンや投稿などの任意コンテンツをページへ埋め込む手順をご紹介します。

Facebookを埋め込む

Embedボックスを利用して、GoogleカレンダーをWebページに埋め込む方法をご紹介します。Googleカレンダーをサイトに埋め込むと、スケジュールをサイト訪問者に共有できます。

Googleカレンダーを埋め込む

Embedボックスを利用して、GoogleフォームをWebページに埋め込む方法をご紹介します。Studioのフォーム機能にはない、選択式の項目など高度な機能を使用したい場合などに活用できます。

Googleフォームを埋め込む

StudioサイトにGoogle Mapsを埋め込む方法と、設置したGoogle Mapsの位置情報を変更する方法を解説します。

Google Mapsを埋め込む

Studioサイトで、LINEの友だち登録画面に遷移するボタンを作成することが可能です。

LINEの友だち登録ボタンを作りたい

Vimeoに公開した動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。自動＆ループ再生させる方法も紹介します。

Vimeoの動画を埋め込む

Embed ボックスを利用すると、簡単に外部サービスを iframe で埋め込み可能です。

iframeを埋め込む

Lottie 埋め込みボックスを活用すると、LottieをStudioサイトへ埋め込むことができます。埋め込んだLottieの再生条件は、スクロール連動など6つの再生条件から選ぶことができ、カスタマイズも可能です。

Lottieを埋め込む

フォーム作成から顧客管理までワンストップで行えるサービス「formrun」で作成したフォームをStudioサイトに埋め込む方法を説明します。

formrunを埋め込む

縦型動画のFirework動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。

Fireworkを埋め込む

HubSpot Form を Studioサイトに埋め込む方法を説明します。

HubSpot Formを埋め込む

Studioでは、Embedボックスやカスタムコード機能を使ってHTMLやスクリプトを追加できます。一方で、ページのHTMLを直接編集したり、コードを出力することはできません。

Studioで HTMLの編集・追加・出力をしたい

YouTubeやVimeoの動画をWebページに埋め込んで、背景やメインビジュアルとして設定する方法をご紹介します。

埋め込み動画を背景に設定する

noteなどの外部サービスのRSS記事リストをStudioで作成したサイト上に自動表示することができます。 この記事では、RSS URLの追加、リストの配置、データの紐付けと更新方法について説明します。

RSS連携（RSSリスト）

StudioのRSS連携機能を使用し、noteの最新記事をサイトに表示する手順を解説します。

RSS連携でnoteの最新記事をリスト表示する

ページに配置したRSSフィードの表示がエディタやライブプレビューで更新されない理由と、手動更新の方法を解説します。

RSSの表示がエディタやライブプレビューで更新されない場合

埋め込みボックスを、縦横比を保ったまま表示させるレスポンシブ設定の方法を紹介します。この記事では例として、YouTube動画を埋め込んだEmbedボックスを、16:9の縦横比に維持するレスポンシブ設定を紹介します。

Embedボックスの縦横比を固定するレスポンシブ設定

Embedボックス・RSSボックス（埋め込みボックス）

リストは、同じレイアウトのボックスをまとめて管理できる機能です。Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストに変換されます。基本構造や作成・解除の方法、リストアイテムのデザイン編集、通常のリストと動的リストの違いについても解説します。

リストの表示条件設定

デフォルトのリストは静的リストとして機能し、接続するデータはデザインエディタ内の「プロパティ管理表」で作成・管理します。プロパティの種類とプロパティ管理表の基本的な使い方を紹介します。

リスト：リストプロパティ

動的リストは、Studio CMSやAPI・RSSで取得した外部データをデザインエディタに連携し、一覧コンテンツを自動で反映するための機能です。データの連携方法や概要について解説します。

動的リスト

カルーセルは、複数のコンテンツをスライド形式で順番に表示できる機能です。カルーセルの概要・基本構造・自動再生・表示件数と並び順について説明します。

カルーセル

デザインエディタ内のリストプロパティを連携したカルーセルは、静的なカルーセルとして機能します。プロパティの編集・追加、並び順・自動再生の設定方法など、基本的な使い方を紹介します。

リストプロパティを紐付けたカルーセル

リスト／カルーセルは、連携するデータソースによって編集方法が異なります。「静的なリスト／カルーセル」と「動的なリスト／カルーセル」の種類を確認する方法について解説します。

リスト／カルーセルの種類を見分ける方法

通常のリスト／カルーセル内のボックス要素にデザインエディタ内で作成・管理するプロパティを紐付ける手順を解説します。動的リスト／カルーセルへの紐付けは別記事にて解説します。

リスト／カルーセル内のボックスにプロパティを紐付ける

リストで、各アイテムごとに異なる画像を設定する方法を説明します。リスト内の画像が同じすべてになってしまう場合の注意も紹介します。

リスト：アイテムごとに異なる画像を設定する

リストで、各アイテムごとに異なるテキストを設定する方法を説明します。リスト内のテキストが同じすべてになってしまう場合の注意も紹介します。

リスト：アイテムごとに異なるテキストを設定する

静的リストで、各アイテムごとに異なるリンクを設定する方法を説明します。リスト内のリンクが同じすべてになってしまう場合の注意も紹介します。

リスト：アイテムごとに異なるリンクを設定する

ブール値プロパティを活用すると、リスト内のアイテムごとに要素の表示・非表示を個別に設定できます。本記事では、その設定手順を説明します。

リスト：アイテムごとにボックスを表示／非表示にする

カラープロパティを使って、リスト内のアイテムごとにボックスの色を個別管理する方法を説明します。カテゴリーごとに色を分けたい場合などに活用できます。

リスト：アイテムごとに色を変える

Studioエディタでリストアイテムの縦並びや横並びを変更する方法を解説します。

リスト内アイテムを縦並び / 横並びにしたい

Studioでは、カルーセルに自動再生を設定できます。自動再生の設定方法について説明します。

カルーセルを自動再生する

現在、カルーセルの自動再生では無限ループ再生に対応していません。
無限に動く表現を行いたい場合は、LoopBox機能 を使ってマーキー（連続スクロール）アニメーションを設定することで実現できます。

カルーセルの自動再生機能で、無限ループ再生をしたい

リスト・カルーセル

クリックやホバーで開閉するトグルボックスについて説明します。トグルボックスの構成、追加方法、設定方法や開く方向、アニメーションについて解説します。

トグルボックス（Toggle）

LoopBoxは、子要素を自動的に無限ループスクロールさせるボックス要素です。バナーやロゴマーキー、スクロールテキストなどの動きのあるコンテンツを作成できます。

LoopBox：無限ループ（マーキー）表現を設定する

インタラクション

Create a custom design with text, images, and links

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

公式サイト

公式ブログ

事例集

セミナー動画

YouTube

コミュニティで知見を深める

別のステータスを選択してみてください。

チケットまたは会話が見つかりませんでした

別の作成期間を選択してみてください。

別のクリエイターを選択してみてください。

メッセンジャーを介して開始したチケットと会話はこちらに表示されます。

作成されたチケットや会話はありません

別のキーワードを使用するか、入力ミスがないか確認してみてください。

別の更新期間を選択してみてください。

別のキーワードやフィルタを使用してみてください。

Intercom のサポートやコミュニティのエキスパートに質問し、答えてもらいましょう。

メッセンジャーを介して開始した会話はこちらに表示されます。

作成されている会話はありません

会話が見つかりません

AIタイトル

タイトル

このサイトでは、当社および当社の第三者ベンダーが、当社のクッキーポリシーに記載された目的のために、お客様とサイトでのやりとり（閲覧したコンテンツ、カーソルの動き、画面の記録、チャット内容を含む）に関する個人情報を監視および記録するために、クッキーやその他の技術を使用しています。当サイトを引き続きご利用いただくことで、{websiteTermsLink}、{privacyPolicyLink}および{cookiePolicyLink}に同意したことになります。

このサイトでは、サイトの運営に必要不可欠なCookieおよび類似のテクノロジー（以下「Cookie」）を使用します。また、当社とパートナーは、サイトのパフォーマンス分析、機能、広告、ソーシャルメディア機能を有効にするために、追加のクッキーを設定したいと考えています。詳細については、{cookiePolicyLink}をご覧ください。クッキーの設定は、[クッキー設定] で変更することができます。

当社では、ウェブサイトの機能維持、分析、そして広告表示のためにクッキーを使用しています。オプションで必要に応じて希望するクッキーを有効または無効にできます。詳細については、{cookiePolicyLink}をご覧ください。

広告クッキーは、さまざまなブラウザやデバイスで利用されているサイト、コミュニケーション、その他のオンラインサービスの利用状況に関する情報を長期にわたって収集するために、広告パートナーによって設定されます。ここでの情報を使用して、利用者が興味を持つと思われるオンライン広告を表示し、広告のパフォーマンスを測定します。ソーシャルメディアクッキーは、ソーシャルメディアプラットフォームでコンテンツを共有するために当該のソーシャルメディアプラットフォームによって設定されます。また、他のオンラインサービスでの活動情報を追跡し、プライバシーポリシーに記載されている目的で使用することができます。

これらのクッキーにより、ウェブサイトは強化された機能とパーソナライズを提供できるようになります。当社または当社のページにサービスを追加したサードパーティプロバイダーによって設定される場合があり、許可しない場合、これらのサービスの一部またはすべてが正常に機能しない可能性があります。

ウェブサイトが機能するために不可欠なクッキーであり、当社のシステムで無効にすることはできません。

これらのクッキーを使用することで、訪問数やトラフィックソースをカウントし、サイトのパフォーマンスを測定および改善できます。これにより、どのページが最も人気があり、どのページが最も人気がないかを把握し、訪問者がサイト内をどのように移動しているかを確認できます。

お客様には、個人情報の販売をオプトアウトする権利があります。お客様のデータの使用方法について詳しくは、{cookiePolicyLink}をご覧ください。

お客様のプライバシーに関する選択

当社では、お客様の体験を向上させるためにクッキーを使用しています。クッキーの設定は以下でカスタマイズすることができます。詳細については、{cookiePolicyLink}をご覧ください。

クッキー設定

ヘルプセンターは空です

エラーが発生しました。そのページは存在しません。

ホーム

検索結果

がっかり

無表情

笑顔

考えています...

ソースを検索しています...

分析しています...

メッセンジャー経由で送信されたチケット、または会話内でサポートエージェントによって送信されたチケットがここに表示されます。

お客様が作成したチケットはありません

チケットが見つかりませんでした

{topic}の会話とチケット

{topic} // {subtopic}の会話とチケット

貴社の件数、作成者数、およびトピック数。

インサイト

トップクリエイター

AIトピックス

御社に関連するすべてのチケットと会話の進捗状況を追跡

カスタマーポータル。

御社に関連するすべてのチケットの進捗状況を追跡

チケットポータル。

{assigneeName}さんがこちらに対応中です！

{assigneeName}さんがチケットを完了しました

{assigneeName}さんが近日中に対応する予定です

{assigneeName}さんが詳細情報を必要としています

あなたのチケットは完了しました

チケット

チケットポータルへのアクセス権限がありません

検索

検索をスキップしてください。あなたが何をしようとしているのかを説明し、根拠に基づいた回答を得てください。

このトピックに関する記事やガイドをご覧ください。

ワークスペースを作成し、一緒に働く人たちを招待しましょう。

アカウントを設定してください

最初のワークフローを作成し、それが最初から最後まで実行される様子を見てみましょう。

発送する

チームがすでに使用しているツールと連携して、データを取り込みましょう。

スタックを接続してください

製品内の各機能がどこにあるかをすばやく把握できるツアーです。

60秒で{appName}

このプロトタイプデモは、あなたが「 {title} 」を読んでいることを認識しています。現在の記事に戻ることはできますが、本番環境向けの記事対応 Fin 契約の実装は、まだ今後の課題となっています。

記事対応プロトタイプ版回答

すでに招待についてお尋ねいただいているため、このプロトタイプデモには次の機能を追加できます：各招待を送信する前に役割セレクターを使用して、チームメイトの担当業務に応じてアクセスを制限してください。

プロトタイプの役割制限に関するフォローアップ

このプロトタイプデモでは、まずワークスペースのプロフィールから始め、アクセスが必要なチームメンバーを招待し、その後使用している統合を接続することをお勧めします。

プロトタイプの利用開始に関する回答

このプロトタイプデモでは、統合はワークスペース設定から構成します。統合を選択し、アカウントを接続して、有効になっている権限を確認します。

統合機能プロトタイプ版回答

このプロトタイプデモでは、ワークスペースの設定からチームメイトを招待し、招待を送信する前に、各チームメイトに必要なアクセス権を選択してください。

チーム招待プロトタイプ版回答

このプロトタイプデモには、その質問に対するスクリプト化された回答はまだ含まれていません。チームの招待方法やソース記事の開き方について試しに尋ねてみてください。本番環境の Fin API は呼び出されませんでした。

プロトタイプ版の回答は利用できません

このページを開いています。これについて何でも聞いてください。ドキュメントをもとにお答えします。