# Studio Help > Studio公式ガイド ## English ### About Studio - [1. Studio.Design Accounts and Projects](https://help.studio.design/en/articles/9972325-1-studio-design-accounts-and-projects.md): Learn how to create an account and a project — the essentials you need to start building a website with Studio.Design. - [2. How to Use the Dashboard](https://help.studio.design/en/articles/9972349-2-how-to-use-the-dashboard.md): Learn about the dashboard, where you can view and manage information for each project. Check billing, plans, storage, and analytics, and manage your CMS and forms. - [3. Layout Basics in Studio \(Box Layout\)](https://help.studio.design/en/articles/5542617-3-layout-basics-in-studio-box-layout.md): In Studio.Design, web page layouts are built using a method called "Box Layout." This article explains the key features of Box Layout and walks you through how it works on screen. - [4. How to Use Studio CMS](https://help.studio.design/en/articles/4175003-4-how-to-use-studio-cms.md): An overview of the CMS feature in Studio.Design. It's ideal for content that shares the same design but needs regular additions and updates — like news, blogs, columns, and case studies. - [5. How Search Engines Work and SEO Best Practices](https://help.studio.design/en/articles/12697851-5-how-search-engines-work-and-seo-best-practices.md): Learn about the steps involved before your published site appears in search results, and discover SEO best practices to help your site rank higher. - [6. Choose a domain and publish your site](https://help.studio.design/en/articles/9973234-6-choose-a-domain-and-publish-your-site.md): Once your website is ready, it's time to choose a domain and publish it. This article explains the types of domains available in Studio.Design and walks you through the publishing process. ### Project Management - [What is a Studio.Design project?](https://help.studio.design/en/articles/15840870-what-is-a-studio-design-project.md): In Studio.Design, you create projects to build, publish, and manage your websites. This article covers how projects work, how they connect to your account and plan, how to use the dashboard, and ho... - [Creating and Managing Projects](https://help.studio.design/en/articles/2639138-creating-and-managing-projects.md): Learn how to create, duplicate, reset, and archive projects in Studio, as well as how to configure project settings. - [Configure project settings](https://help.studio.design/en/articles/13626851-configure-project-settings.md): Learn about the general project settings, including the project name, cover image, and more. - [Upload .txt files](https://help.studio.design/en/articles/13627103-upload-txt-files.md): Learn how to upload and manage .txt files in your project. Use them to provide policies, contact information, and other details for search engines and LLM agents. - [Reset Project](https://help.studio.design/en/articles/7180957-reset-project.md): Reset a project to its initial state - [Set a cover image on the project list screen](https://help.studio.design/en/articles/1949519-set-a-cover-image-on-the-project-list-screen.md): Learn how to change the cover image that appears on your Studio.Design project list, including the recommended image size and step-by-step instructions. - [Webhook](https://help.studio.design/en/articles/9115699-webhook.md) - [What happens when I archive a project? Can I delete it?](https://help.studio.design/en/articles/2248968-what-happens-when-i-archive-a-project-can-i-delete-it.md): It's not possible to delete a project. - [What happens when you duplicate a legacy plan project after the new plans are introduced?](https://help.studio.design/en/articles/10207848-what-happens-when-you-duplicate-a-legacy-plan-project-after-the-new-plans-are-introduced.md): Projects duplicated after December 1, 2024, will be created as new Free plan projects. ### Editor - [Figma to Studio](https://help.studio.design/en/articles/8277073-figma-to-studio.md): Use the plugin to import your Figma designs into Studio.Design. - [Can't select a box in the editor](https://help.studio.design/en/articles/4185027-can-t-select-a-box-in-the-editor.md): Here's how to fix it when you can't select a box in the Studio.Design editor. Learn how to select and edit boxes inside components or lists using direct selection and the Layers panel. - [Can't open the left panel, or the right panel shows limited settings](https://help.studio.design/en/articles/6717538-can-t-open-the-left-panel-or-the-right-panel-shows-limited-settings.md): If you can't select the Add or Layers panel, it's usually because Content Editing Mode is turned on. Click the pencil icon in the bottom-left corner of the editor to switch modes and fix the issue. - [What to do when you see "Your design data is getting large"](https://help.studio.design/en/articles/6969479-what-to-do-when-you-see-your-design-data-is-getting-large.md): Learn what design data capacity means and what to do when you're approaching the limit. - [Box nesting depth limit](https://help.studio.design/en/articles/2680848-box-nesting-depth-limit.md): When building complex designs with nested boxes in Studio.Design, we recommend keeping the structure within 11 levels to avoid unintended data issues. This article also explains how to resolve erro... - [Fixed header overlapping with your design](https://help.studio.design/en/articles/6211334-fixed-header-overlapping-with-your-design.md): Learn why a fixed-position header may overlap with headings or images on your page, and how to fix it by adding spacing equal to the header's height. - [What to do when there's extra space around an embedded background video](https://help.studio.design/en/articles/5735974-what-to-do-when-there-s-extra-space-around-an-embedded-background-video.md): You can adjust the spacing by resizing the Embed box. Keep in mind that some extra space may still appear on screens wider than a certain size, even after adjusting. - [What to do if copy and paste isn't working](https://help.studio.design/en/articles/4334472-what-to-do-if-copy-and-paste-isn-t-working.md): There can be several reasons why copy and paste or keyboard shortcuts aren't working in Studio.Design. This article walks you through three ways to narrow down the cause. - [What to do when a blue overlay appears on an image and you can't add text on top](https://help.studio.design/en/articles/4060898-what-to-do-when-a-blue-overlay-appears-on-an-image-and-you-can-t-add-text-on-top.md): Make sure the image is set to Box mode and that its size is larger than its child elements. - [Fixing a Toggle box menu that shifts up or down when opening](https://help.studio.design/en/articles/8855480-fixing-a-toggle-box-menu-that-shifts-up-or-down-when-opening.md): Learn how to fix a dropdown menu built with Studio.Design's Toggle box when it shifts position as it expands. - [Changing an image, text, or link in one box updates other boxes too](https://help.studio.design/en/articles/5182035-changing-an-image-text-or-link-in-one-box-updates-other-boxes-too.md): If editing the image, text, or link in one box also changes the content in other boxes, it's because those boxes are part of a list. This article explains how to identify the cause and how to set u... ### Box Data Settings \(ID, Tags, Link Configuration\) - [Setting an ID for a box（Anchor link）](https://help.studio.design/en/articles/4064980-setting-an-id-for-a-box-anchor-link.md): When you set an ID for a box, you can use that box as the destination for an anchor link. - [HTML Tag Types and How to Set Them](https://help.studio.design/en/articles/4064982-html-tag-types-and-how-to-set-them.md): Learn about the different HTML tags you can apply to boxes in Studio.Design, along with step-by-step instructions for setting them up. - [HTML heading tags \ – \](https://help.studio.design/en/articles/6400176-html-heading-tags-h1-h6.md): In Studio.Design, you can set HTML heading tags from \ to \. Using heading tags helps you build well-structured pages that are optimized for SEO. - [Common Structured Data Errors and How to Fix Them](https://help.studio.design/en/articles/9556108-common-structured-data-errors-and-how-to-fix-them.md): Learn how to test your structured data, along with common error causes and solutions. ### Various Boxes - [Image Box](https://help.studio.design/en/articles/4064885-image-box.md): The image box is a box element used to add images to your page. Studio.Design supports images uploaded to Studio.Design, free images from Unsplash, and URLs of images hosted on external servers. - [Image Box: Box mode vs. Img mode](https://help.studio.design/en/articles/4064875-image-box-box-mode-vs-img-mode.md): Learn the differences between Box mode and Img mode in Studio.Design's image box. We'll cover what each mode does, when to use them, and what to watch out for when switching between them. - [Image Box: Apply Background Effects to Images](https://help.studio.design/en/articles/1997379-image-box-apply-background-effects-to-images.md): Learn how to edit images directly in the Studio.Design editor. This guide covers filters like brightness, contrast, and monochrome, as well as how to adjust background image size, repeat, and posit... - [Image Box: Setting Alt Text](https://help.studio.design/en/articles/3315577-image-box-setting-alt-text.md): Learn how to add alt text to image boxes in img mode. Setting alt text is important for SEO. We'll also show you how to set different alt text for each image within a list item. - [Image Box: Fixing aspect ratio issues in Img mode](https://help.studio.design/en/articles/9267520-image-box-fixing-aspect-ratio-issues-in-img-mode.md): In Img mode, image boxes adjust flexibly while keeping their aspect ratio. However, setting both height and width to fixed values like px can cause the aspect ratio to break. - [Image Box: Using Free Images](https://help.studio.design/en/articles/1997496-image-box-using-free-images.md): In Studio.Design, you can use free, high-quality photos from Unsplash and AI-generated, high-resolution images from Studio.Stock. Search for images right in the design editor and add your selection... - [Image Box: Lock the image aspect ratio](https://help.studio.design/en/articles/2638959-image-box-lock-the-image-aspect-ratio.md): To keep an image's aspect ratio in Studio.Design, switch the toggle in the top-right of the image box to Img. In Img mode, your image displays while preserving its original aspect ratio. - [Image Box: Crop Images Visually by Adjusting Placement](https://help.studio.design/en/articles/3655938-image-box-crop-images-visually-by-adjusting-placement.md): Learn how to adjust an image's position within its box to create a visual cropping effect. - [Image Box: Fix Background Image in Place](https://help.studio.design/en/articles/3022096-image-box-fix-background-image-in-place.md): Fix a background image so it stays in place while users scroll. This article walks you through the steps to set up a fixed background image. - [Video Box](https://help.studio.design/en/articles/11461485-video-box.md): The Video Box lets you place MP4 or WebM videos directly on your page. Like images and text, you can lay them out freely—perfect for adding motion and visual impact that only video can bring to you... - [Text Box](https://help.studio.design/en/articles/4064889-text-box.md): Learn how to add and edit text boxes to display written content on your web page. - [Rich Text Box](https://help.studio.design/en/articles/4064911-rich-text-box.md): With the rich text box, you can apply styles to just part of your text or write using Markdown. This article covers how to use it for long-form content and Studio CMS body text, plus tips for worki... - [Edit text alignment and design](https://help.studio.design/en/articles/4064906-edit-text-alignment-and-design.md): Learn how to adjust text size, weight, line height, alignment, and more. You can make these changes from the Text tab in the right panel. - [Change Text Orientation \(Horizontal or Vertical\)](https://help.studio.design/en/articles/2925387-change-text-orientation-horizontal-or-vertical.md): Learn how to change text orientation between horizontal and vertical in Studio.Design. This article explains the differences between each option and the conditions for using this feature. - [Change Text Color or Background Color for Part of Your Text](https://help.studio.design/en/articles/3007552-change-text-color-or-background-color-for-part-of-your-text.md): Learn how to use the rich text box to change the color or background color of specific parts of your text in Studio.Design. - [Customizing or nesting bulleted lists in Rich Text](https://help.studio.design/en/articles/9244585-customizing-or-nesting-bulleted-lists-in-rich-text.md): The bulleted list feature in Studio.Design's Rich Text only supports "1." and "•" formats. If you'd like to customize the numbering or create nested lists, please format it manually as text instead. - [Set up text filters for properties](https://help.studio.design/en/articles/6148984-set-up-text-filters-for-properties.md): When you link a CMS property or a property from a list or component to a text box, you can apply text filters to customize how the content appears. - [Icon Box](https://help.studio.design/en/articles/4064926-icon-box.md): Studio.Design supports two icon libraries: Font Awesome and Material Symbols. With Material Symbols, you can adjust line weight, style, and fill to match your design. - [About the Font Awesome Icon Version Update](https://help.studio.design/en/articles/8529288-about-the-font-awesome-icon-version-update.md): Icons placed before November 2, 2023 may become unavailable once you change them. - [Embed Box](https://help.studio.design/en/articles/4064934-embed-box.md): With the Embed box in Studio.Design, you can add HTML, CSS, and JavaScript code or embed external services on your page. This article covers how to add the box, the different code types, editing op... - [Embed an Instagram post](https://help.studio.design/en/articles/3305539-embed-an-instagram-post.md): Learn how to use the Instagram embed box to add individual posts from your feed to your website. - [Embed an Individual X \(Twitter\) Post](https://help.studio.design/en/articles/4675994-embed-an-individual-x-twitter-post.md): Learn how to embed a specific post on your website using the X \(Twitter\) embed box. - [Embed a YouTube Video](https://help.studio.design/en/articles/4064947-embed-a-youtube-video.md): Learn how to embed and display YouTube videos on your site using the embed box. You can also customize options like autoplay and loop playback. - [Embed a TikTok video](https://help.studio.design/en/articles/6851560-embed-a-tiktok-video.md): You can embed TikTok videos and feeds into your site using the embed box. - [Embed Facebook content](https://help.studio.design/en/articles/4675992-embed-facebook-content.md): Learn how to embed Facebook content like the Like button or posts into your page. - [Embed a Google Calendar](https://help.studio.design/en/articles/2753675-embed-a-google-calendar.md): Learn how to embed a Google Calendar into your web page using the Embed box. Adding a Google Calendar to your site lets you share your schedule with visitors. - [Embed a Google Form](https://help.studio.design/en/articles/2834094-embed-a-google-form.md): Learn how to embed a Google Form into your webpage using the Embed box. This is helpful when you need advanced features like multiple-choice fields that aren't available in Studio.Design's built-in... - [Embed Google Maps](https://help.studio.design/en/articles/1888376-embed-google-maps.md): Learn how to embed Google Maps into your Studio.Design site and how to update the location shown on an embedded map. - [How to create a LINE friend registration button](https://help.studio.design/en/articles/6171925-how-to-create-a-line-friend-registration-button.md): You can add a button to your Studio.Design site that takes visitors directly to the LINE friend registration screen. - [Embed a Vimeo Video](https://help.studio.design/en/articles/4064951-embed-a-vimeo-video.md): Learn how to embed videos from Vimeo into Studio.Design. Just grab the embed code and paste it in—it's that easy. We'll also show you how to enable autoplay and looping. - [Embedding an iframe](https://help.studio.design/en/articles/9202327-embedding-an-iframe.md): With the Embed box, you can easily embed external services using an iframe. - [Embedding Lottie animations](https://help.studio.design/en/articles/8637241-embedding-lottie-animations.md): Use the Lottie embed box to add Lottie animations to your Studio.Design site. Choose from 6 playback options, including scroll-triggered animations, and customize them to fit your needs. - [Embedding formrun](https://help.studio.design/en/articles/4675986-embedding-formrun.md): Learn how to embed a form created with formrun—a service for form creation and customer management—into your Studio.Design site. - [Embedding Firework videos](https://help.studio.design/en/articles/5139103-embedding-firework-videos.md): Learn how to embed Firework vertical videos into Studio.Design. Just grab the embed code and paste it in — it's that simple. - [Embed a HubSpot Form](https://help.studio.design/en/articles/5688648-embed-a-hubspot-form.md): Learn how to embed a HubSpot Form into your Studio.Design site. - [HTML in Studio.Design](https://help.studio.design/en/articles/8864939-html-in-studio-design.md): With Studio.Design, you can add HTML and scripts using the Embed box or the custom code feature. However, you can't directly edit a page's HTML or export the code. - [Set an Embedded Video as a Background](https://help.studio.design/en/articles/3063733-set-an-embedded-video-as-a-background.md): Learn how to embed YouTube or Vimeo videos on your web page and use them as a background or main visual. - [RSS Integration \(RSS Lists\)](https://help.studio.design/en/articles/3205203-rss-integration-rss-lists.md): Automatically display RSS article lists from external services like note on your Studio.Design site. This article covers how to add an RSS URL, place a list, connect data, and update content. - [Display the latest note articles in a list using RSS](https://help.studio.design/en/articles/4065011-display-the-latest-note-articles-in-a-list-using-rss.md): Learn how to use Studio.Design's RSS feature to display the latest articles from note on your site. - [What to do if RSS content doesn't update in the editor or live preview](https://help.studio.design/en/articles/4061886-what-to-do-if-rss-content-doesn-t-update-in-the-editor-or-live-preview.md): Learn why RSS feeds placed on your page may not refresh in the editor or live preview, and how to manually update them. - [Responsive settings to lock the aspect ratio of an Embed box](https://help.studio.design/en/articles/4767780-responsive-settings-to-lock-the-aspect-ratio-of-an-embed-box.md): Learn how to set up an Embed box so it keeps a fixed aspect ratio as it resizes. This article walks you through an example: keeping an embedded YouTube video at a 16:9 ratio using responsive settin... - [Lists](https://help.studio.design/en/articles/4129102-lists.md): Lists let you efficiently manage the content and design of elements that share the same layout. While the layout stays consistent, you can customize text, images, colors, and visibility for each it... - [How to tell list types apart](https://help.studio.design/en/articles/15653024-how-to-tell-list-types-apart.md): Lists come in two types: static lists \(regular lists\) and dynamic lists. The way you edit content inside each list depends on its type. To check a list's type, select the list and look at the Data ... - [Lists: Setting a Different Image for Each Item](https://help.studio.design/en/articles/14616813-lists-setting-a-different-image-for-each-item.md): Learn how to assign a unique image to each item in a static list. We'll also cover what to watch out for if all the images in your list end up looking the same. - [Lists: Setting different text for each item](https://help.studio.design/en/articles/14616877-lists-setting-different-text-for-each-item.md): Learn how to set different text for each item in a static list. We'll also cover what to watch out for when all the text in your list ends up looking the same. - [Lists: Set a Different Link for Each Item](https://help.studio.design/en/articles/9018252-lists-set-a-different-link-for-each-item.md): Learn how to set a unique link for each item in a static list. Also includes tips for when all links in your list end up pointing to the same destination. - [Lists: Show or hide the container box for each item](https://help.studio.design/en/articles/9744271-lists-show-or-hide-the-container-box-for-each-item.md): In Studio.Design lists, you can customize the design of each item individually, including colors and button visibility. This article shows how to use boolean properties to show or hide elements for... - [List: Change colors for each item](https://help.studio.design/en/articles/8849973-list-change-colors-for-each-item.md): Learn how to use the color property to manage box colors individually for each item in a list. This is useful when you want to assign different colors by category. - [Dynamic Lists](https://help.studio.design/en/articles/4055772-dynamic-lists.md): Dynamic Lists let you connect external data from Studio CMS, APIs, or RSS feeds to the design editor, automatically populating list content. Learn how data connections work and get an overview of t... - [How to arrange list items vertically or horizontally](https://help.studio.design/en/articles/9183187-how-to-arrange-list-items-vertically-or-horizontally.md): Learn how to switch list items between vertical and horizontal layouts in the Studio.Design editor. - [Carousel](https://help.studio.design/en/articles/13427668-carousel.md): A carousel lets you display multiple pieces of content as a slideshow. Studio.Design offers two types: a static list carousel and a dynamic CMS carousel powered by Studio CMS content. - [List Carousel](https://help.studio.design/en/articles/6108431-list-carousel.md): A carousel cycles through multiple items, like images or text, at set intervals. This article explains how to add and edit a list carousel using Studio.Design's list feature, set up autoplay, and h... - [Auto-play a carousel](https://help.studio.design/en/articles/6902846-auto-play-a-carousel.md): In Studio.Design, you can set carousels to play automatically. This article walks you through how to set up auto-play. ### CMS - [What is Studio CMS?](https://help.studio.design/en/articles/4055822-what-is-studio-cms.md): Studio CMS is the built-in content management feature in Studio.Design. Use it to continuously update and manage pages with a shared design, like news, blogs, or careers. Learn how the CMS dashboar... - [Studio CMS: From Creating an Article to Publishing It](https://help.studio.design/en/articles/4065370-studio-cms-from-creating-an-article-to-publishing-it.md): Learn how to create article content in Studio CMS and publish it on your site. We'll walk you through enabling CMS, creating data in the CMS dashboard, linking it in the design editor, and publishi... - [Import CMS data from WordPress to Studio.Design](https://help.studio.design/en/articles/6401262-import-cms-data-from-wordpress-to-studio-design.md): You can import posts, categories, and other content into Studio.Design's CMS by using an XML file exported from WordPress. - [CMS Dashboard](https://help.studio.design/en/articles/5726398-cms-dashboard.md): Learn how to use the CMS Dashboard in Studio.Design to create, edit, and manage your CMS content data. - [CMS Models](https://help.studio.design/en/articles/4055811-cms-models.md): CMS models are the framework for managing content \(CMS items\) in Studio CMS. Learn about model types and how to create, edit, and delete them. - [CMS Items](https://help.studio.design/en/articles/4055821-cms-items.md): CMS items are individual content entries that belong to a model. Learn how to create, edit, and delete CMS items. - [CMS properties](https://help.studio.design/en/articles/4055813-cms-properties.md): An overview of CMS properties available in Studio.Design CMS. Learn about property types, required properties, how to add, edit, and delete them, and the features of each property type. - [CMS Properties: Rich Text \(Body\)](https://help.studio.design/en/articles/14654498-cms-properties-rich-text-body.md): Learn how to edit the Rich Text \(Body\) property in CMS items using the Article type model in Studio.Design CMS. Covers formatting, adding images, videos, and PDFs, media settings, Markdown, comment... - [CMS Property: Slug](https://help.studio.design/en/articles/4217501-cms-property-slug.md): A Slug is a unique ID for each CMS item that becomes the trailing part of the page URL on your published site. - [CMS Properties: Status and Publish Date](https://help.studio.design/en/articles/6319932-cms-properties-status-and-publish-date.md): Manage the publish state and publish date of CMS items using the Status and Publish Date properties. Learn about each status type and how to schedule publishing or adjust display order. - [CMS Collections](https://help.studio.design/en/articles/4065333-cms-collections.md): CMS Collections let you hand-pick items from a specific CMS model and curate what's displayed. Use them for featured articles, recommended lists, and more. - [CMS Collaborative Editing](https://help.studio.design/en/articles/5999236-cms-collaborative-editing.md): Learn about collaborative editing and the article comment feature in Studio.Design CMS. - [RSS Feed Settings for CMS Content \(Article-Type Models\)](https://help.studio.design/en/articles/6631681-rss-feed-settings-for-cms-content-article-type-models.md): Learn how to set up RSS feeds for news, blog posts, and other articles managed and published in Studio.Design. - [Check who last updated a CMS item and when](https://help.studio.design/en/articles/10263573-check-who-last-updated-a-cms-item-and-when.md): You can see who last updated a CMS item and when on both the item detail and item list screens in the CMS dashboard — helpful for tracking edits when multiple members manage your CMS. - [CMS Lists](https://help.studio.design/en/articles/13228243-cms-lists.md): CMS Lists let you display content from your Studio CMS as a dynamic list on your site. This article covers what CMS Lists are, how to create them, how to configure their display, and tips for adjus... - [CMS Carousel](https://help.studio.design/en/articles/4129089-cms-carousel.md): Learn how to create a carousel slider that displays content from your Studio.Design CMS. This guide covers editing data, setting up autoplay, adjusting the number of items shown, and customizing th... - [Filter items in a CMS list](https://help.studio.design/en/articles/12093392-filter-items-in-a-cms-list.md): You can narrow down which items appear in a CMS list by setting filter conditions based on CMS properties or search terms. Learn which properties you can use for filtering and how to set them up. - [CMS List Filters: Fixed Filters](https://help.studio.design/en/articles/14698742-cms-list-filters-fixed-filters.md): Learn how to use fixed filters to narrow down which CMS items appear in a CMS list based on Studio.Design CMS properties. This article covers the overview, setup steps, and things to keep in mind. - [CMS List Filters: Dynamic Filter](https://help.studio.design/en/articles/13594219-cms-list-filters-dynamic-filter.md): The Dynamic Filter automatically updates the items shown based on the current page's content. Place a CMS List inside a dynamic page, then set a reference property \(single select\) that points to a ... - [CMS List Filters: URL Query Filters](https://help.studio.design/en/articles/13601425-cms-list-filters-url-query-filters.md): Add URL query filters to your site to narrow down CMS list items by criteria like category. Studio.Design links query parameters in your page URL to your CMS list filters, dynamically updating what... - [Dynamic Pages: Create a CMS article page to display Studio CMS article items](https://help.studio.design/en/articles/9506045-dynamic-pages-create-a-cms-article-page-to-display-studio-cms-article-items.md): Learn how to create a CMS article page that dynamically displays the title, body, thumbnail, and other properties from article items registered in Studio.Design CMS. - [Linking Box Elements to CMS Properties on Dynamic Pages](https://help.studio.design/en/articles/13767977-linking-box-elements-to-cms-properties-on-dynamic-pages.md): Learn how to link box elements in CMS article pages on dynamic pages to CMS properties set in your CMS dashboard. This guide covers linking properties for image boxes, text boxes, rich text boxes, ... - [Link a CMS list to your CMS article pages](https://help.studio.design/en/articles/13856944-link-a-cms-list-to-your-cms-article-pages.md): Learn how to create links from a CMS list to your CMS article pages in Studio.Design, making it easier for visitors to explore more content on your site. - [CMS items aren't showing on your published site](https://help.studio.design/en/articles/6157854-cms-items-aren-t-showing-on-your-published-site.md): If your CMS content \(articles, tags, categories, carousels, etc.\) isn't appearing on your published Studio.Design site, here's a checklist to help you troubleshoot—focusing on common causes like pu... - [Sorting and displaying Studio CMS items in a custom order](https://help.studio.design/en/articles/6721694-sorting-and-displaying-studio-cms-items-in-a-custom-order.md): You can change the display order of a CMS list using sort settings or collections. This article explains the basic sort options and alternative methods for different use cases. - [How to pin specific CMS items to the top of a CMS list](https://help.studio.design/en/articles/6227845-how-to-pin-specific-cms-items-to-the-top-of-a-cms-list.md): Studio.Design CMS doesn't have a built-in pin feature for CMS lists, but you can highlight specific items at the top of your article list by combining a dedicated CMS model or collection with a reg... - [Set a unique external link for each item in a CMS list](https://help.studio.design/en/articles/9025757-set-a-unique-external-link-for-each-item-in-a-cms-list.md): Learn how to assign a different external URL to each item in a Studio.Design CMS list. Instead of using the standard link settings, you'll use a text property to set it up. - [Studio.Design CMS articles not displaying correctly on your site](https://help.studio.design/en/articles/5670677-studio-design-cms-articles-not-displaying-correctly-on-your-site.md): Possible reasons why your Studio.Design CMS article items may not appear correctly on your published site. - [CMS item content not showing on a newly created dynamic page](https://help.studio.design/en/articles/5821090-cms-item-content-not-showing-on-a-newly-created-dynamic-page.md): If the body content of your CMS article isn't appearing on a new dynamic page, check whether a rich text box linked to the article body property has been added to the page. It isn't included by def... - [How to set up redirects for CMS articles](https://help.studio.design/en/articles/9309873-how-to-set-up-redirects-for-cms-articles.md): Currently, Studio.Design doesn't support redirecting to dynamic pages like CMS articles when using the redirect page feature. - [CMS list items all show the same image, text, or link after editing](https://help.studio.design/en/articles/5054353-cms-list-items-all-show-the-same-image-text-or-link-after-editing.md): Learn why every item in a CMS list ends up showing the same image, text, or link, and how to fix the property bindings in Studio.Design. - [How to change colors, sizes, spacing, and fonts in Studio.Design CMS rich text properties \(body\)](https://help.studio.design/en/articles/15501217-how-to-change-colors-sizes-spacing-and-fonts-in-studio-design-cms-rich-text-properties-body.md): To style text in your CMS article body \(rich text property\)—including color, size, spacing, and font—use the Design Editor, not the CMS Dashboard. Here's how to tell the two apart and adjust your s... ### Form - [Form submission issues: "Form submission failed" error when clicking submit](https://help.studio.design/en/articles/10911810-form-submission-issues-form-submission-failed-error-when-clicking-submit.md): When you see an error after submitting a Studio.Design form, the main causes are usually issues with your Google reCAPTCHA v3 setup or your Google Sheets integration. - [Form submission issue: Submit button doesn't work](https://help.studio.design/en/articles/13002188-form-submission-issue-submit-button-doesn-t-work.md): If clicking the Submit button doesn't send your form, a required field may be hidden. Since required fields can't be left blank, the form won't submit until they're filled in. - [Form Notification Issues: When Submitted Responses Don't Reach Your Dashboard or Email](https://help.studio.design/en/articles/4507321-form-notification-issues-when-submitted-responses-don-t-reach-your-dashboard-or-email.md): If form respondents click the submit button but their responses don't reach the site admin, this article explains the causes and solutions. The main cause is setting a link directly on the submit b... - [Form notification issue: Admin not receiving email notifications for submitted responses](https://help.studio.design/en/articles/5060470-form-notification-issue-admin-not-receiving-email-notifications-for-submitted-responses.md): If you're not receiving notification emails from Studio.Design forms, here are the common causes to check and how to fix them. ### Hosting - [SEO Optimization](https://help.studio.design/en/articles/2639106-seo-optimization.md): Organize SEO-related settings in Studio.Design — including titles, descriptions, OGP images, favicons, HTML, alt attributes, sitemaps, and 404 pages — to clearly communicate your content to search ... - [H tags aren't detected when running an SEO check on my Studio.Design site](https://help.studio.design/en/articles/9240731-h-tags-aren-t-detected-when-running-an-seo-check-on-my-studio-design-site.md): When you check your Studio.Design site with an SEO tool, H tags may not be detected. This happens on the old infrastructure \(SPA\) and doesn't affect Google search. ### 公開基盤・パフォーマンス - [How to migrate your website to Studio.Design with zero downtime](https://help.studio.design/en/articles/6459180-how-to-migrate-your-website-to-studio-design-with-zero-downtime.md): Learn how downtime can occur during a website migration, how to check for it, and what to do if the switchover takes longer than expected. - [Concurrent visitor limits for sites published with Studio.Design and how to handle them](https://help.studio.design/en/articles/3559957-concurrent-visitor-limits-for-sites-published-with-studio-design-and-how-to-handle-them.md): Learn about the concurrent visitor limits for sites published with Studio.Design and what you can do to manage them. - [Tips to improve the loading speed of your published Studio.Design site](https://help.studio.design/en/articles/4062009-tips-to-improve-the-loading-speed-of-your-published-studio-design-site.md): Learn how to improve the loading speed of sites built with Studio.Design. This guide covers easy wins like reducing box count, optimizing images, and adjusting font settings. - [What Should I Do If There Is a Sudden Increase in PVs Due to Unauthorized Access?](https://help.studio.design/en/articles/9007346-what-should-i-do-if-there-is-a-sudden-increase-in-pvs-due-to-unauthorized-access.md): Learn how to manage a suspected increase in PVs due to unauthorized access to your Studio site. - [Checklist for Improving Your Published Site's Performance](https://help.studio.design/en/articles/13526287-checklist-for-improving-your-published-site-s-performance.md): Key checkpoints for using Lighthouse and PageSpeed Insights scores during design, review, QA, and pre-delivery checks. Use this guide to maximize your published site's performance and user experience. ### Domains & DNS - [Publish your site with a custom domain](https://help.studio.design/en/articles/4358865-publish-your-site-with-a-custom-domain.md): Learn how to publish your website using a custom domain you've purchased from an external service, along with key things to check before getting started. - [Publish your site on a Studio.Design subdomain](https://help.studio.design/en/articles/10327010-publish-your-site-on-a-studio-design-subdomain.md): Learn how to publish your website using a Studio.Design subdomain, along with important things to check before you get started. - [How to disconnect a Studio.Design subdomain](https://help.studio.design/en/articles/10327081-how-to-disconnect-a-studio-design-subdomain.md): Learn how to disconnect your site from its Studio.Design subdomain when it's published using one. - [Accessing your original Studio.Design subdomain after switching to a custom domain](https://help.studio.design/en/articles/9239809-accessing-your-original-studio-design-subdomain-after-switching-to-a-custom-domain.md): After you switch your published site from a Studio.Design subdomain to a custom domain, visitors who go to the original subdomain are automatically redirected to your new custom domain. - [Move your website to Studio.Design with your existing custom domain](https://help.studio.design/en/articles/10616204-move-your-website-to-studio-design-with-your-existing-custom-domain.md): Learn the general steps for migrating your website to Studio.Design from other services like WordPress or Wix. - [Disconnect a custom domain](https://help.studio.design/en/articles/4143486-disconnect-a-custom-domain.md): Learn how to disconnect a custom domain from a site published with Studio.Design, along with important things to keep in mind before you do. - [Troubleshooting custom domain connection and publishing issues](https://help.studio.design/en/articles/5663824-troubleshooting-custom-domain-connection-and-publishing-issues.md): Learn how to resolve common issues when connecting a custom domain in Studio.Design, such as SSL certificates not being issued or your published site not loading. ### Billing - [I can't tap "Upgrade Now". What should I do?](https://help.studio.design/en/articles/4507303-i-can-t-tap-upgrade-now-what-should-i-do.md): When you cannot upgrade the plan ### Account - [Sign up for a Studio account](https://help.studio.design/en/articles/6227154-sign-up-for-a-studio-account.md) - [Account Settings](https://help.studio.design/en/articles/4064987-account-settings.md) - [Set up your account's payment information](https://help.studio.design/en/articles/3548095-set-up-your-account-s-payment-information.md): Learn how to add and manage the credit or debit card, billing name, and address used to pay for your projects in Studio.Design. - [Changing Language](https://help.studio.design/en/articles/1949488-changing-language.md) - [How to change the email address](https://help.studio.design/en/articles/1949484-how-to-change-the-email-address.md): You can easily update the email address linked to your Studio.Design account from your account menu. - [How to change your password](https://help.studio.design/en/articles/1949485-how-to-change-your-password.md) - [How to Reset Your Account Password](https://help.studio.design/en/articles/1949482-how-to-reset-your-account-password.md): Learn how to reset your Studio account login password. - [Account Password Policy](https://help.studio.design/en/articles/10372093-account-password-policy.md): Learn about the password requirements for logging into Studio, including character limits and restrictions on certain strings. - [How to change your profile photo](https://help.studio.design/en/articles/1949483-how-to-change-your-profile-photo.md) - [Dark Mode and Light Mode Settings](https://help.studio.design/en/articles/2638945-dark-mode-and-light-mode-settings.md): Set the color mode for the editor and dashboard on a per-account basis. - [Log out](https://help.studio.design/en/articles/4065220-log-out.md) - [Canceling your Studio.Design account](https://help.studio.design/en/articles/2248690-canceling-your-studio-design-account.md): Learn what to consider before canceling your Studio.Design account, when cancellation isn't necessary, how it affects your workspaces and projects, and the steps to cancel. Note: to prevent fraud, ... - [Types of Emails from Studio.Design and How to Unsubscribe](https://help.studio.design/en/articles/11382726-types-of-emails-from-studio-design-and-how-to-unsubscribe.md): This article explains the different types of emails you may receive from Studio.Design and how you can manage or unsubscribe from them. ### Collaboration - [Difference Between Workspace Guests and Project Members](https://help.studio.design/en/articles/9669695-difference-between-workspace-guests-and-project-members.md): Explaining the Difference Between Inviting Members to a Regular Project and Inviting Guests in a Workspace. ### Apps - [Referral sources aren't tracked correctly in Google Analytics set up via Google Tag Manager](https://help.studio.design/en/articles/5027775-referral-sources-aren-t-tracked-correctly-in-google-analytics-set-up-via-google-tag-manager.md): Referral sources may not be tracked correctly in Google Analytics when set up through Google Tag Manager. This happens on the legacy \(SPA\) platform and affects SPA sites in general, not just Studio... - [Can Studio.Design integrate with heatmap tools?](https://help.studio.design/en/articles/6867381-can-studio-design-integrate-with-heatmap-tools.md): Studio.Design doesn't offer a built-in Apps integration with heatmap services. As an alternative, you can use the custom code feature or embed code through an Embed box. - [Track click events in Google Analytics using Google Tag Manager](https://help.studio.design/en/articles/3594869-track-click-events-in-google-analytics-using-google-tag-manager.md): Learn how to connect Google Tag Manager with Google Analytics to track click events on your Studio.Design site. This guide covers creating a GA4 configuration tag, setting the ID in Studio.Design, ... - [Integrate Marketo with Studio.Design or embed Marketo forms](https://help.studio.design/en/articles/8885358-integrate-marketo-with-studio-design-or-embed-marketo-forms.md): Some Studio.Design Enterprise plans include support for setting up Adobe Marketo Engage. Reach out to us to learn more. - [Connecting SATORI with Studio.Design and embedding forms](https://help.studio.design/en/articles/8888241-connecting-satori-with-studio-design-and-embedding-forms.md): With select Studio.Design Enterprise plans, you can consult with us about setting up SATORI integration. - [Connecting Salesforce Account Engagement with Studio.Design and embedding forms](https://help.studio.design/en/articles/8965990-connecting-salesforce-account-engagement-with-studio-design-and-embedding-forms.md): With certain Studio.Design Enterprise plans, you can consult with us about setting up Salesforce Account Engagement. - [Track Key Events in Google Analytics](https://help.studio.design/en/articles/3593487-track-key-events-in-google-analytics.md): Learn how to track key events in Google Analytics. You can set up key events either directly in Studio.Design or through your Google Analytics account. - [Data Connect API \(API Integration\)](https://help.studio.design/en/articles/6500751-data-connect-api-api-integration.md): Learn how to pull data from external services with public APIs and display it in Studio.Design's dynamic elements, like dynamic lists and pages. Covers supported APIs, setup steps, data binding, an... - [Connect microCMS with the API](https://help.studio.design/en/articles/6494531-connect-microcms-with-the-api.md): Use the Data Connect API to pull content from microCMS and display it in dynamic pages, modals, lists, and other dynamic elements in Studio.Design. Learn how to set up the data on the microCMS side... - [Notion API Integration](https://help.studio.design/en/articles/6498155-notion-api-integration.md): Display data from your Notion database on your Studio.Design site using the Data Connect API. This article walks you through Notion setup, API configuration in Studio.Design, and connecting data to... ### Studio Store - [What is Studio.Store?](https://help.studio.design/en/articles/7181485-what-is-studio-store.md): Studio.Store is our official marketplace where you can browse, purchase, and sell quality-assured web design templates. Learn about template specs, buying, and selling. ### Accessibility - [Accessibility in Studio](https://help.studio.design/en/articles/5752182-accessibility-in-studio.md) - [Language settings for your published site](https://help.studio.design/en/articles/5537056-language-settings-for-your-published-site.md): In Studio.Design, you can specify your site's language. This helps assistive technologies like translation tools and screen readers accurately identify and process the content on your site. - [aria-label, aria-hidden](https://help.studio.design/en/articles/5752183-aria-label-aria-hidden.md): How to Use aria-label and aria-hidden \(setting text to read aloud or not by screen readers\) ### How to contact - [Studio.Stock](https://help.studio.design/en/articles/12761189-studio-stock.md): Studio.Stock is a new photo stock service offering high-resolution, high-quality AI-generated images. You can easily search and download commercially usable images, and use various editing features... ## 日本語 ### 作成から公開までの流れ - [1. Studioのアカウントとプロジェクト](https://help.studio.design/ja/articles/9972325-1-studioのアカウントとプロジェクト.md): StudioでWebサイトを作成する際に必要な、アカウントとプロジェクトの作成方法と概要について説明します。 - [2. ダッシュボードの使い方](https://help.studio.design/ja/articles/9972349-2-ダッシュボードの使い方.md): プロジェクトごとの情報を確認・管理するダッシュボードについて解説します。支払い・プラン・容量、アナリティクスの確認や、CMSやフォームの管理等を行います。 - [3. Studioのレイアウトの基本（ボックスレイアウト）](https://help.studio.design/ja/articles/5542617-3-studioのレイアウトの基本-ボックスレイアウト.md): Studioでは、Webページのレイアウトを「ボックスレイアウト」という方法で作成します。ここでは、Studioのボックスレイアウトの特徴と、実際の画面操作について具体的に解説します。 - [4. Studio CMSの使い方](https://help.studio.design/ja/articles/4175003-4-studio-cmsの使い方.md): StudioのCMS機能の概要について説明します。ニュース、ブログ、コラム、導入事例など、同一のデザインで定期的な追加・更新が発生するコンテンツに活用できます。 - [5. 検索エンジンの仕組みとSEO対策](https://help.studio.design/ja/articles/12697851-5-検索エンジンの仕組みとseo対策.md): 公開したサイトが検索結果に表示されるまでのステップや、サイトを上位に表示させるためのSEO対策について紹介します。 - [6. ドメインを決めてサイトを公開する](https://help.studio.design/ja/articles/9973234-6-ドメインを決めてサイトを公開する.md): Webサイトが完成したら、ドメインを決めてサイトを公開しましょう。Studioで利用できるドメインと、サイト公開の手順について解説します。 ### プロジェクト管理 - [Studioのプロジェクトとは](https://help.studio.design/ja/articles/15840870-studioのプロジェクトとは.md): Studioでは、プロジェクトを作成してWebサイトを制作・公開・管理します。この記事では、プロジェクトの基本的な概念と複数プロジェクトを管理する方法（ワークスペース）について紹介します。 - [プロジェクトの作成と管理](https://help.studio.design/ja/articles/2639138-プロジェクトの作成と管理.md): Studioでのプロジェクト作成、複製、リセット、アーカイブ方法、そしてプロジェクトの設定について解説します。 - [プロジェクト設定をする](https://help.studio.design/ja/articles/13626851-プロジェクト設定をする.md): プロジェクト名やプロジェクトのカバー画像など、プロジェクトの全体設定の概要について解説します。 - [.txtファイルをアップロードする](https://help.studio.design/ja/articles/13627103-txtファイルをアップロードする.md): ads.txt などの.txtファイルをプロジェクトにアップロードして管理する方法を説明します。検索エンジンやLLMエージェント向けに、ポリシーや連絡先情報などを提供する用途で活用できます。 - [プロジェクトをリセットする](https://help.studio.design/ja/articles/7180957-プロジェクトをリセットする.md): プロジェクトの編集済みデータをリセットし、編集前の初期状態へ巻き戻すことができます。プロジェクト作成時に、空白からフルスクラッチで作成されたサイト以外がリセット対象です。 - [プロジェクト一覧画面上のカバー画像を設定する](https://help.studio.design/ja/articles/1949519-プロジェクト一覧画面上のカバー画像を設定する.md): Studioのプロジェクト一覧に表示されるカバー画像の変更方法を紹介します。画像の推奨サイズと手順を説明します。 - [Webhook通知を設定する](https://help.studio.design/ja/articles/9115699-webhook通知を設定する.md): StudioでWebhook通知を設定し、サイトの公開・更新・非公開時に外部システムへリアルタイムに情報を連携する方法を説明します。各プロジェクトにつき1つの通知URLを登録できます。 - [1アカウントが作成できるプロジェクト数に上限はありますか？](https://help.studio.design/ja/articles/9144023-1アカウントが作成できるプロジェクト数に上限はありますか.md): Studioでは、1アカウントが作成できるプロジェクト数に内部的な上限が設定されています。具体的な数値は公開されていませんが、通常の利用では問題ありません。 - [プロジェクトをアーカイブするとどうなりますか？削除はできませんか？](https://help.studio.design/ja/articles/2248968-プロジェクトをアーカイブするとどうなりますか-削除はできませんか.md): プロジェクトの完全削除はできません。 - [作成したプロジェクトの削除方法が知りたいです](https://help.studio.design/ja/articles/8859926-作成したプロジェクトの削除方法が知りたいです.md): Studioで作成したプロジェクトの完全削除はできません。アーカイブしプロジェクト一覧から移動させたり、サイトを非公開にすることは可能です。 - [招待されたプロジェクトが一覧に表示されません](https://help.studio.design/ja/articles/7971834-招待されたプロジェクトが一覧に表示されません.md): 招待されたプロジェクトが見当たらないときに確認すべきこと - [Studioで作成したサイトのデータをバックアップする方法はありますか？](https://help.studio.design/ja/articles/8860293-studioで作成したサイトのデータをバックアップする方法はありますか.md): Studioにはサイトのバージョンを保存・管理し、復元できるバージョン管理機能があります。サイトのバックアップを取るためにご利用いただけます。 - [CMS記事などのStudioのサイトデータを他のプラットフォームへ移行するためエクスポートしたいです](https://help.studio.design/ja/articles/8860404-cms記事などのstudioのサイトデータを他のプラットフォームへ移行するためエクスポートしたいです.md): Studioで作成したサイトのCMSデータやデザインデータのエクスポート機能は現在提供しておりません。 - [新プラン提供開始以降に、旧プランのプロジェクトを複製するとどうなりますか？](https://help.studio.design/ja/articles/10207848-新プラン提供開始以降に-旧プランのプロジェクトを複製するとどうなりますか.md): 2024年12月1日以降にプロジェクトを複製した場合、新プランのFreeプランとして複製されます。 ### ボックスのデザイン設定 - [Figma to Studio](https://help.studio.design/ja/articles/8277073-figma-to-studio.md): プラグインを使ってFigmaのデザインをStudioへインポートする - [エディタ上でボックスを選択できません](https://help.studio.design/ja/articles/4185027-エディタ上でボックスを選択できません.md): Studioエディタ上でボックスを選択できない場合の解決策をご案内しています。コンポーネントやリストのボックスを選択して編集する方法、ダイレクト選択、レイヤーパネルの活用方法を解説します。 - [左パネルを開けない、右パネルの設定項目が少ない場合](https://help.studio.design/ja/articles/6717538-左パネルを開けない-右パネルの設定項目が少ない場合.md): 追加パネルやレイヤーパネルを選択できない場合、コンテンツ編集モードがオンになっていることが主な原因です。エディタ左下の鉛筆アンコンをクリックするとモードが切り替わって解決します。 - [「デザインデータの容量が大きくなっています」と表示される場合](https://help.studio.design/ja/articles/6969479-デザインデータの容量が大きくなっています-と表示される場合.md): デザインデータ容量とは何か、そして上限に近づいた時の対処法をご紹介します。 - [ボックス入れ子構造の階層上限](https://help.studio.design/ja/articles/2680848-ボックス入れ子構造の階層上限.md): Studioのボックス入れ子構造で、複雑なデザインを作成される場合には、意図しないデータ破損を防ぐため、最大11階層を目安とした構成をご検討ください。「ボックスの親子関係」に関するエラーが発生した場合の対処方法についても解説します。 - [固定位置でヘッダーを配置すると、デザインと重なってしまう](https://help.studio.design/ja/articles/6211334-固定位置でヘッダーを配置すると-デザインと重なってしまう.md): 固定位置のヘッダーが見出しや画像と重なってしまう場合の原因と、ヘッダー分の余白を追加して重なりを解消する方法を説明します。 - [埋め込んだ背景動画の上下や左右に余白ができてしまう場合](https://help.studio.design/ja/articles/5735974-埋め込んだ背景動画の上下や左右に余白ができてしまう場合.md): Embedボックスのサイズを変更して、余白の調整をします。ただし、一定の画面幅以上では調整後も余白が発生してしまう可能性があります。 - [コピー & ペーストができない場合](https://help.studio.design/ja/articles/4334472-コピー-ペーストができない場合.md): コピー&ペーストやショートカットキーが使えない原因は様々です。この記事では、原因を絞り込むための3つの方法をご紹介します。 - [画像に青い網がかかって文字を重ねられない場合](https://help.studio.design/ja/articles/4060898-画像に青い網がかかって文字を重ねられない場合.md): 画像がBoxモードで、サイズが子要素より大きいことをご確認ください。 - [Toggle ボックスのメニューが上下に開いて動いてしまう場合](https://help.studio.design/ja/articles/8855480-toggle-ボックスのメニューが上下に開いて動いてしまう場合.md): Studioの Toggle ボックスを使って作成したドロップダウンメニューが展開時に動いてしまう場合の対処方法をご紹介します。 - [ボックスの画像・テキスト・リンクを変更すると、他のボックスも同じ内容に置き換わってしまう](https://help.studio.design/ja/articles/5182035-ボックスの画像-テキスト-リンクを変更すると-他のボックスも同じ内容に置き換わってしまう.md): ボックスの画像・テキスト・リンクを変更した際に、他のボックスの内容も置き換わってしまう場合には、対象のボックスがリスト化されていることが原因です。この記事では、具体的な原因の判別方法と、ボックスごとに異なる内容を設定する方法の記事を案内します。 ### ボックスのデータ設定（ID、タグ、リンク設定） - [アンカーリンク用のIDをボックスに設定する](https://help.studio.design/ja/articles/4064980-アンカーリンク用のidをボックスに設定する.md): アンカーリンク（ページ内リンク）設定時に必要な遷移先となるボックスへのID設定の手順を説明します。IDの設定手順と、リンクの種類ごとのユースケースを紹介します。 - [HTMLタグの種類と設定手順](https://help.studio.design/ja/articles/4064982-htmlタグの種類と設定手順.md): Studioのボックスに設定できるHTMLタグの種類と、タグ設定の具体的な手順を説明します。 - [HTML の見出しタグ \ - \](https://help.studio.design/ja/articles/6400176-html-の見出しタグ-h1-h6.md): Studioでは、HTMLの見出しタグを\から\まで設定できます。見出しタグを設定することで、SEO に有効な構造化されたページを作成できます。 - [構造化データのよくあるエラーと対処法](https://help.studio.design/ja/articles/9556108-構造化データのよくあるエラーと対処法.md): 構造化データのテスト方法やよくあるエラーの原因と解決策をご紹介します。 ### 各種ボックス - [画像ボックス](https://help.studio.design/ja/articles/4064885-画像ボックス.md): 画像ボックスは、ページに画像を追加する際に利用するボックス要素です。Studioにアップロードした画像、Unsplashのフリー画像、外部サーバーに保存された画像のURL指定に対応しています。 - [画像ボックス：BoxモードとImgモード](https://help.studio.design/ja/articles/4064875-画像ボックス-boxモードとimgモード.md): Studioの画像ボックスで選べる \[Box\] モードと \[Img\] モードの違いを整理します。各モードの特徴、向いている使い方、切り替え時の注意点を解説します。 - [画像ボックス：画像に背景加工をする](https://help.studio.design/ja/articles/1997379-画像ボックス-画像に背景加工をする.md): エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのフィルターや、背景画像のサイズ調整、リピート、位置調整の方法を説明します。 - [画像ボックス：代替テキストを設定する（alt）](https://help.studio.design/ja/articles/3315577-画像ボックス-代替テキストを設定する-alt.md): imgモードの画像ボックスに代替テキストを設定する方法を説明します。SEOの観点からも、この情報を設定することは非常に重要です。リストアイテム内の画像ごとに異なるalt設定をする方法も解説します。 - [画像ボックス：Imgモードで縦横比率が崩れる場合](https://help.studio.design/ja/articles/9267520-画像ボックス-imgモードで縦横比率が崩れる場合.md): 画像ボックスをImgモードに設定すると、画像の縦横比を保持したまま柔軟にサイズ調整ができますが、高さと幅をどちらもpxなどの固定値で指定すると縦横比が崩れる原因になります。 - [画像ボックス：フリー画像を利用する](https://help.studio.design/ja/articles/1997496-画像ボックス-フリー画像を利用する.md): Studioでは、高品質な無料の写真リソースサイト「Unsplash」と、AI生成による高解像度・高品質な写真素材を提供するサービス「Studio .Stock」の素材を利用できます。デザインエディタ上で画像が検索をし、選んだ画像をページにすぐに配置できます。 - [画像ボックス：画像の比率を固定する](https://help.studio.design/ja/articles/2638959-画像ボックス-画像の比率を固定する.md): Studioで画像の縦横比を固定したい場合は、画像ボックスの右上にあるスイッチをImgに切り替えます。Imgモードでは画像素材の縦横比率を保持したまま表示できます。 - [画像ボックス：擬似的にトリミングする（ボックス内の配置調整）](https://help.studio.design/ja/articles/3655938-画像ボックス-擬似的にトリミングする-ボックス内の配置調整.md): 画像の位置を調整し、擬似的なトリミング効果を得る方法を説明します。 - [画像ボックス：背景画像を固定表示する](https://help.studio.design/ja/articles/3022096-画像ボックス-背景画像を固定表示する.md): 背景画像を固定することで、スクロールしても背景画像が動かないレイアウトを作成できます。背景画像を固定する具体的な手順を説明します。 - [動画ボックス](https://help.studio.design/ja/articles/11461485-動画ボックス.md): 動画ボックスは、mp4やwebm形式の動画をページ上に直接配置できる機能です。画像やテキストと同様に自由なレイアウトが可能で、サイトに動画ならではの動きやインパクトを加えたい場面で活用できます。 - [テキストボックス](https://help.studio.design/ja/articles/4064889-テキストボックス.md): 文字コンテンツをWebページに表示する場合に使用する、テキストボックスの追加方法や編集方法をご紹介します。 - [リッチテキストボックス](https://help.studio.design/ja/articles/4064911-リッチテキストボックス.md): リッチテキストボックスを使用すると、テキストの一部にだけスタイルを適用したり、マークダウン記法で入力できます。この記事では、長文コンテンツやStudio CMSの本文表示での活用方法と、テキストグラデーションを使う際の注意点を説明します。 - [テキストの配置やデザインを編集する](https://help.studio.design/ja/articles/4064906-テキストの配置やデザインを編集する.md): テキストのサイズ、太さ、行高、配置などを編集する手順を紹介します。右パネル内のテキストタブで各種操作を行います。 - [テキストの文字組み（横書き・縦書き）を変更する](https://help.studio.design/ja/articles/2925387-テキストの文字組み-横書き-縦書き-を変更する.md): テキストの文字組み（横書き・縦書き）を変更する方法について解説します。具体的なオプションの違いや、機能の条件についても説明します。 - [文字の色や背景色を部分的に変更する](https://help.studio.design/ja/articles/3007552-文字の色や背景色を部分的に変更する.md): リッチテキストボックスを使って、一部の文字の色や背景色を変更する方法を紹介します。 - [リッチテキストの箇条書きをカスタマイズ・階層化したい](https://help.studio.design/ja/articles/9244585-リッチテキストの箇条書きをカスタマイズ-階層化したい.md): Studioのリッチテキストで使用できる箇条書き機能では、「1.」や「・」形式にのみ対応しています。番号のカスタマイズや階層化を行いたい場合は、テキストで対応してください。 - [プロパティに文字列フィルターを設定する](https://help.studio.design/ja/articles/6148984-プロパティに文字列フィルターを設定する.md): テキストボックスにCMSプロパティや、リスト・コンポーネントなどのプロパティを紐づけた際に、文字列フィルターを設定して表示内容をカスタマイズできます。 - [アイコンボックス](https://help.studio.design/ja/articles/4064926-アイコンボックス.md): Studioでは、Font AwesomeとMaterial Symbolsの2種類のアイコンを使用できます。Material Symbolsは線の太さやスタイル、塗りを調整でき、デザインに合わせやすいのが特徴です。 - [Font Awesome アイコンのバージョンアップデートについて](https://help.studio.design/ja/articles/8529288-font-awesome-アイコンのバージョンアップデートについて.md): 2023年11月2日以前に配置していたアイコンは一度変更すると、再度利用できなくなる可能性があります。 - [Embed（埋め込み）ボックス](https://help.studio.design/ja/articles/4064934-embed-埋め込み-ボックス.md): StudioのEmbed（埋め込み）ボックスでは、HTML・CSS・JavaScriptコードや各種外部サービスをページに埋め込みができます。この記事では、ボックスの追加方法、コードタイプの違い、編集画面の操作、注意点や外観設定について説明します。 - [Instagramの投稿を埋め込む](https://help.studio.design/ja/articles/3305539-instagramの投稿を埋め込む.md): Instagram埋め込みボックスを使って、フィードの個別投稿をWebサイトに埋め込む方法を解説します。 - [X（Twitter）の個別投稿を埋め込む](https://help.studio.design/ja/articles/4675994-x-twitter-の個別投稿を埋め込む.md): X（Twitter）の埋め込みボックスを使って、特定の投稿をWebサイトに埋め込む方法を解説します。 - [YouTube動画を埋め込む](https://help.studio.design/ja/articles/4064947-youtube動画を埋め込む.md): 埋め込み用のボックスを使って、YouTube動画をサイト上に埋め込み表示する方法をご紹介します。自動再生やループ再生のカスタマイズも可能です。 - [TikTok動画を埋め込む](https://help.studio.design/ja/articles/6851560-tiktok動画を埋め込む.md): TikTok動画やフィードは、埋め込みボックスを活用してサイトに埋め込むことができます。 - [Facebookを埋め込む](https://help.studio.design/ja/articles/4675992-facebookを埋め込む.md): Facebookのいいね！ボタンや投稿などの任意コンテンツをページへ埋め込む手順をご紹介します。 - [Googleカレンダーを埋め込む](https://help.studio.design/ja/articles/2753675-googleカレンダーを埋め込む.md): Embedボックスを利用して、GoogleカレンダーをWebページに埋め込む方法をご紹介します。Googleカレンダーをサイトに埋め込むと、スケジュールをサイト訪問者に共有できます。 - [Googleフォームを埋め込む](https://help.studio.design/ja/articles/2834094-googleフォームを埋め込む.md): Embedボックスを利用して、GoogleフォームをWebページに埋め込む方法をご紹介します。Studioのフォーム機能にはない、選択式の項目など高度な機能を使用したい場合などに活用できます。 - [Google Mapsを埋め込む](https://help.studio.design/ja/articles/1888376-google-mapsを埋め込む.md): StudioサイトにGoogle Mapsを埋め込む方法と、設置したGoogle Mapsの位置情報を変更する方法を解説します。 - [LINEの友だち登録ボタンを作りたい](https://help.studio.design/ja/articles/6171925-lineの友だち登録ボタンを作りたい.md): Studioサイトで、LINEの友だち登録画面に遷移するボタンを作成することが可能です。 - [Vimeoの動画を埋め込む](https://help.studio.design/ja/articles/4064951-vimeoの動画を埋め込む.md): Vimeoに公開した動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。自動＆ループ再生させる方法も紹介します。 - [iframeを埋め込む](https://help.studio.design/ja/articles/9202327-iframeを埋め込む.md): Embed ボックスを利用すると、簡単に外部サービスを iframe で埋め込み可能です。 - [Lottieを埋め込む](https://help.studio.design/ja/articles/8637241-lottieを埋め込む.md): Lottie 埋め込みボックスを活用すると、LottieをStudioサイトへ埋め込むことができます。埋め込んだLottieの再生条件は、スクロール連動など6つの再生条件から選ぶことができ、カスタマイズも可能です。 - [formrunを埋め込む](https://help.studio.design/ja/articles/4675986-formrunを埋め込む.md): フォーム作成から顧客管理までワンストップで行えるサービス「formrun」で作成したフォームをStudioサイトに埋め込む方法を説明します。 - [Fireworkを埋め込む](https://help.studio.design/ja/articles/5139103-fireworkを埋め込む.md): 縦型動画のFirework動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。 - [HubSpot Formを埋め込む](https://help.studio.design/ja/articles/5688648-hubspot-formを埋め込む.md): HubSpot Form を Studioサイトに埋め込む方法を説明します。 - [Studioで HTMLの編集・追加・出力をしたい](https://help.studio.design/ja/articles/8864939-studioで-htmlの編集-追加-出力をしたい.md): Studioでは、Embedボックスやカスタムコード機能を使ってHTMLやスクリプトを追加できます。一方で、ページのHTMLを直接編集したり、コードを出力することはできません。 - [埋め込み動画を背景に設定する](https://help.studio.design/ja/articles/3063733-埋め込み動画を背景に設定する.md): YouTubeやVimeoの動画をWebページに埋め込んで、背景やメインビジュアルとして設定する方法をご紹介します。 - [RSS連携（RSSリスト）](https://help.studio.design/ja/articles/3205203-rss連携-rssリスト.md): noteなどの外部サービスのRSS記事リストをStudioで作成したサイト上に自動表示することができます。 この記事では、RSS URLの追加、リストの配置、データの紐付けと更新方法について説明します。 - [RSS連携でnoteの最新記事をリスト表示する](https://help.studio.design/ja/articles/4065011-rss連携でnoteの最新記事をリスト表示する.md): StudioのRSS連携機能を使用し、noteの最新記事をサイトに表示する手順を解説します。 - [RSSの表示がエディタやライブプレビューで更新されない場合](https://help.studio.design/ja/articles/4061886-rssの表示がエディタやライブプレビューで更新されない場合.md): ページに配置したRSSフィードの表示がエディタやライブプレビューで更新されない理由と、手動更新の方法を解説します。 - [Embedボックスの縦横比を固定するレスポンシブ設定](https://help.studio.design/ja/articles/4767780-embedボックスの縦横比を固定するレスポンシブ設定.md): 埋め込みボックスを、縦横比を保ったまま表示させるレスポンシブ設定の方法を紹介します。この記事では例として、YouTube動画を埋め込んだEmbedボックスを、16:9の縦横比に維持するレスポンシブ設定を紹介します。 - [リスト](https://help.studio.design/ja/articles/4129102-リスト.md): リストは、同一レイアウトの要素のコンテンツとデザインを効率的に管理できる機能です。リスト化された要素は、レイアウトは共通のまま、アイテムごとにテキストや画像、色、表示・非表示などを個別に設定できます。 - [リストの種類の見分け方](https://help.studio.design/ja/articles/15653024-リストの種類の見分け方.md): リストには、「静的リスト（通常リスト）」と「動的リスト」があり、種類によってリスト内コンテンツの編集方法が異なります。リストの種類を確認する方法について解説します。 - [リスト：アイテムごとに異なる画像を設定する](https://help.studio.design/ja/articles/14616813-リスト-アイテムごとに異なる画像を設定する.md): 静的リストで、各アイテムごとに異なる画像を設定する方法を説明します。リスト内の画像が同じすべてになってしまう場合の注意も紹介します。 - [リスト：アイテムごとに異なるテキストを設定する](https://help.studio.design/ja/articles/14616877-リスト-アイテムごとに異なるテキストを設定する.md): 静的リストで、各アイテムごとに異なるテキストを設定する方法を説明します。リスト内のテキストが同じすべてになってしまう場合の注意も紹介します。 - [リスト：アイテムごとに異なるリンクを設定する](https://help.studio.design/ja/articles/9018252-リスト-アイテムごとに異なるリンクを設定する.md): 静的リストで、各アイテムごとに異なるリンクを設定する方法を説明します。リスト内のリンクが同じすべてになってしまう場合の注意も紹介します。 - [リスト：アイテムごとに内包ボックスを表示/非表示にする](https://help.studio.design/ja/articles/9744271-リスト-アイテムごとに内包ボックスを表示-非表示にする.md): リストでは、アイテムごとに色やボタン表示などのデザインを個別に設定できます。本記事ではブール値プロパティを使ってリスト内のアイテムごとに要素を表示/非表示させる方法をご紹介します。 - [リスト：アイテムごとに色を変える](https://help.studio.design/ja/articles/8849973-リスト-アイテムごとに色を変える.md): カラープロパティを使って、リスト内のアイテムごとにボックスの色を個別管理する方法を説明します。カテゴリーごとに色を分けたい場合などに活用できます。 - [動的リスト](https://help.studio.design/ja/articles/4055772-動的リスト.md): 動的リストは、Studio CMSやAPI・RSSで取得した外部データをデザインエディタに連携し、一覧コンテンツを自動で反映するための機能です。データの連携方法や概要について解説します。 - [リスト内アイテムを縦並び / 横並びにしたい](https://help.studio.design/ja/articles/9183187-リスト内アイテムを縦並び-横並びにしたい.md): Studioエディタでリストアイテムの縦並びや横並びを変更する方法を解説します。 - [カルーセル](https://help.studio.design/ja/articles/13427668-カルーセル.md): カルーセルは、複数のコンテンツをスライド形式で順番に表示できる機能です。Studioでは、静的なリストカルーセルとStudio CMSのコンテンツを活用した動的なCMSカルーセルの2種類があります。 - [リストカルーセル](https://help.studio.design/ja/articles/6108431-リストカルーセル.md): カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能です。この記事では、Studioのリスト機能を用いたリストカルーセルの配置・編集や自動再生設定、デザイン編集の基本操作について説明します。 - [カルーセルを自動再生する](https://help.studio.design/ja/articles/6902846-カルーセルを自動再生する.md): Studioでは、カルーセルに自動再生を設定できます。自動再生の設定方法について説明します。 - [カルーセルの自動再生機能で、無限ループ再生をしたい](https://help.studio.design/ja/articles/8300145-カルーセルの自動再生機能で-無限ループ再生をしたい.md): 現在、カルーセルの自動再生では無限ループ再生に対応していません。 無限に動く表現を行いたい場合は、LoopBox機能 を使ってマーキー（連続スクロール）アニメーションを設定することで実現できます。 ### CMSの管理とデザイン - [Studio CMSとは](https://help.studio.design/ja/articles/4055822-studio-cmsとは.md): Studio CMSは、Studioに組み込まれたコンテンツ管理機能です。ニュース・ブログ・採用情報など、同じデザインのページを継続的に更新・管理できます。CMSダッシュボードとデザインエディタの役割、およびコンテンツとデザインの紐付けの仕組みを説明します。 - [Studio CMS：記事作成から公開までの流れ](https://help.studio.design/ja/articles/4065370-studio-cms-記事作成から公開までの流れ.md): Studio CMSで記事コンテンツを作成し、サイトで公開するまでの流れを説明します。CMSの有効化から、CMSダッシュボードでのデータ作成、デザインエディタでの紐付け、サイト公開までの手順をステップごとに解説します。 - [WordPressからStudioへCMSデータをインポートする](https://help.studio.design/ja/articles/6401262-wordpressからstudioへcmsデータをインポートする.md): WordPressからエクスポートしたXMLファイルを利用することで、投稿記事やカテゴリなどのコンテンツをStudioのCMSへインポートできます。 - [CMSダッシュボード](https://help.studio.design/ja/articles/5726398-cmsダッシュボード.md): Studio CMSのコンテンツデータの作成や編集を行う、CMSダッシュボードの概要や操作方法を解説します。 - [CMSモデル](https://help.studio.design/ja/articles/4055811-cmsモデル.md): CMSモデルは、Studio CMSを利用する際に、各コンテンツ（CMSアイテム）を管理するための枠組みです。この記事では、CMSモデルのタイプ別の特徴やモデルの作成・編集・削除方法を紹介します。 - [CMSアイテム](https://help.studio.design/ja/articles/4055821-cmsアイテム.md): CMSアイテムは、モデルに属する個別のコンテンツデータです。この記事では、CMSアイテムの特徴から作成・編集・削除方法までをご紹介します。 - [CMSプロパティ](https://help.studio.design/ja/articles/4055813-cmsプロパティ.md): Studio CMSで利用できるCMSプロパティの概要を説明します。プロパティの種別、必須プロパティ、追加・編集・削除の方法、各プロパティ種別の特徴を確認できます。 - [CMSプロパティ：リッチテキスト（本文）](https://help.studio.design/ja/articles/14654498-cmsプロパティ-リッチテキスト-本文.md): Studio CMSの「記事タイプ」モデルのCMSアイテムで利用できるリッチテキストプロパティ（本文）の編集方法を説明します。書式設定、画像・動画・PDFの追加と各メディアの詳細設定、マークダウンやコメントなどの機能について解説します。 - [CMSプロパティ：スラッグ（Slug）](https://help.studio.design/ja/articles/4217501-cmsプロパティ-スラッグ-slug.md): スラッグ（Slug）はCMSアイテムを特定するための「ID」で、公開サイトのページURLの末尾になる文字列です。 - [CMSプロパティ：ステータスと公開日時](https://help.studio.design/ja/articles/6319932-cmsプロパティ-ステータスと公開日時.md): Studio CMSで作成したコンテンツ（CMSアイテム）の公開状態や公開日時指定は、公開ステータスプロパティと公開日時プロパティで管理します。各ステータスの違いと、公開日時を使った公開予約や表示順の調整方法を説明します。 - [CMSコレクション](https://help.studio.design/ja/articles/4065333-cmsコレクション.md): CMSコレクションは、特定のCMSモデルから任意のアイテムを選び、手動で掲載内容を調整できる機能です。ニュース記事の特集やおすすめ一覧など、柔軟にアイテムを組み合わせて表示したい場合に活用します。 - [CMS共同編集](https://help.studio.design/ja/articles/5999236-cms共同編集.md): 共同編集と記事コメント機能について - [CMSコンテンツ（記事タイプモデル）のRSS フィード設定](https://help.studio.design/ja/articles/6631681-cmsコンテンツ-記事タイプモデル-のrss-フィード設定.md): Studioで管理・公開しているニュース・ブログ等の記事を、RSSで配信するための設定 - [CMSアイテムの最終更新者と最終更新日を確認する](https://help.studio.design/ja/articles/10263573-cmsアイテムの最終更新者と最終更新日を確認する.md): CMSアイテムを最後に更新したユーザーと最終更新日時は、CMSダッシュボード上のアイテム詳細画面およびアイテム一覧画面で確認できます。複数メンバーでStudio CMSを運用する際の編集履歴の把握に役立ちます。 - [CMSリスト](https://help.studio.design/ja/articles/13228243-cmsリスト.md): CMSリストは、Studio CMSで管理しているデータを動的リストに紐付けて表示する機能です。この記事では、CMSリストの概要、作成手順、表示設定、レイアウト調整の考え方を説明します。 - [CMSカルーセル](https://help.studio.design/ja/articles/4129089-cmsカルーセル.md): Studio CMSのコンテンツデータを反映させたカルーセルスライダーの作成方法を紹介します。データの編集や自動再生設定、表示件数やデザインの調整を行う方法を説明します。 - [CMSリストの表示アイテムを絞り込む（フィルター）](https://help.studio.design/ja/articles/12093392-cmsリストの表示アイテムを絞り込む-フィルター.md): CMSプロパティや検索ワードでフィルター条件を設定し、CMSリストの表示アイテムの絞り込みができます。絞り込みに利用できるプロパティの詳細や設定方法を紹介します。 - [CMSリストのフィルター：固定フィルター](https://help.studio.design/ja/articles/14698742-cmsリストのフィルター-固定フィルター.md): Studio CMSのプロパティを条件に、CMSリストに表示するCMSアイテムを特定の条件で固定して絞り込む機能について、概要と設定手順、注意点を説明します。 - [CMSリストのフィルター：ダイナミックフィルター（Dynamic）](https://help.studio.design/ja/articles/13594219-cmsリストのフィルター-ダイナミックフィルター-dynamic.md): ページの表示内容に合わせて表示アイテムが自動で切り替わるフィルター機能が、ダイナミックフィルターです。動的ページ内にCMSリストを配置し、CMSモデルを参照している参照プロパティ（シングルセレクト）を条件として設定します。 - [CMSリストのフィルター：URLクエリフィルター](https://help.studio.design/ja/articles/13601425-cmsリストのフィルター-urlクエリフィルター.md): カテゴリーなどの検索条件でCMSリストの表示アイテムを絞り込むフィルター（URLクエリフィルター）をサイトに設置できます。WebページのURLに含まれるクエリパラメーターをStudioのCMSリストのフィルターに連携し、表示内容を動的に切り替えます。 - [動的ページ：Studio CMSの記事アイテムを表示する、CMS記事ページを作成する](https://help.studio.design/ja/articles/9506045-動的ページ-studio-cmsの記事アイテムを表示する-cms記事ページを作成する.md): Studio CMSに登録した記事アイテムのプロパティを使って、タイトルやbody（本文）、サムネイルなどを動的に表示するCMS記事ページを作成する手順を紹介します。 - [動的ページ内のボックス要素とCMSプロパティを紐付ける](https://help.studio.design/ja/articles/13767977-動的ページ内のボックス要素とcmsプロパティを紐付ける.md): 動的ページで作成したCMS記事ページ内のボックス要素と、CMSダッシュボードで設定したCMSプロパティを紐付ける手順を説明します。操作はデザインエディタで行います。画像ボックス・テキストボックス・リッチテキストボックス・条件設定に利用するプロパティの紐付け手順をまとめました。 - [CMSリストからCMS記事ページへのリンクを設定する](https://help.studio.design/ja/articles/13856944-cmsリストからcms記事ページへのリンクを設定する.md): Studio CMSで作成したCMS記事ページへの動線を作成し、サイト内の回遊性を高める設定をする手順を紹介します。CMSリストを配置し、リンク設定でCMS記事ページへのリンクを設定します。 - [CMSアイテムが公開サイトで表示されません](https://help.studio.design/ja/articles/6157854-cmsアイテムが公開サイトで表示されません.md): StudioサイトでCMSコンテンツ（記事、タグ、カテゴリー、カルーセルなど）が公開サイトに表示されない場合に、原因として多い公開ステータスやサイト更新の状態を中心に、確認すべきチェック項目をまとめています。 - [Studio CMSのアイテムを任意の順番に並べ替えてリスト表示したい](https://help.studio.design/ja/articles/6721694-studio-cmsのアイテムを任意の順番に並べ替えてリスト表示したい.md): CMSリストの表示順は、ソート機能やコレクションを使って並び順を変更できます。本記事では基本となるソート機能と、用途に応じた代替方法を整理して解説します。 - [CMSリストで、特定のCMSアイテムを上部に固定表示したい](https://help.studio.design/ja/articles/6227845-cmsリストで-特定のcmsアイテムを上部に固定表示したい.md): Studio CMSにはCMSリスト上部へのピン留め機能はありませんが、専用のCMSモデルやCMSコレクション、通常ページと通常リストを組み合わせることで、特定のCMSアイテムを記事一覧の先頭に表示する方法を紹介します。 - [CMSリストのアイテムごとに異なる外部リンクを設定する](https://help.studio.design/ja/articles/9025757-cmsリストのアイテムごとに異なる外部リンクを設定する.md): StudioのCMSリスト内アイテムごとに外部URLを設定する手順を解説します。通常のリンク設定ではなく、テキストプロパティを利用して設定します。 - [Studio CMS記事アイテムの改行がデザインエディタ上で反映されません](https://help.studio.design/ja/articles/4526299-studio-cms記事アイテムの改行がデザインエディタ上で反映されません.md): Studio CMSの記事アイテムを反映した、CMS記事ページで本文の改行が反映されない場合は、テキストボックスを使用している可能性があります。リッチテキストボックスにCMSモデルのbodyプロパティ（本文）を指定して表示してください。 - [Studio CMSの記事アイテムが、サイト上で正しく表示されない](https://help.studio.design/ja/articles/5670677-studio-cmsの記事アイテムが-サイト上で正しく表示されない.md): Studio CMSの記事アイテムが、サイト上で正しく表示されない場合に考えられる原因について。 - [新規作成した動的ページで、CMSアイテムの本文が表示されない](https://help.studio.design/ja/articles/5821090-新規作成した動的ページで-cmsアイテムの本文が表示されない.md): 動的ページを新規作成した際にCMS記事アイテムの本文が表示されない場合は、記事本文のプロパティが紐付いたリッチテキストボックスがページ上に配置されているか確認してください。初期状態では配置されていません。 - [CMS記事のリダイレクト設定をしたい](https://help.studio.design/ja/articles/9309873-cms記事のリダイレクト設定をしたい.md): Studioでは現在、リダイレクトページを利用したリダイレクト設定において、CMS記事などの動的ページへリダイレクト設定を行うことはできません。 - [CMSリストで、画像・テキスト・リンクを変更したら、他のアイテムも同じ内容に置き換わってしまう](https://help.studio.design/ja/articles/5054353-cmsリストで-画像-テキスト-リンクを変更したら-他のアイテムも同じ内容に置き換わってしまう.md): CMSリストでアイテムごとの画像・テキスト・リンクが全て同じ内容になってしまう場合の原因と、プロパティの紐付けを修正する手順を説明します。 - [Studio CMSのリッチテキストプロパティ（本文）で、色・サイズ・余白・フォントなどを変更したい](https://help.studio.design/ja/articles/15501217-studio-cmsのリッチテキストプロパティ-本文-で-色-サイズ-余白-フォントなどを変更したい.md): CMS記事本文（リッチテキストプロパティ）の文字の色・サイズ・余白・フォントなどの設定は、CMSダッシュボードではなくデザインエディタで行います。画面の見分け方と設定方法を案内します。 ### フォーム - [フォーム送信トラブル：送信ボタンをクリックしても、「フォーム送信失敗」で送れない場合](https://help.studio.design/ja/articles/10911810-フォーム送信トラブル-送信ボタンをクリックしても-フォーム送信失敗-で送れない場合.md): Studioフォームに回答を送信した場合のエラー表示の主な原因は、Google reCAPTCHA v3の設定問題かGoogleスプレッドシートの連携問題です。 - [フォーム送信トラブル：送信ボタンをクリックしても、送信できない場合](https://help.studio.design/ja/articles/13002188-フォーム送信トラブル-送信ボタンをクリックしても-送信できない場合.md): フォームの送信ボタンをクリックしても送信できない場合は、回答必須項目のボックスが非表示になっている可能性があります。回答必須項目が未入力の状態となるため、フォームを送信できません。 - [フォーム通知トラブル：送信された回答が、管理者のダッシュボードやメールに届かない場合](https://help.studio.design/ja/articles/4507321-フォーム通知トラブル-送信された回答が-管理者のダッシュボードやメールに届かない場合.md): フォーム回答者が送信ボタンをクリックしたにも関わらず、回答がサイト管理側に届かない場合の原因と対処法を説明します。主な原因は、送信ボタン自体にリンクを直接設定していることです。 - [フォーム通知トラブル：送信された回答が、管理者にメールで通知されない場合](https://help.studio.design/ja/articles/5060470-フォーム通知トラブル-送信された回答が-管理者にメールで通知されない場合.md): Studioフォームからの通知メールが届かない場合に確認すべき原因と対処法を紹介します。 ### SEO・アクセス解析・サイト表示 - [SEO対策](https://help.studio.design/ja/articles/2639106-seo対策.md): Studioで設定できるSEO関連の項目（タイトル、説明文、OGP画像、ファビコン、HTML、alt属性、サイトマップ、404ページ）を整理し、検索エンジンや訪問者に内容を伝わりやすくします。 - [Studioのサイトマップに1ページしか記載されていません](https://help.studio.design/ja/articles/9295313-studioのサイトマップに1ページしか記載されていません.md): Studioで制作したサイトのサイトマップの仕様について説明します。サイトマップの概要や動的ページの扱いなどを確認できます。 - [サイト公開後にタイトルやディスクリプションを変更したが、Google検索結果に反映されません](https://help.studio.design/ja/articles/8841804-サイト公開後にタイトルやディスクリプションを変更したが-google検索結果に反映されません.md): Studioサイト公開後に更新したサイトの「タイトル」と「ディスクリプション」がGoogle検索結果にすぐに反映されない理由と、それを解決する方法を解説します。 - [Google検索結果にアイコン名が表示されてしまいます](https://help.studio.design/ja/articles/9244443-google検索結果にアイコン名が表示されてしまいます.md): Google検索結果の下部に表示されるサイトリンクは、Googleが自動的に生成する追加リンクです。アイコンフォントがサイトリンクに表示される場合の対処法について説明します。 - [StudioサイトをSEOチェックツールにかけると、hタグが検出されません](https://help.studio.design/ja/articles/9240731-studioサイトをseoチェックツールにかけると-hタグが検出されません.md): StudioサイトをSEOチェックツールで確認すると、hタグが検出されない場合があります。これは旧基盤（SPA）で起こる事象で、Googleの検索には影響しません。 - [サイト公開後、検索エンジンの検索結果にサイトやページが表示されません](https://help.studio.design/ja/articles/2248745-サイト公開後-検索エンジンの検索結果にサイトやページが表示されません.md): Studioサイトの公開後、サイトやページが検索エンジンの検索結果に表示されない場合にチェックするべき項目と、検索エンジンの仕組みについて解説します。 - [OGP画像（カバー画像）やファビコンを変更してもSNSや検索結果に反映されません](https://help.studio.design/ja/articles/4060856-ogp画像-カバー画像-やファビコンを変更してもsnsや検索結果に反映されません.md): OGP画像やファビコンを変更した際に、SNS上や検索エンジンの検索結果に反映されるまでに時間がかかる理由と対処方法について解説しています。 ### 公開基盤・パフォーマンス - [WebサイトのStudio移行時にアクセス不能な時間をゼロにしたい](https://help.studio.design/ja/articles/6459180-webサイトのstudio移行時にアクセス不能な時間をゼロにしたい.md): Webサイト移行時に発生するダウンタイムの仕組みや確認方法、切り替えに時間がかかる場合の対処法を説明します。 - [Studioで公開するサイトの同時アクセス数の上限と対応策](https://help.studio.design/ja/articles/3559957-studioで公開するサイトの同時アクセス数の上限と対応策.md): Studioで公開するサイトの同時アクセス数の上限と対応策を紹介します。 - [Studio公開サイトの表示速度を向上させるヒント](https://help.studio.design/ja/articles/4062009-studio公開サイトの表示速度を向上させるヒント.md): Studioで作成したサイトの表示速度を改善する方法を説明します。ボックス数の削減、画像の最適化、フォント設定など、すぐに取り組める改善策をまとめています。 - [不正アクセスによるPV数の増加が発生したらどうしたら良いですか？](https://help.studio.design/ja/articles/9007346-不正アクセスによるpv数の増加が発生したらどうしたら良いですか.md): Studioサイトへの不正アクセスによるPV数の増加が疑われる場合の対応について解説します。 - [公開サイトの表示パフォーマンスを向上させるためのチェックリスト](https://help.studio.design/ja/articles/13526287-公開サイトの表示パフォーマンスを向上させるためのチェックリスト.md): LighthouseとPageSpeed Insightsのスコアを制作・レビュー・QA・納品前確認に活用するためのチェックポイントをまとめます。公開サイトのパフォーマンスとユーザー体験を最大化したい場合に参照してください。 ### ドメイン・DNS - [独自ドメインでサイトを公開する](https://help.studio.design/ja/articles/4358865-独自ドメインでサイトを公開する.md): 外部サービスで取得した独自ドメインを使ってWebサイトを公開する手順と、利用時の確認事項を紹介します。 - [Studioサブドメインでサイトを公開する](https://help.studio.design/ja/articles/10327010-studioサブドメインでサイトを公開する.md): Studioのサブドメインを使ってWebサイトを公開する手順と、利用時の確認事項を紹介します。 - [Studioサブドメインの接続解除方法](https://help.studio.design/ja/articles/10327081-studioサブドメインの接続解除方法.md): Studioで制作したサイトをStudioのサブドメインで公開している際に、接続を解除する方法ついて解説します。 - [独自ドメインに変更後、元のStudioサブドメインにアクセスした場合](https://help.studio.design/ja/articles/9239809-独自ドメインに変更後-元のstudioサブドメインにアクセスした場合.md): Studioのサブドメインで公開していたサイトを独自ドメインに変更した際、元のサブドメインへのアクセスは独自ドメインに自動的にリダイレクトされます。 - [他サービスから独自ドメインを引き継いで、StudioへWebサイトを移行する](https://help.studio.design/ja/articles/10616204-他サービスから独自ドメインを引き継いで-studioへwebサイトを移行する.md): WordPressやWixなどの他サービスからStudioへWebサイトを移行する一般的な手順を説明します。 - [独自ドメインの接続を解除する](https://help.studio.design/ja/articles/4143486-独自ドメインの接続を解除する.md): Studioで制作したサイトを独自ドメインで公開している際に、接続を解除する方法と注意点について解説します。 - [独自ドメインの接続・公開ができない時の確認事項と解消方法](https://help.studio.design/ja/articles/5663824-独自ドメインの接続-公開ができない時の確認事項と解消方法.md): Studioで独自ドメインを接続する際に、証明書が発行されない、公開サイトが閲覧できないといった問題の原因と解決方法を解説します。 ### 料金プラン・お支払い - [クレジットカード以外の支払い方法（請求書払い・口座振替・銀行振込）に対応していますか？](https://help.studio.design/ja/articles/9144057-クレジットカード以外の支払い方法-請求書払い-口座振替-銀行振込-に対応していますか.md): Studioではクレジットカードとデビットカードでの支払いのみ対応しています。Enterpriseプランのみ銀行振込に対応しています。 - [「お支払いを確定する」ボタンが押せません](https://help.studio.design/ja/articles/4507303-お支払いを確定する-ボタンが押せません.md): プロジェクトのプランアップグレードボタンが押せない際の対処方法をご紹介します。 - [プラン利用料金の見積書を発行してほしい](https://help.studio.design/ja/articles/9317133-プラン利用料金の見積書を発行してほしい.md): Studioではシステムの仕様上、プランの見積書発行は行っておりません。料金表ページをご確認いただき、プランをご検討ください。 ### アカウント設定 - [Studioアカウントを新規登録する](https://help.studio.design/ja/articles/6227154-studioアカウントを新規登録する.md): Studioのアカウントを新規登録する方法をご説明します。Studioをご利用いただくには、Facebookアカウント・Googleアカウントまたはメールアドレスが必要です。 - [アカウント設定](https://help.studio.design/ja/articles/4064987-アカウント設定.md): アカウント設定では、ユーザー名、メールアドレス、パスワード、支払い情報など、アカウントに関する詳細設定を一括で行えます。 - [アカウントの支払い情報を設定する](https://help.studio.design/ja/articles/3548095-アカウントの支払い情報を設定する.md): プロジェクトのお支払いに使用するクレジットまたはデビットカード情報、宛名、住所の設定手順を解説します。 - [アカウントの言語設定](https://help.studio.design/ja/articles/1949488-アカウントの言語設定.md): アカウントごとにエディタやダッシュボードで使用する言語を設定します。 - [アカウントのメールアドレスを変更する](https://help.studio.design/ja/articles/1949484-アカウントのメールアドレスを変更する.md): Studioアカウントのメールアドレスを変更する方法を説明します。 - [アカウントのパスワードを変更する](https://help.studio.design/ja/articles/1949485-アカウントのパスワードを変更する.md): アカウントのパスワードを変更する手順を紹介します。アカウント保護の観点から、パスワードを定期的に変更することを推奨しています。 - [アカウントのパスワードをリセットする](https://help.studio.design/ja/articles/1949482-アカウントのパスワードをリセットする.md): Studioアカウントのパスワードをリセットする手順をご紹介します。 - [アカウントのパスワードポリシー](https://help.studio.design/ja/articles/10372093-アカウントのパスワードポリシー.md): Studioへのログイン時に利用するパスワードの設定条件をご紹介します。文字数の条件や使用できない文字列についても解説します。 - [プロフィール写真を設定する](https://help.studio.design/ja/articles/1949483-プロフィール写真を設定する.md): studioアカウントに自分のプロフィール画像を設定できます。プロジェクトの参加ユーザーを適切に把握するために、自身のパーソナリティが伝わるアイコンを設定することを推奨します。 - [ダークモードの設定](https://help.studio.design/ja/articles/2638945-ダークモードの設定.md): アカウントごとにエディタやダッシュボードの画面の表示（カラーモード）を設定します。ダークモード、ライトモード、システムモード（PCの設定に依存）から選択できます。 - [Studioにログイン・ログアウトする](https://help.studio.design/ja/articles/4065220-studioにログイン-ログアウトする.md) - [Studioを退会する](https://help.studio.design/ja/articles/2248690-studioを退会する.md): Studioアカウントを退会する際の注意点、退会が不要なケース、ワークスペースやプロジェクトへの影響、事前準備と具体的な退会手順について説明します。不正防止の観点から、退会済みアカウントと同じメールアドレスでの再登録はできません。 - [Studioから配信されるメールの種類と停止方法](https://help.studio.design/ja/articles/11382726-studioから配信されるメールの種類と停止方法.md): この記事では、Studioから配信されるメールの種類と、それぞれの配信停止可否や停止手順について説明します。 ### メンバー管理 - [ワークスペースのゲストとプロジェクトの編集者](https://help.studio.design/ja/articles/9669695-ワークスペースのゲストとプロジェクトの編集者.md): ワークスペース内の特定のプロジェクトにのみアクセスが可能なゲストと、プロジェクトの編集者について、使い分けのヒントや留意点について解説します。 ### 機能拡張・外部連携 - [Googleタグマネージャーで設置したGoogleアナリティクスで参照元が正しく計測されない](https://help.studio.design/ja/articles/5027775-googleタグマネージャーで設置したgoogleアナリティクスで参照元が正しく計測されない.md): Googleタグマネージャーで設置したGoogleアナリティクスで、参照元が正しく計測されない場合があります。この事象は旧基盤（SPA）で発生し、Studio固有ではなくSPA構成のサイト全般に共通します。原因と対処方法を説明します。 - [Studioはヒートマップツールと連携できますか？](https://help.studio.design/ja/articles/6867381-studioはヒートマップツールと連携できますか.md): Studioではヒートマップ系サービスとのApps連携は提供していません。カスタムコード機能やEmbedボックスでのコード埋め込みをお試しください。 - [Googleタグマネージャーを使ってクリックイベントをGoogleアナリティクスで計測する](https://help.studio.design/ja/articles/3594869-googleタグマネージャーを使ってクリックイベントをgoogleアナリティクスで計測する.md): GoogleタグマネージャーとGoogleアナリティクスを連携し、Studioサイト上のクリックイベントを計測する手順を説明します。GA4設定タグの作成からStudioでのID設定、動作確認までをまとめています。 - [MarketoとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8885358-marketoとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseのうち一部プランでは、Adobe Marketo Engageの導入についてご相談いただけます。 - [SATORIとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8888241-satoriとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseプランのうち一部プランでは、SATORIの導入についてご相談いただけます。 - [Salesforce AccountEngagementとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8965990-salesforce-accountengagementとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseプランのうち一部プランでは、Salesforce AccountEngagementの導入についてご相談いただけます。 - [Google Analyticsでキーイベントを測定する](https://help.studio.design/ja/articles/3593487-google-analyticsでキーイベントを測定する.md): Google Analyticsでキーイベントを測定する方法を解説します。キーイベントの設置は、Studio上またはGA上で行います。 - [Data Connect API（API連携）](https://help.studio.design/ja/articles/6500751-data-connect-api-api連携.md): APIを公開している外部サービスからデータを取得し、動的リストや動的ページなど、Studioの動的な要素で表示する方法を解説します。連携可能なAPIの条件、各種API連携サービスの設定手順、データの紐付け方法、注意点などをまとめています。 - [microCMS API 連携](https://help.studio.design/ja/articles/6494531-microcms-api-連携.md): Data Connect APIを使用し、microCMSのコンテンツAPIからデータを取得し、動的ページ・動的モーダル・動的リストなど、Studioの動的な要素で表示できます。micro CMS側で取得する情報とStudio側での設定手順について説明します。 - [Notion API 連携](https://help.studio.design/ja/articles/6498155-notion-api-連携.md): Notionのデータベースで管理しているデータを、Data Connect API機能を使ってStudioサイトに表示できます。この記事では、Notion側の準備からStudioでのAPI設定、動的リスト・動的ページ・動的モーダルへのデータ連携までの流れを説明します。 ### Studio Store（テンプレート） - [Studio.Storeとは](https://help.studio.design/ja/articles/7181485-studio-storeとは.md): Studio.Storeは、クオリティ保証済みのWebデザインテンプレートを取得・販売できる公式マーケットプレイスです。テンプレートの仕様やテンプレート購入と販売についての概要を説明します。 - [テンプレートを編集する](https://help.studio.design/ja/articles/9974045-テンプレートを編集する.md): テンプレート編集時に役立つStudioの基本的な仕組みと、画像やテキストの差し替え、リンクやフォームの設定方法を解説します。 選択した要素が水色や紫でハイライトされて編集できない場合についても説明します。 ### アクセシビリティ - [Studio におけるアクセシビリティ](https://help.studio.design/ja/articles/5752182-studio-におけるアクセシビリティ.md) - [Studioアクセシビリティチェックシート](https://help.studio.design/ja/articles/9978869-studioアクセシビリティチェックシート.md): StudioでWebサイトを制作する際に、アクセシブルな構築を実現する方法を確認するチェックシートをご紹介します。 - [WCAG 2.2 Level A, AA対応表](https://help.studio.design/ja/articles/7999573-wcag-2-2-level-a-aa対応表.md): W3C勧告 Web Content Accessibility Guidelines \(WCAG\) 2.2 に対するStudioの対応状況を記しています。 - [Studio HTML要素・属性対応表](https://help.studio.design/ja/articles/7999581-studio-html要素-属性対応表.md) - [公開サイトの言語設定](https://help.studio.design/ja/articles/5537056-公開サイトの言語設定.md): Studioでは「言語」の設定を行うことで、サイトの使用言語を明示することが可能です。明示によって、翻訳ツールやスクリーンリーダーなどの支援技術がサイト上の言語を正確に識別でき、より正確な翻訳の提供や適切な言語での読み上げができます。 - [「aria-label」と「aria-hidden」とは](https://help.studio.design/ja/articles/5752183-aria-label-と-aria-hidden-とは.md): 設定したテキストをスクリーンリーダーで読み上げる「aria-label」と、読み上げ対象から除外する「aria-hidden」の機能について、ユースケースを用いてい解説します。 ### お問い合わせ・その他 - [Studio.Stock](https://help.studio.design/ja/articles/12761189-studio-stock.md): Studio.Stockは、AI生成による高解像度・高品質な写真素材を提供するフォトストックサービスです。商用利用可能な画像を手軽に検索・ダウンロードでき、プロンプト編集や背景除去など多彩な編集機能も利用できます。 - [Studio.Assistant](https://help.studio.design/ja/articles/13298038-studio-assistant.md): Studio.Assistantは、Webサイト制作の初期工程を効率化するAI搭載のWeb制作OSです。要件整理から情報設計、ワイヤーフレーム作成、デザインドラフト生成までを一気通貫で支援します。先行ユーザー向けに提供しています。