Studio

画像の配置や重ね順を調整することで、スクロールしても背景画像が固定されたレイアウトを作成することができます。 

画面左側の[追加パネル]を開きます。

[Image]ボックスをドラッグ&amp;ドロップでページに配置します。

1. 画面左側の[追加パネル]を開きます。
2. [Image]ボックスをドラッグ&amp;ドロップでページに配置します。

画像ボックスを選択し、右パネルを開きます。右パネルが閉じている場合は<a href="https://help.studio.design/ja/articles/12889360-%E5%8F%B3%E3%83%91%E3%83%8D%E3%83%AB">開いて</a>ください。

右パネルの[ボックス]タブで、Imageボックスのサイズを以下に指定します。 幅：100%、縦幅：100vh

画面左上の[配置]にカーソルを当て、[<a href="https://help.studio.design/ja/articles/4062242-%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E9%85%8D%E7%BD%AE-%E7%9B%B8%E5%AF%BE%E4%BD%8D%E7%BD%AE-%E5%9B%BA%E5%AE%9A%E4%BD%8D%E7%BD%AE-%E7%B5%B6%E5%AF%BE%E4%BD%8D%E7%BD%AE-%E8%BF%BD%E5%BE%93%E4%BD%8D%E7%BD%AE">固定</a>]を選択します。

[重ね順]を「-1」以下に設定します。これにより、背景画像が他の要素の背後に配置されます。

背景画像の上に他の要素を追加して、通常どおりレイアウトします。

1. 画像ボックスを選択し、右パネルを開きます。右パネルが閉じている場合は<a href="https://help.studio.design/ja/articles/12889360-%E5%8F%B3%E3%83%91%E3%83%8D%E3%83%AB">開いて</a>ください。
2. 右パネルの[ボックス]タブで、Imageボックスのサイズを以下に指定します。 幅：100%、縦幅：100vh
3. 画面左上の[配置]にカーソルを当て、[<a href="https://help.studio.design/ja/articles/4062242-%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E9%85%8D%E7%BD%AE-%E7%9B%B8%E5%AF%BE%E4%BD%8D%E7%BD%AE-%E5%9B%BA%E5%AE%9A%E4%BD%8D%E7%BD%AE-%E7%B5%B6%E5%AF%BE%E4%BD%8D%E7%BD%AE-%E8%BF%BD%E5%BE%93%E4%BD%8D%E7%BD%AE">固定</a>]を選択します。
4. [重ね順]を「-1」以下に設定します。これにより、背景画像が他の要素の背後に配置されます。
5. 背景画像の上に他の要素を追加して、通常どおりレイアウトします。

Tips：配置の[固定]が選択できない場合

[固定]を選択するには、その要素を &lt;div&gt; Base レイヤーの直下階層に配置する必要があります。

[レイヤーパネル]を開き、要素の位置を確認してください。直下にない場合は、レイヤーをドラッグ&amp;ドロップして移動させてください。

<a href="https://help.studio.design/ja/articles/2639164-%E3%83%A9%E3%82%A4%E3%83%96%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">ライブプレビュー</a>でページをスクロールし、背景画像が固定されていることを確認します。

問題がなければ、[公開]ボタンをクリックしてサイトを<a href="https://help.studio.design/ja/articles/2642690-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%85%AC%E9%96%8B%E6%96%B9%E6%B3%95">公開</a>・<a href="https://help.studio.design/ja/articles/10469156-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E6%9B%B4%E6%96%B0%E6%96%B9%E6%B3%95">更新</a>します。 これで、スクロールしても動かない固定背景画像の作成は完了です。

1. <a href="https://help.studio.design/ja/articles/2639164-%E3%83%A9%E3%82%A4%E3%83%96%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">ライブプレビュー</a>でページをスクロールし、背景画像が固定されていることを確認します。
2. 問題がなければ、[公開]ボタンをクリックしてサイトを<a href="https://help.studio.design/ja/articles/2642690-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%85%AC%E9%96%8B%E6%96%B9%E6%B3%95">公開</a>・<a href="https://help.studio.design/ja/articles/10469156-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E6%9B%B4%E6%96%B0%E6%96%B9%E6%B3%95">更新</a>します。 これで、スクロールしても動かない固定背景画像の作成は完了です。

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

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

Create a custom design with text, images, and links

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

公式サイト

公式ブログ

事例集

セミナー動画

YouTube

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

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

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

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

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

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

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

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

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

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

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

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

クッキー設定

ヘルプセンターは空です

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

ホーム

検索

がっかり

無表情

笑顔

考えています...

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

分析しています...

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

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

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

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

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

タイトル

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

チケットポータル。

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

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

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

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

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

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

設定手順

Step. 1 背景画像の配置

Step. 2 背景画像の設定

Step. 3 動作確認