この記事には、STUDIO CMSの記事タイプを使用する際に、スタイル設定が可能なすべての要素を含んでいます。この投稿を全選択して、コピーし、制作中のサイトのCMS記事本文にペーストしてください。そして、そのページをデザインエディタで開けば、すべてのスタイル設定がその1ページで完結します。まずは、下記の「目次」のスタイルを設定しましょう。見出し1（H1）はどうする？見出し1（H1）は、通常、記事タイトルを使用するため、記事本文では使いませんが、CMSダッシュボード上では記事本文でも見出し1の設定が可能です。使っても違和感のないスタイルにするか、間違って使わないように、敢えて違和感のあるスタイルにする場合もあります。見出し2のスタイルを設定してください併せて、文章<P>のスタイルも設定しましょう。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。見出し3のスタイルも設定しましょうこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。見出し2と見出し3は区別がつくようにしましょうこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。見出し2は文字数が多くなっても、見栄えがわるくならないように行間を設定しておきましょうこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。見出し3も文字数が多くなって、見栄えがわるくならないように行間を設定しておきましょうこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。次に文字装飾5つのスタイルを設定この部分は太字です、太字のスタイルを設定してください。次に、この部分は斜体です、スタイルを設定してください。次に、この部分は打ち消し線ですがスタイル設定はありません。次に、この部分は下線です、スタイルを設定してください。次に、この部分はコードです、スタイルを設定してください。次に、この部分はリンクです、スタイルを設定してください。コードは、文章の一部だけでなく、このように、文章全体になる場合もあります。デザインエディタでは<pre>と表示され、先程の部分的なコードとはスタイルが区別されます。画像のスタイルも設定してください図など、背景が白い画像を使用する場合は、画像に枠線をつけておいたほうがいい場合もありますので、どうぞご検討ください。箇条書きリストと番号付きリストこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。これは箇条書きですこれは箇条書きのダミーですこれは箇条書きリストのダミーですが、文字数が多くなってもいいように行間を設定しておきましょうこれは箇条書きですこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。これは番号付きリストですこれは番号付きリストのダミーですこれは番号付きリストのダミーですが、文字数が多くなってもいいように行間を設定しておきましょうこれは番号付きリストですこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。引用とテーブルこのテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。これは引用のダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。プラン名料金特徴プランA10,000円このテキストはダミーです。繰り返します、このテキストはダミーです。プランB20,000円このテキストはダミーです。繰り返します、このテキストはダミーです。テーブルは行数や列数が変わっても問題がないようにしておきましょう。プランAプランBプランC料金10,000円20,000円30,000円特徴このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。埋め込みコードのコピペについて&amp;amp;amp;amp;lt;div class="height-adjuster" style="border: 0px; font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 0px; text-decoration: none; -webkit-font-smoothing: antialiased; backface-visibility: hidden; box-sizing: border-box; color: rgb(51, 51, 51); transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1), --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11; word-spacing: 1px; display: block; max-width: 600px;"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;div class="wrapper" style="border: 0px; font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 450px 0px 0px; text-decoration: none; -webkit-font-smoothing: antialiased; backface-visibility: hidden; box-sizing: border-box; color: rgb(51, 51, 51); transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1), --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11; word-spacing: 1px; position: relative;"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12966.991898658345!2d139.7454329!3d35.6585805!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1705294196245!5m2!1sja!2sjp" width="600" height="450" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="border: 0px; font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 0px; text-decoration: none; -webkit-font-smoothing: antialiased; backface-visibility: hidden; box-sizing: border-box; color: rgb(51, 51, 51); transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1), --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11; word-spacing: 1px; height: 450px; left: 0px; position: absolute; top: 0px; width: 600px;"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;上のGoogle Mapsは、埋め込みコードのダミーです。この部分は、コピペしたときに正しく表示されませんが（コードが表示される）、デザインエディタ上で上記の部分を選択すれば、埋め込みコード<embed>のスタイルは設定可能です。必要があれば、手動でこの部分のみCMSダッシュボードで修正してください。さいごに区切り線のスタイル設定この下の線は、「区切り線」です。区切り線もスタイルを設定しておきましょう。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。お疲れさまでしたスタイル設定項目は以上です。タブレットやスマホで見ても問題がないように、レスポンシブ設定も忘れずに行いましょう。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。このテキストはダミーです。繰り返します、このテキストはダミーです。