<?xml version="1.0" encoding="UTF-8" ?><!-- generator=Zoho Sites --><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><atom:link href="https://www.opdweb.jp/blogs/tag/ビジュアルエディター/feed" rel="self" type="application/rss+xml"/><title>WEBデザイン本舗 - カテゴリー１ #ビジュアルエディター</title><description>WEBデザイン本舗 - カテゴリー１ #ビジュアルエディター</description><link>https://www.opdweb.jp/blogs/tag/ビジュアルエディター</link><lastBuildDate>Sun, 08 Mar 2026 10:33:46 -0700</lastBuildDate><generator>http://zoho.com/sites/</generator><item><title><![CDATA[ブログポスト]]></title><link>https://www.opdweb.jp/blogs/post/blogpost</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。ブログポストの配置の設定方法を解説します。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw"].zpelem-text { border-radius:1px; margin-block-start:5px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="text-align:center;">ブログの一覧ページの配置の設定ができます。</p></div>
</div><div data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"].zpelem-heading { border-radius:1px; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:after,[data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_26MvWG7puoq7jc0iRODPjA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_26MvWG7puoq7jc0iRODPjA"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Blog Post]をクリックします。</li><li>お好みの配置を選択します。</li></ol></div>
</div><div data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:24px; } @media (max-width: 768px) { div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:calc(24px / 3); } } </style><div class="zpspacer " data-height="24"></div>
</div></div></div><div data-element-id="elm_eBi_xE3GIJapHBRidoRziQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_eBi_xE3GIJapHBRidoRziQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_OUzOqthtui8iXz4jZoVD_g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-4 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_OUzOqthtui8iXz4jZoVD_g"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_nDsuMYv6pYjnMMvYAJjmhQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_nDsuMYv6pYjnMMvYAJjmhQ"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="line-height:1.5;">ブログページの配置をどのようにするか選択できます。</p></div>
</div><div data-element-id="elm_DGs709JDhb18IsK_agy0eg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width: 307px !important ; height: 449px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:307px ; height:449px ; } } @media (max-width: 767px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:307px ; height:449px ; } } [data-element-id="elm_DGs709JDhb18IsK_agy0eg"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut82.png" width="307" height="449" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg"] div.zpspacer { height:21px; } @media (max-width: 768px) { div[data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg"] div.zpspacer { height:calc(21px / 3); } } </style><div class="zpspacer " data-height="21"></div>
</div><div data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading h2.zpicon-heading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:700; } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading{ border-radius:1px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common svg{ fill:#FFFFFF !important } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-bgfill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-circle-fill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-roundcorner-fill{ background:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-circle-fill "><svg viewBox="0 0 352 512" height="352" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg></span><h2 class="zpicon-heading " data-editor="true">ポイント</h2></div>
</div><div data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"].zpelem-divider{ border-radius:1px; margin-block-start:-17px; } </style><style> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:after, [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:before{ border-color:rgba(0,0,0,0.3) } </style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-dotted "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_MRHBj-X1_HfXxLEQiWJVGA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_MRHBj-X1_HfXxLEQiWJVGA"].zpelem-text { border-radius:1px; margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><ul><li><span style="color:inherit;">テンプレートによって選択できるレイアウトは変わる場合があります。</span></li><li>タイトルや、ブログの下に表示されるSNSアイコン、カテゴリータグ等のレイアウトを選ぶことができます。</li><li>ブログの中身（文章や写真、ボタン等）は通常ページと同様に自由に作ることができます。</li></ul></div>
</div></div><div data-element-id="elm_psKpPyg3NouvP4JHcWkBZA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-8 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_psKpPyg3NouvP4JHcWkBZA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw"].zpelem-text { color:#F39C12 ; font-family:'Noto Sans',sans-serif; font-size:18px; font-weight:700; border-radius:1px; } [data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#F39C12 ; font-family:'Noto Sans',sans-serif; font-size:18px; font-weight:700; } </style><div class="zptext zptext-align-center " data-editor="true"><p>例：ブログポスト左上のレイアウトを選択した場合</p></div>
</div><div data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width: 728px ; height: 946.99px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:723px ; height:940.49px ; } } @media (max-width: 767px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:415px ; height:539.84px ; } } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure:hover figcaption , [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure figcaption { background:rgba(52,152,219,0.7) ; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure figcaption .zpimage-caption-content { color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:700; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"].zpelem-image { border-style:solid; border-color:rgba(0,0,0,0.3) !important; border-width:1px; border-radius:1px; box-shadow:2px 2px 4px 0px rgba(0,0,0,0.3); } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut83.png" width="415" height="539.84" loading="lazy" size="fit" alt="ブログリストのレイアウト例"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_794MEJLOXH3yIeWpU9aLRg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:20px; } @media (max-width: 768px) { div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:calc(20px / 3); } } </style><div class="zpspacer " data-height="20"></div>
</div><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Wed, 28 Sep 2022 13:01:07 +0900</pubDate></item><item><title><![CDATA[パンくずリスト（Breadcrumb）]]></title><link>https://www.opdweb.jp/blogs/post/breadcrumb</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。パンクズリストのレイアウト変更方法を解説します。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw"].zpelem-text { border-radius:1px; margin-block-start:5px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="text-align:center;">パンくずリストとは、<span style="color:inherit;">Webページの階層構造をリスト表示したものです。パンくずリストがあると今ユーザーがどのページにいるのかをナビゲートすることができます。ビジュアルエディターでは、パンくずリストのレイアウトを変えることができます。</span></p></div>
</div><div data-element-id="elm_GXnH4XgirTBeGyRQo0xItw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_GXnH4XgirTBeGyRQo0xItw"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_GXnH4XgirTBeGyRQo0xItw"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w"] .zpimage-container figure img { width: 430px !important ; height: 65px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w"] .zpimage-container figure img { width:430px ; height:65px ; } } @media (max-width: 767px) { [data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w"] .zpimage-container figure img { width:430px ; height:65px ; } } [data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w"] .zpimage-container figure figcaption .zpimage-caption-content { color:#3498DB ; font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:16px; } [data-element-id="elm_JvWMPfBsm9Y54Cbvb2ka1w"].zpelem-image { border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:7px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut87.png" width="430" height="65" loading="lazy" size="original"/></picture></span><figcaption class="zpimage-caption zpimage-caption-align-center"><span class="zpimage-caption-content">パンくずリストの例▲</span></figcaption></figure></div>
</div><div data-element-id="elm_XkUiuLNm5uz-4tkuP7VZFQ" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_XkUiuLNm5uz-4tkuP7VZFQ"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_XkUiuLNm5uz-4tkuP7VZFQ"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"].zpelem-heading { border-radius:1px; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:after,[data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_26MvWG7puoq7jc0iRODPjA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_26MvWG7puoq7jc0iRODPjA"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Breadcrumb]をクリックします。</li><li><span style="color:inherit;">好きなパンクズリストの表示方法を選択し、<span style="font-weight:700;">[保存]</span>をクリックします。</span><br></li></ol></div>
</div></div><div data-element-id="elm_imzq7q3arGWH3EC37jKtQQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_imzq7q3arGWH3EC37jKtQQ"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_DGs709JDhb18IsK_agy0eg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width: 299px ; height: 461.00px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:299px ; height:461.00px ; } } @media (max-width: 767px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:299px ; height:461.00px ; } } [data-element-id="elm_DGs709JDhb18IsK_agy0eg"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-medium zpimage-tablet-fallback-medium zpimage-mobile-fallback-medium hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut86.png" width="299" height="461.00" loading="lazy" size="medium" data-lightbox="true"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_eBi_xE3GIJapHBRidoRziQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_eBi_xE3GIJapHBRidoRziQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_OUzOqthtui8iXz4jZoVD_g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_OUzOqthtui8iXz4jZoVD_g"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading h2.zpicon-heading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:20px; font-weight:700; } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading{ border-radius:1px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common svg{ fill:#FFFFFF !important } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-bgfill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-circle-fill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-roundcorner-fill{ background:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-circle-fill "><svg viewBox="0 0 640 512" height="640" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg></span><h2 class="zpicon-heading " data-editor="true">パンくずリストが表示されない場合</h2></div>
</div><div data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"].zpelem-divider{ border-radius:1px; margin-block-start:-17px; } </style><style> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:after, [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:before{ border-color:rgba(0,0,0,0.3) } </style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-dotted "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_IqCp4k3Iq9m5Uvg5zGOw0w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_IqCp4k3Iq9m5Uvg5zGOw0w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_psKpPyg3NouvP4JHcWkBZA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_psKpPyg3NouvP4JHcWkBZA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_AAqE8PnUPh_HOZ5moblZAg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_AAqE8PnUPh_HOZ5moblZAg"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p>１. 画面上の[設定]から、概要＞設定をクリックします。</p></div>
</div><div data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width: 538px ; height: 380.85px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:723px ; height:511.81px ; } } @media (max-width: 767px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:415px ; height:293.78px ; } } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure:hover figcaption , [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure figcaption { background:rgba(52,152,219,0.7) ; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure figcaption .zpimage-caption-content { color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:700; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"].zpelem-image { border-style:solid; border-color:rgba(0,0,0,0.3) !important; border-width:1px; border-radius:1px; box-shadow:2px 2px 4px 0px rgba(0,0,0,0.3); } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut84.png" width="415" height="293.78" loading="lazy" size="fit" alt="ブログリストのレイアウト例"/></picture></span></figure></div>
</div></div><div data-element-id="elm_qQnkIWWvFDe2Le34l93PeQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_qQnkIWWvFDe2Le34l93PeQ"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_gd1H8dkYKfeXIC-HR8Xv6w" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_gd1H8dkYKfeXIC-HR8Xv6w"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p>２. パンくずリストの[表示]にチェックを入れ保存すると、表示されるようになります。</p></div>
</div><div data-element-id="elm_YFMjNg6W-rA12P28rzVwKQ" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_YFMjNg6W-rA12P28rzVwKQ"] .zpimage-container figure img { width: 540px ; height: 381.13px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_YFMjNg6W-rA12P28rzVwKQ"] .zpimage-container figure img { width:723px ; height:510.28px ; } } @media (max-width: 767px) { [data-element-id="elm_YFMjNg6W-rA12P28rzVwKQ"] .zpimage-container figure img { width:415px ; height:292.90px ; } } [data-element-id="elm_YFMjNg6W-rA12P28rzVwKQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut85.png" width="415" height="292.90" loading="lazy" size="fit" data-lightbox="true"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_794MEJLOXH3yIeWpU9aLRg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:20px; } @media (max-width: 768px) { div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:calc(20px / 3); } } </style><div class="zpspacer " data-height="20"></div>
</div><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Wed, 28 Sep 2022 13:01:07 +0900</pubDate></item><item><title><![CDATA[ブログリスト]]></title><link>https://www.opdweb.jp/blogs/post/bloglist</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。ブログリストの配置の設定方法を解説します。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw"].zpelem-text { border-radius:1px; margin-block-start:5px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="text-align:center;">ブログの一覧ページの配置の設定ができます。</p></div>
</div><div data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_IS_wPrcoU06c8gvoj1uQrw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_gGsrTH7ONJb2xG3iPbNBWA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"].zpelem-heading { border-radius:1px; } [data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:after,[data-element-id="elm_pHM_0hdEIawg3d2bUOAusQ"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_26MvWG7puoq7jc0iRODPjA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_26MvWG7puoq7jc0iRODPjA"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Blog List]をクリックします。</li><li>お好みの配置を選択します。</li></ol></div>
</div><div data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_IHWZ9TWFsVB053RAfS1cGQ"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:24px; } @media (max-width: 768px) { div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:calc(24px / 3); } } </style><div class="zpspacer " data-height="24"></div>
</div></div></div><div data-element-id="elm_eBi_xE3GIJapHBRidoRziQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_eBi_xE3GIJapHBRidoRziQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_OUzOqthtui8iXz4jZoVD_g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-4 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_OUzOqthtui8iXz4jZoVD_g"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_nDsuMYv6pYjnMMvYAJjmhQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_nDsuMYv6pYjnMMvYAJjmhQ"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="line-height:1.5;">ブログ一覧のページの配置をどのようにするか選択できます。</p></div>
</div><div data-element-id="elm_DGs709JDhb18IsK_agy0eg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width: 306px !important ; height: 460px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:306px ; height:460px ; } } @media (max-width: 767px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:306px ; height:460px ; } } [data-element-id="elm_DGs709JDhb18IsK_agy0eg"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut79.png" width="306" height="460" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg"] div.zpspacer { height:21px; } @media (max-width: 768px) { div[data-element-id="elm_6WGxOzRYQrwDHt1v-riCWg"] div.zpspacer { height:calc(21px / 3); } } </style><div class="zpspacer " data-height="21"></div>
</div><div data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading h2.zpicon-heading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:700; } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"].zpelem-iconheading{ border-radius:1px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common svg{ fill:#FFFFFF !important } [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-bgfill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-circle-fill, [data-element-id="elm_1Z1mvXl8uxn2ga7wo8-BIA"] .zpicon-common.zpicon-style-roundcorner-fill{ background:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-circle-fill "><svg viewBox="0 0 352 512" height="352" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg></span><h2 class="zpicon-heading " data-editor="true">ポイント</h2></div>
</div><div data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"].zpelem-divider{ border-radius:1px; margin-block-start:-17px; } </style><style> [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:after, [data-element-id="elm_Re1TtXYbO3798k7NlWYhrQ"] .zpdivider-container .zpdivider-common:before{ border-color:rgba(0,0,0,0.3) } </style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-dotted "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_MRHBj-X1_HfXxLEQiWJVGA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_MRHBj-X1_HfXxLEQiWJVGA"].zpelem-text { border-radius:1px; margin-block-start:0px; } </style><div class="zptext zptext-align-left " data-editor="true"><ul><li><span style="color:inherit;">テンプレートによって選択できるレイアウトは変わる場合があります。</span></li><li>ブログリストからそれぞれのブログを見るには「<span style="color:rgb(243, 156, 18);">Read more</span>」をクリックします。</li><li>読者は、カテゴリーやタグを利用して自分が読みたい記事にたどり着きやすくなります。</li></ul></div>
</div></div><div data-element-id="elm_psKpPyg3NouvP4JHcWkBZA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-8 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_psKpPyg3NouvP4JHcWkBZA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw"].zpelem-text { color:#F39C12 ; font-family:'Noto Sans',sans-serif; font-size:18px; font-weight:700; border-radius:1px; } [data-element-id="elm_EJjRoP6HpQ8JOKETduuHBw"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ color:#F39C12 ; font-family:'Noto Sans',sans-serif; font-size:18px; font-weight:700; } </style><div class="zptext zptext-align-center " data-editor="true"><p>例：ブログリスト左上のレイアウトを選択した場合</p></div>
</div><div data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width: 730px ; height: 1457.26px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:723px ; height:1443.29px ; } } @media (max-width: 767px) { [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure img { width:415px ; height:828.44px ; } } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure:hover figcaption , [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container[class*='zpimage-overlay-effect-'] figure figcaption { background:rgba(52,152,219,0.7) ; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"] .zpimage-container figure figcaption .zpimage-caption-content { color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:700; } [data-element-id="elm_KwmZhthQ2b1jo5_HqWMxIg"].zpelem-image { border-style:solid; border-color:rgba(0,0,0,0.3) !important; border-width:1px; border-radius:1px; box-shadow:2px 2px 4px 0px rgba(0,0,0,0.3); } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut80.png" width="415" height="828.44" loading="lazy" size="fit" alt="ブログリストのレイアウト例"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_794MEJLOXH3yIeWpU9aLRg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:20px; } @media (max-width: 768px) { div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:calc(20px / 3); } } </style><div class="zpspacer " data-height="20"></div>
</div><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Wed, 28 Sep 2022 12:06:02 +0900</pubDate></item><item><title><![CDATA[バナー（ヒーロースライド）]]></title><link>https://www.opdweb.jp/blogs/post/banner-layout</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。バナー（メインビジュアル）の表示方法について解説します。Zoho Sitesでは、メインビジュアルのことをヒーローバナーと呼んでいます。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Xd6rlkeA-7J7f0C3X72vJA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_C_mKzFHGOLAoaOKnBFJPEw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw"].zpelem-text { border-radius:1px; margin-block-start:5px; } </style><div class="zptext zptext-align-left " data-editor="true"><p style="text-align:center;">バナー（ヒーロースライド）の表示方法を設定できます。</p></div>
</div><div data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:24px; } @media (max-width: 768px) { div[data-element-id="elm_qEiXLJkwQWSVtWWEQoSGHg"] div.zpspacer { height:calc(24px / 3); } } </style><div class="zpspacer " data-height="24"></div>
</div></div></div><div data-element-id="elm_eBi_xE3GIJapHBRidoRziQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_eBi_xE3GIJapHBRidoRziQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_OUzOqthtui8iXz4jZoVD_g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-4 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_OUzOqthtui8iXz4jZoVD_g"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_MBaW6954lY2t71y6UV-Ohw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_MBaW6954lY2t71y6UV-Ohw"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_MBaW6954lY2t71y6UV-Ohw"].zpelem-heading { border-radius:1px; } [data-element-id="elm_MBaW6954lY2t71y6UV-Ohw"] .zpheading:after,[data-element-id="elm_MBaW6954lY2t71y6UV-Ohw"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_TJC2HNSNJOB9aqr-BBIIsA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_TJC2HNSNJOB9aqr-BBIIsA"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Banner]をクリックします。</li><li>お好みのスタイルを選択します。</li></ol></div>
</div></div><div data-element-id="elm_2_3N0LPhrXGDoxnqR2tSug" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-8 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_2_3N0LPhrXGDoxnqR2tSug"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_DGs709JDhb18IsK_agy0eg" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width: 320px !important ; height: 636px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:320px ; height:636px ; } } @media (max-width: 767px) { [data-element-id="elm_DGs709JDhb18IsK_agy0eg"] .zpimage-container figure img { width:320px ; height:636px ; } } [data-element-id="elm_DGs709JDhb18IsK_agy0eg"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut75.png" width="320" height="636" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_Z2kMwzS-Le449nILJQazig" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Z2kMwzS-Le449nILJQazig"].zprow{ border-radius:1px; } </style><div data-element-id="elm_XE-ANke52t7itmYbUG5RmQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_XE-ANke52t7itmYbUG5RmQ"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_6CipN6KHLW43fiEilzrjpA" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_6CipN6KHLW43fiEilzrjpA"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_6CipN6KHLW43fiEilzrjpA"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div></div></div><div data-element-id="elm_qLwQJB-fautCEdt4brqlQA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_qLwQJB-fautCEdt4brqlQA"].zprow{ background-color:rgba(206,224,243,0.5); background-image:unset; border-radius:1px; padding-block-start:7px; padding-block-end:13px; } </style><div data-element-id="elm_psKpPyg3NouvP4JHcWkBZA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_psKpPyg3NouvP4JHcWkBZA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ" data-element-type="imageheadingtext" class="zpelement zpelem-imageheadingtext "><style> @media (min-width: 992px) { [data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ"] .zpimageheadingtext-container figure img { width: 500px ; height: 267.12px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ"] .zpimageheadingtext-container figure img { width:500px ; height:267.12px ; } } @media (max-width: 767px) { [data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ"] .zpimageheadingtext-container figure img { width:500px ; height:267.12px ; } } [data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ"].zpelem-imageheadingtext h3.zpimage-heading{ font-family:'Noto Sans',sans-serif; font-size:23px; font-weight:700; } [data-element-id="elm_TMXu3mEgBPJI1jq0Ivo5TQ"].zpelem-imageheadingtext{ border-style:none; border-radius:1px; } </style><div data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimageheadingtext-container zpimage-with-text-container zpimage-align-left zpimage-size-medium zpimage-tablet-fallback-medium zpimage-mobile-fallback-medium "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut76.png" width="500" height="267.12" loading="lazy" size="medium" data-lightbox="false"/></picture></span></figure><div class="zpimage-headingtext-container"><h3 class="zpimage-heading zpimage-text-align-left " data-editor="true">Full Width​(全幅)​​​​​​</h3><div class="zpimage-text zpimage-text-align-left " data-editor="true"><p>バナーを横幅いっぱいに表示します。</p></div>
</div></div></div><div data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA" data-element-type="imageheadingtext" class="zpelement zpelem-imageheadingtext "><style> @media (min-width: 992px) { [data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA"] .zpimageheadingtext-container figure img { width: 500px ; height: 268.26px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA"] .zpimageheadingtext-container figure img { width:500px ; height:268.26px ; } } @media (max-width: 767px) { [data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA"] .zpimageheadingtext-container figure img { width:500px ; height:268.26px ; } } [data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA"].zpelem-imageheadingtext h3.zpimage-heading{ font-family:'Noto Sans',sans-serif; font-size:23px; font-weight:700; } [data-element-id="elm_4-fUSCKjJYzi4u9cG5HfqA"].zpelem-imageheadingtext{ border-radius:1px; } </style><div data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimageheadingtext-container zpimage-with-text-container zpimage-align-left zpimage-size-medium zpimage-tablet-fallback-medium zpimage-mobile-fallback-medium "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut77.png" width="500" height="268.26" loading="lazy" size="medium" data-lightbox="false"/></picture></span></figure><div class="zpimage-headingtext-container"><h3 class="zpimage-heading zpimage-text-align-left " data-editor="true">Boxed​(ボックス)​​​​​​</h3><div class="zpimage-text zpimage-text-align-left " data-editor="true"><p>ボックスに入っているような枠のある表示です。</p></div>
</div></div></div><div data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA" data-element-type="imageheadingtext" class="zpelement zpelem-imageheadingtext "><style> @media (min-width: 992px) { [data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA"] .zpimageheadingtext-container figure img { width: 500px ; height: 288.29px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA"] .zpimageheadingtext-container figure img { width:500px ; height:288.29px ; } } @media (max-width: 767px) { [data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA"] .zpimageheadingtext-container figure img { width:500px ; height:288.29px ; } } [data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA"].zpelem-imageheadingtext h3.zpimage-heading{ font-family:'Noto Sans',sans-serif; font-size:23px; font-weight:700; } [data-element-id="elm_7KqNcNE5IKnfet3SLQ55mA"].zpelem-imageheadingtext{ border-radius:1px; } </style><div data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimageheadingtext-container zpimage-with-text-container zpimage-align-left zpimage-size-medium zpimage-tablet-fallback-medium zpimage-mobile-fallback-medium "><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut78.png" width="500" height="288.29" loading="lazy" size="medium" data-lightbox="false"/></picture></span></figure><div class="zpimage-headingtext-container"><h3 class="zpimage-heading zpimage-text-align-left " data-editor="true">Full Screen​<br>(フルスクリーン)​​​​​​</h3><div class="zpimage-text zpimage-text-align-left " data-editor="true"><p>バナーを画面いっぱいに表示します。</p></div>
</div></div></div></div></div><div data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_794MEJLOXH3yIeWpU9aLRg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:20px; } @media (max-width: 768px) { div[data-element-id="elm_794MEJLOXH3yIeWpU9aLRg"] div.zpspacer { height:calc(20px / 3); } } </style><div class="zpspacer " data-height="20"></div>
</div><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 22 Sep 2022 14:48:49 +0900</pubDate></item><item><title><![CDATA[ビジュアルエディター]]></title><link>https://www.opdweb.jp/blogs/post/visual-editer</link><description><![CDATA[ビジュアルエディターは、テンプレートを好きなようにスタイリングします。複雑なコードを使用せずに、プリセットカラー、ヘッダーレイアウト、バナーレイアウトなどのプロパティを変更できます。ビジュアルエディタを開いて、目的のオプションを選択するだけです。さらに、[高度なビジュアルエディター]ではより細かいスタイリングが行えます。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_jUvBtZpsA4KRae6OhcgBTw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_jUvBtZpsA4KRae6OhcgBTw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_rCeP2_lJiYV_tiwgI1yXVw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rCeP2_lJiYV_tiwgI1yXVw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_P8l9tc3kmNwmlKcHJgnGaQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_P8l9tc3kmNwmlKcHJgnGaQ"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div><p><span style="color:inherit;">ビジュアルエディターは、テンプレートを好きなようにスタイリングします。複雑なコードを使用せずに、プリセットカラー、ヘッダーレイアウト、バナーレイアウトなどのプロパティを変更できます。ビジュアルエディタを開いて、目的のオプションを選択するだけです。さらに、[高度なビジュアルエディター]ではより細かいスタイリングが行えます。<a href="#%C2%A0visual-editer" rel="">&gt;&gt;ビジュアルエディターの基本操作はこちら</a></span><br></p></div><div></div></div></div>
</div></div></div></div></div><div data-element-id="elm_U20sd0pCwbly5bezWNfmEw" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_U20sd0pCwbly5bezWNfmEw"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_cCd0BiiRo5orU1C4V7gHrg" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_cCd0BiiRo5orU1C4V7gHrg"].zprow{ border-radius:1px; } </style><div data-element-id="elm_5Ozp2I17-gZg034jf_3bFQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_5Ozp2I17-gZg034jf_3bFQ"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_r48697ZiY9i36RBsA2-SoA" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_r48697ZiY9i36RBsA2-SoA"] div.zpspacer { height:10px; } @media (max-width: 768px) { div[data-element-id="elm_r48697ZiY9i36RBsA2-SoA"] div.zpspacer { height:calc(10px / 3); } } </style><div class="zpspacer " data-height="10"></div>
</div><div data-element-id="elm_aXNvHlmr6hrVZh9OpOjc2Q" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_aXNvHlmr6hrVZh9OpOjc2Q"].zprow{ background-color:rgba(206,224,243,0.5); background-image:unset; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:1px; padding-block-end:15px; } </style><div data-element-id="elm_a5olieDZpRJu5lp2KzoHjg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_a5olieDZpRJu5lp2KzoHjg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iLnaaTH0pjlZEEpi3eQO0g" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_iLnaaTH0pjlZEEpi3eQO0g"] h2.zpheading{ color:#3498DB ; font-family:'Noto Sans',sans-serif; font-size:26px; font-weight:700; line-height:32px; } [data-element-id="elm_iLnaaTH0pjlZEEpi3eQO0g"].zpelem-heading { border-radius:1px; } [data-element-id="elm_iLnaaTH0pjlZEEpi3eQO0g"] .zpheading:after,[data-element-id="elm_iLnaaTH0pjlZEEpi3eQO0g"] .zpheading:before{ background-color:#3498DB !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-center " data-editor="true">ビジュアルエディターのメニュー<br></h2></div>
<div data-element-id="elm_Csx6Lz7qApQsPj75xaCOAw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_Csx6Lz7qApQsPj75xaCOAw"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-center " data-editor="true"><p>・<span style="text-decoration-line:underline;"><a href="http://www.opdweb.jp/blogs/post/presets" title="プリセット" rel="">プリセット</a></span>　・<span style="text-decoration-line:underline;"><a href="http://www.opdweb.jp/blogs/post/header" title="ヘッダー" rel="">ヘッダー</a></span>　・<span style="text-decoration-line:underline;"><a href="http://www.opdweb.jp/blogs/post/banner-layout" title="バナー" rel="">バナー</a></span>　・<span style="text-decoration-line:underline;"><a href="http://www.opdweb.jp/blogs/post/bloglist" title="ブログリスト" rel="">ブログリスト</a></span>　・<span style="text-decoration-line:underline;"><a href="http://www.opdweb.jp/blogs/post/blogpost" title="ブログポスト" rel="">ブログポスト</a></span><span style="color:inherit;">　・<a href="http://www.opdweb.jp/blogs/post/breadcrumb" title="パンくずリスト" rel="" style="text-decoration-line:underline;">パンくずリスト</a></span></p></div>
</div></div><div data-element-id="elm_ceVGPLnE4whH-VBvHBFFUw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_ceVGPLnE4whH-VBvHBFFUw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_IAuDwDfa9NZep0FwlpuqIQ" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_IAuDwDfa9NZep0FwlpuqIQ"].zpelem-button{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-weight:400; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_IAuDwDfa9NZep0FwlpuqIQ"] .zpbutton.zpbutton-type-primary{ background-color:rgba(255,255,255,1) !important; color:#E6326E !important; font-family:'Noto Sans',sans-serif; font-weight:400; border-style:solid; border-color:#E6326E !important; border-width:1px; border-radius:16px; } [data-element-id="elm_IAuDwDfa9NZep0FwlpuqIQ"] .zpbutton[class*="zpbutton-type-"].zpbutton-outline{ border-color:#E6326E; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none zpbutton-outline " href="javascript:;" target="_blank"><span class="zpbutton-content">高度なビジュアルエディターはこちら</span></a></div>
</div></div></div><div data-element-id="elm_82uAFZv4IAuEqEAnHR6lpg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_82uAFZv4IAuEqEAnHR6lpg"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_82uAFZv4IAuEqEAnHR6lpg"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_apuU7SNq8whmdbEwgQ6EFA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_apuU7SNq8whmdbEwgQ6EFA"] h3.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:26px; font-weight:700; } [data-element-id="elm_apuU7SNq8whmdbEwgQ6EFA"].zpelem-heading { border-radius:1px; } [data-element-id="elm_apuU7SNq8whmdbEwgQ6EFA"] .zpheading:after,[data-element-id="elm_apuU7SNq8whmdbEwgQ6EFA"] .zpheading:before{ background-color:#E6326E !important; } </style><h3
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="color:inherit;">ビジュアルエディターの基本操作<span title="&nbsp;visual-editer" class="zpItemAnchor"></span>​&nbsp;</span></h3></div>
<div data-element-id="elm_Bt49zLN_yFCWNnn8fo5oRQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_Bt49zLN_yFCWNnn8fo5oRQ"].zpelem-text { border-radius:1px; margin-block-start:10px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><p style="line-height:1.5;"><span style="font-weight:700;"><span></span>ビジュアルエディターにアクセスするには：</span></p><div style="color:inherit;"><ol><li>編集画面の右上にある<span style="font-weight:700;">[パレットのアイコン<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">]</span>をクリックします。</li><li>カスタマイズが完了したら、右下にある<span style="font-weight:700;">[保存]</span>をクリックします。<br></li></ol></div></div></div>
</div><div data-element-id="elm_924do3-KBNqjVqnaoyUsaA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_924do3-KBNqjVqnaoyUsaA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_YhB744tV8QJoD3Ir_ebM8A" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_YhB744tV8QJoD3Ir_ebM8A"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Isp81zfOFcpQoEgU5JG6YA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_Isp81zfOFcpQoEgU5JG6YA"] .zpimage-container figure img { width: 540px ; height: 346.72px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Isp81zfOFcpQoEgU5JG6YA"] .zpimage-container figure img { width:723px ; height:464.21px ; } } @media (max-width: 767px) { [data-element-id="elm_Isp81zfOFcpQoEgU5JG6YA"] .zpimage-container figure img { width:415px ; height:266.46px ; } } [data-element-id="elm_Isp81zfOFcpQoEgU5JG6YA"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut21.png" width="415" height="266.46" loading="lazy" size="fit" data-lightbox="true"/></picture></span></figure></div>
</div></div><div data-element-id="elm_LT3qEkeidh2sOYIH3PQi9g" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_LT3qEkeidh2sOYIH3PQi9g"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_AQ2l0GYtBsQ6YQYEdwfWSA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_AQ2l0GYtBsQ6YQYEdwfWSA"] .zpimage-container figure img { width: 331px !important ; height: 567px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_AQ2l0GYtBsQ6YQYEdwfWSA"] .zpimage-container figure img { width:331px ; height:567px ; } } @media (max-width: 767px) { [data-element-id="elm_AQ2l0GYtBsQ6YQYEdwfWSA"] .zpimage-container figure img { width:331px ; height:567px ; } } [data-element-id="elm_AQ2l0GYtBsQ6YQYEdwfWSA"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="center" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-center zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut81.png" width="331" height="567" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div></div></div><div data-element-id="elm_n1kVWUaPk9jorgVPb-xX5w" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_n1kVWUaPk9jorgVPb-xX5w"].zpelem-iconheading{ border-radius:1px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_n1kVWUaPk9jorgVPb-xX5w"] .zpicon-common svg{ fill:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-none "><svg viewBox="0 0 512 512" height="512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"></path></svg></span><h4 class="zpicon-heading " data-editor="true"><span style="color:inherit;font-size:16px;">行った変更は、プレビューのように即座に画面上で確認することができます。</span><br></h4></div>
</div><div data-element-id="elm_SFKhrElTgjCaOIeUb2l8Bw" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_SFKhrElTgjCaOIeUb2l8Bw"].zpelem-iconheading{ border-radius:1px; margin-block-start:2px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_SFKhrElTgjCaOIeUb2l8Bw"] .zpicon-common svg{ fill:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-none "><svg viewBox="0 0 512 512" height="512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"></path></svg></span><h4 class="zpicon-heading " data-editor="true"><div><div><div><span style="font-size:16px;">カスタマイズを確定させるには、[<span style="font-weight:700;">保存</span>] をクリックして変更を保存します。[<span style="font-weight:700;">リセット</span>] をクリックしてデフォルト設定に戻すことができます。</span><br></div></div></div></h4></div>
</div><div data-element-id="elm_033ReRtTJzvzs2I-B4z7OQ" data-element-type="iconHeading" class="zpelement zpelem-iconheading "><style type="text/css"> [data-element-id="elm_033ReRtTJzvzs2I-B4z7OQ"].zpelem-iconheading{ border-radius:1px; margin-block-start:2px; } </style><div class="zpicon-container zpicon-align-left "><style>[data-element-id="elm_033ReRtTJzvzs2I-B4z7OQ"] .zpicon-common svg{ fill:#E6326E !important }</style><span class="zpicon zpicon-common zpicon-anchor zpicon-size-md zpicon-style-none "><svg viewBox="0 0 512 512" height="512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"></path></svg></span><h4 class="zpicon-heading " data-editor="true"><div><div><div><span style="font-size:16px;">元に戻す場合は、[<span style="font-weight:700;">リセット</span>] をクリックします。</span><br></div></div></div></h4></div>
</div><div data-element-id="elm_Drt7PraeYkLswBHyan8RUg" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_Drt7PraeYkLswBHyan8RUg"].zpelem-divider{ border-radius:1px; margin-block-start:33px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:8px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(8px / 3); } } </style><div class="zpspacer " data-height="8"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 22 Sep 2022 12:18:46 +0900</pubDate></item><item><title><![CDATA[プリセット]]></title><link>https://www.opdweb.jp/blogs/post/presets</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。プリセットでは、サイト全体の配色とフォント設定ができます。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"></style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_jUvBtZpsA4KRae6OhcgBTw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_jUvBtZpsA4KRae6OhcgBTw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_rCeP2_lJiYV_tiwgI1yXVw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rCeP2_lJiYV_tiwgI1yXVw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_-oS4ppGRxwnzberqfLf1_Q" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_-oS4ppGRxwnzberqfLf1_Q"] div.zpspacer { height:26px; } @media (max-width: 768px) { div[data-element-id="elm_-oS4ppGRxwnzberqfLf1_Q"] div.zpspacer { height:calc(26px / 3); } } </style><div class="zpspacer " data-height="26"></div>
</div><div data-element-id="elm_8UwKL2slEp8GLidnfZmWWA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_8UwKL2slEp8GLidnfZmWWA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_ePi133T4_GZLQe09HDC3HQ" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_ePi133T4_GZLQe09HDC3HQ"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_0LhQKFm81kLyquhmoIoIOQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_0LhQKFm81kLyquhmoIoIOQ"].zpelem-text { border-radius:1px; margin-block-start:7px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="color:inherit;">プリセットでは、ホームページの</span><span style="color:rgb(230, 50, 110);font-weight:700;">配色</span><span style="color:inherit;">と</span><span style="color:rgb(230, 50, 110);font-weight:700;">フォント</span><span style="color:inherit;">が設定できます</span><span style="color:inherit;">。用意されている配色から選択することも、自分で色をカスタマイズすることもできます。</span></p></div>
</div><div data-element-id="elm_-AUlCMUwqkfcjSq2ZjW3ZQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_-AUlCMUwqkfcjSq2ZjW3ZQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xFoXQWwPaVezdlFz_OxxlA" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xFoXQWwPaVezdlFz_OxxlA"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_tV9a3CEBC7y9Ahu1ql1jnQ" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_tV9a3CEBC7y9Ahu1ql1jnQ"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_tV9a3CEBC7y9Ahu1ql1jnQ"].zpelem-heading { border-radius:1px; } [data-element-id="elm_tV9a3CEBC7y9Ahu1ql1jnQ"] .zpheading:after,[data-element-id="elm_tV9a3CEBC7y9Ahu1ql1jnQ"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_x8KgHkwuN4OeCvhhiI1btQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_x8KgHkwuN4OeCvhhiI1btQ"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Presets]をクリックします。</li><li>お好みの配色を選択します。</li></ol></div>
</div><div data-element-id="elm_YCsH3JDCcK-EoHAZjzlclQ" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_YCsH3JDCcK-EoHAZjzlclQ"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_k2Z7Dq6KN9Z9BfMQZbwX1Q" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_k2Z7Dq6KN9Z9BfMQZbwX1Q"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="font-weight:700;">用意されている配色から選択するには：</span></p></div>
</div><div data-element-id="elm_uFrvZpHNaGM1Ti8O7VfjRA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_uFrvZpHNaGM1Ti8O7VfjRA"].zpelem-text { font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; border-radius:1px; margin-block-start:12px; } [data-element-id="elm_uFrvZpHNaGM1Ti8O7VfjRA"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;line-height:2;"><div style="color:inherit;"><div style="color:inherit;line-height:1;"><span style="color:inherit;">ビジュアルディターの[</span><span style="color:inherit;font-weight:700;">Presets</span><span style="color:inherit;">]の好きな配色を選択します。</span><br></div></div></div></div></div></div></div></div>
</div><div data-element-id="elm_YxU3OiOZL32vsieQ1oI9qA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_YxU3OiOZL32vsieQ1oI9qA"] .zpimage-container figure img { width: 325px !important ; height: 569px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_YxU3OiOZL32vsieQ1oI9qA"] .zpimage-container figure img { width:325px ; height:569px ; } } @media (max-width: 767px) { [data-element-id="elm_YxU3OiOZL32vsieQ1oI9qA"] .zpimage-container figure img { width:325px ; height:569px ; } } [data-element-id="elm_YxU3OiOZL32vsieQ1oI9qA"].zpelem-image { border-style:none; border-radius:1px; margin-block-start:8px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut70.png" width="325" height="569" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_q4VFFxhFyj8uofSOux8olg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_q4VFFxhFyj8uofSOux8olg"] div.zpspacer { height:8px; } @media (max-width: 768px) { div[data-element-id="elm_q4VFFxhFyj8uofSOux8olg"] div.zpspacer { height:calc(8px / 3); } } </style><div class="zpspacer " data-height="8"></div>
</div><div data-element-id="elm_qUGd-cyaaAMHz3kKDy90gA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_qUGd-cyaaAMHz3kKDy90gA"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="font-weight:700;">自分で配色をカスタマイズするには：</span></p></div>
</div><div data-element-id="elm_AZZVqUt_f4-3QtoBBH4qKQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_AZZVqUt_f4-3QtoBBH4qKQ"].zpelem-text { font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; border-radius:1px; margin-block-start:8px; } [data-element-id="elm_AZZVqUt_f4-3QtoBBH4qKQ"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;line-height:2;"><div style="color:inherit;"><div style="color:inherit;line-height:1;"><div style="color:inherit;line-height:1;"><div style="color:inherit;"><div style="color:inherit;line-height:1.5;"><span style="color:inherit;">[</span><span style="color:inherit;">Presets</span><span style="color:inherit;">]の[<span style="font-weight:700;">Costom Values</span>]を選択すると、カラーが個別に設定できます。各色がホームページのどの部分に対応するかはテンプレートによって異なります。確認しながら設定して下さい。</span></div></div></div></div></div></div></div></div></div></div></div>
</div><div data-element-id="elm_MKx6fdWfEqEXnMKd0d6n7A" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_MKx6fdWfEqEXnMKd0d6n7A"] div.zpspacer { height:3px; } @media (max-width: 768px) { div[data-element-id="elm_MKx6fdWfEqEXnMKd0d6n7A"] div.zpspacer { height:calc(3px / 3); } } </style><div class="zpspacer " data-height="3"></div>
</div><div data-element-id="elm_YEnLJZi0j78xOjqu6QAqHA" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_YEnLJZi0j78xOjqu6QAqHA"].zpelem-text { border-radius:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><p><span style="font-weight:700;">フォント設定：</span></p></div>
</div><div data-element-id="elm_zLpuMrS0CWZ8t8sAuNjUeg" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_zLpuMrS0CWZ8t8sAuNjUeg"].zpelem-text { font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; border-radius:1px; margin-block-start:3px; } [data-element-id="elm_zLpuMrS0CWZ8t8sAuNjUeg"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;"><div style="color:inherit;line-height:2;"><div style="color:inherit;"><div style="color:inherit;line-height:1;"><div style="color:inherit;line-height:1;"><div style="color:inherit;"><div style="color:inherit;line-height:1.5;"><p style="line-height:1.2;">ホームページ全体のフォントを設定できます。</p><ul><li style="line-height:1.5;">Base Font: 文章のフォント</li><li>Heading Font: 見出しのフォント</li></ul></div></div></div></div></div></div></div></div></div></div></div>
</div><div data-element-id="elm_oen6l6J8fg4jjq3BiciZoA" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_oen6l6J8fg4jjq3BiciZoA"] .zpimage-container figure img { width: 319px !important ; height: 661px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_oen6l6J8fg4jjq3BiciZoA"] .zpimage-container figure img { width:319px ; height:661px ; } } @media (max-width: 767px) { [data-element-id="elm_oen6l6J8fg4jjq3BiciZoA"] .zpimage-container figure img { width:319px ; height:661px ; } } [data-element-id="elm_oen6l6J8fg4jjq3BiciZoA"].zpelem-image { border-style:none; border-radius:1px; margin-block-start:8px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut71.png" width="319" height="661" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_J3Drvjkx50Dhf2Ycab0IOw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_J3Drvjkx50Dhf2Ycab0IOw"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_J3Drvjkx50Dhf2Ycab0IOw"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 22 Sep 2022 11:55:15 +0900</pubDate></item><item><title><![CDATA[ヘッダー]]></title><link>https://www.opdweb.jp/blogs/post/presets1</link><description><![CDATA[Zoho Sitesチュートリアル！ビジュアルエディターで変更内容がどのように反映されるか確認しながら設定ができます。プリセットでは、サイト全体の配色とフォント設定ができます。]]></description><content:encoded><![CDATA[<div class="zpcontent-container blogpost-container "><div data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_rDPrOS4HH3AcoL3m4cXAew"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_zTZK1sq2xfBR3jVX9jxU0A" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_zTZK1sq2xfBR3jVX9jxU0A"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Ugna1a3S8M7ocL1RNsP-Zg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Ugna1a3S8M7ocL1RNsP-Zg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_JyO6A1tHeMUQm4x5v6UZvw" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_JyO6A1tHeMUQm4x5v6UZvw"].zprow{ border-radius:1px; } </style><div data-element-id="elm_MpbOl3Y941kA7UM0hh70Mw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_MpbOl3Y941kA7UM0hh70Mw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Oc5pQwj0B4e9nL2GR-F4IA" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_Oc5pQwj0B4e9nL2GR-F4IA"].zprow{ border-radius:1px; } </style><div data-element-id="elm_YOSvb0KDrliAflRWxLOgYw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_YOSvb0KDrliAflRWxLOgYw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_KqaOQ-Vr2nssf_t3D3EUdw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_KqaOQ-Vr2nssf_t3D3EUdw"] h2.zpheading{ color:#E6326E ; font-family:'Noto Sans',sans-serif; font-size:24px; font-weight:700; } [data-element-id="elm_KqaOQ-Vr2nssf_t3D3EUdw"].zpelem-heading { border-radius:1px; } [data-element-id="elm_KqaOQ-Vr2nssf_t3D3EUdw"] .zpheading:after,[data-element-id="elm_KqaOQ-Vr2nssf_t3D3EUdw"] .zpheading:before{ background-color:#E6326E !important; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">ビジュアルエディターの起動</h2></div>
<div data-element-id="elm_V8oRTQ33nvtFn_QvfUACiw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_V8oRTQ33nvtFn_QvfUACiw"].zpelem-text { border-radius:1px; margin-block-start:1px; } </style><div class="zptext zptext-align-left " data-editor="true"><ol><li>編集画面右側のビジュアルディター<img src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E3%83%92%E3%82%99%E3%82%B7%E3%82%99%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%86%E3%82%99%E3%82%A3%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png">を起動します。</li><li>[Header]をクリックします。</li><li>お好みのスタイルを選択します。</li></ol></div>
</div><div data-element-id="elm_KVsSxaWEwFXYEIhkxHib9w" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_KVsSxaWEwFXYEIhkxHib9w"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div></div></div><div data-element-id="elm_KGc_1DS-dtHaUgpDN4ppqw" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_KGc_1DS-dtHaUgpDN4ppqw"] h2.zpheading{ font-family:'Noto Sans',sans-serif; font-size:26px; font-weight:700; } [data-element-id="elm_KGc_1DS-dtHaUgpDN4ppqw"].zpelem-heading { border-radius:1px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">Header Style（ヘッダースタイル）</h2></div>
<div data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_R25hVoyyFoJBCqpbt-EPFw"].zpelem-text { border-radius:1px; margin-block-start:5px; } </style><div class="zptext zptext-align-left " data-editor="true"><p>ロゴやサイト名、メニューのレイアウトを設定できます。クリックして試してみることができます。</p></div>
</div><div data-element-id="elm_QBtUgHTu45Sl9WQolBaWhw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_QBtUgHTu45Sl9WQolBaWhw"] .zpimage-container figure img { width: 318px !important ; height: 313px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_QBtUgHTu45Sl9WQolBaWhw"] .zpimage-container figure img { width:318px ; height:313px ; } } @media (max-width: 767px) { [data-element-id="elm_QBtUgHTu45Sl9WQolBaWhw"] .zpimage-container figure img { width:318px ; height:313px ; } } [data-element-id="elm_QBtUgHTu45Sl9WQolBaWhw"].zpelem-image { border-style:none; border-radius:1px; margin-block-start:8px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut72.png" width="318" height="313" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_InrO9KneDxdphw-h4mNJ6A" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_InrO9KneDxdphw-h4mNJ6A"] div.zpspacer { height:28px; } @media (max-width: 768px) { div[data-element-id="elm_InrO9KneDxdphw-h4mNJ6A"] div.zpspacer { height:calc(28px / 3); } } </style><div class="zpspacer " data-height="28"></div>
</div><div data-element-id="elm_udhFvQ4a_lMPPEjmgQZpIA" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_udhFvQ4a_lMPPEjmgQZpIA"] h2.zpheading{ font-family:'Noto Sans',sans-serif; font-size:26px; font-weight:700; } [data-element-id="elm_udhFvQ4a_lMPPEjmgQZpIA"].zpelem-heading { border-radius:1px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true"><span style="color:inherit;">Header On Scrolling（ヘッダーのスクロール設定）</span></h2></div>
<div data-element-id="elm_nG8wSGb14bJcOYUgTTDnHQ" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_nG8wSGb14bJcOYUgTTDnHQ"].zpelem-text { font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; border-radius:1px; margin-block-start:5px; } [data-element-id="elm_nG8wSGb14bJcOYUgTTDnHQ"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; } </style><div class="zptext zptext-align-left " data-editor="true"><div><div><div><div><div style="line-height:2;"><div><div style="line-height:1;"><div style="line-height:1;"><div><div style="line-height:1.5;"><ul><li style="color:inherit;"><span style="font-weight:700;">Fixed</span>：スクロールすると、ヘッダーはそのまま上に行きます。<br></li><li><span style="color:inherit;font-weight:700;">Floating</span><span style="color:inherit;">：フローティングメニュー（追従型）。メニューがディスプレイの</span><span style="color:rgb(230, 50, 110);">上に固定</span><span style="color:inherit;">されて表示されます。</span><br></li><li><span style="color:inherit;"><span style="font-weight:700;">Transparent</span>：フローティングメニューの背景が</span><span style="color:rgb(230, 50, 110);">半透明</span><span style="color:inherit;">で表示されます。</span><br></li></ul></div></div></div></div></div></div></div></div></div></div></div>
</div><div data-element-id="elm_kPCZLsW2QlfG75ivITCkxw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_kPCZLsW2QlfG75ivITCkxw"] div.zpspacer { height:3px; } @media (max-width: 768px) { div[data-element-id="elm_kPCZLsW2QlfG75ivITCkxw"] div.zpspacer { height:calc(3px / 3); } } </style><div class="zpspacer " data-height="3"></div>
</div><div data-element-id="elm_t7FAQZAtDAZmROyknSWV1A" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_t7FAQZAtDAZmROyknSWV1A"] .zpimage-container figure img { width: 308px !important ; height: 149px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_t7FAQZAtDAZmROyknSWV1A"] .zpimage-container figure img { width:308px ; height:149px ; } } @media (max-width: 767px) { [data-element-id="elm_t7FAQZAtDAZmROyknSWV1A"] .zpimage-container figure img { width:308px ; height:149px ; } } [data-element-id="elm_t7FAQZAtDAZmROyknSWV1A"].zpelem-image { border-style:none; border-radius:1px; margin-block-start:-6px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut73.png" width="308" height="149" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_ZpP7kHQ9AmXWfbMeNp_T4A" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_ZpP7kHQ9AmXWfbMeNp_T4A"] div.zpspacer { height:22px; } @media (max-width: 768px) { div[data-element-id="elm_ZpP7kHQ9AmXWfbMeNp_T4A"] div.zpspacer { height:calc(22px / 3); } } </style><div class="zpspacer " data-height="22"></div>
</div><div data-element-id="elm_Idt312nG6fRncQxpIBq4qg" data-element-type="heading" class="zpelement zpelem-heading "><style> [data-element-id="elm_Idt312nG6fRncQxpIBq4qg"] h2.zpheading{ font-family:'Noto Sans',sans-serif; font-size:26px; font-weight:700; } [data-element-id="elm_Idt312nG6fRncQxpIBq4qg"].zpelem-heading { border-radius:1px; } </style><h2
 class="zpheading zpheading-style-none zpheading-align-left " data-editor="true">その他の設定</h2></div>
<div data-element-id="elm_7nwcjrmK3VkibQkcJHxM1g" data-element-type="text" class="zpelement zpelem-text "><style> [data-element-id="elm_7nwcjrmK3VkibQkcJHxM1g"].zpelem-text { font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; border-radius:1px; margin-block-start:5px; } [data-element-id="elm_7nwcjrmK3VkibQkcJHxM1g"].zpelem-text :is(h1,h2,h3,h4,h5,h6){ font-family:'Noto Sans',sans-serif; font-size:16px; font-weight:400; line-height:20px; } </style><div class="zptext zptext-align-left " data-editor="true"><div style="line-height:2;"><div style="line-height:1;"><div style="line-height:1;"><div style="line-height:1.5;"><ul><li><span style="font-weight:700;">Social Icon Floater(ソーシャルアイコン表示)</span>：ページの上・下・右のどこかにソーシャルアイコンを表示させておくことができます。<br></li><li><span style="font-weight:700;">Logo in Mobile（ロゴのモバイル表示）</span>: スマホ表示のときに、サイトのロゴを表示させます。</li><li><span style="font-weight:700;">Sub-heading in Mobile&nbsp;</span>:&nbsp;スマホ表示のときに、サイトのサブ見出しを表示させます。<br></li><li><span style="color:inherit;font-weight:700;">Header Fixed in Mobile</span><span style="font-weight:700;">&nbsp;</span>:&nbsp;スマホ表示で、下にスクロールした時ヘッダーを上に固定しておくことができます。</li></ul></div></div></div></div></div>
</div><div data-element-id="elm_Et9zxtdy9dy3x0UI4fNduw" data-element-type="image" class="zpelement zpelem-image "><style> @media (min-width: 992px) { [data-element-id="elm_Et9zxtdy9dy3x0UI4fNduw"] .zpimage-container figure img { width: 311px !important ; height: 220px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Et9zxtdy9dy3x0UI4fNduw"] .zpimage-container figure img { width:311px ; height:220px ; } } @media (max-width: 767px) { [data-element-id="elm_Et9zxtdy9dy3x0UI4fNduw"] .zpimage-container figure img { width:311px ; height:220px ; } } [data-element-id="elm_Et9zxtdy9dy3x0UI4fNduw"].zpelem-image { border-style:none; border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original hb-lightbox " data-lightbox-options="
                type:fullscreen,
                theme:dark"><figure role="none" class="zpimage-data-ref"><span class="zpimage-anchor" role="link" tabindex="0" aria-label="Open Lightbox" style="cursor:pointer;"><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/%E5%88%9D%E5%BF%83%E8%80%85%E3%82%AC%E3%82%A4%E3%83%89/tut74.png" width="311" height="220" loading="lazy" size="original" data-lightbox="true"/></picture></span></figure></div>
</div><div data-element-id="elm_uYVEQJAvd_ELF6VXBC3oeg" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_uYVEQJAvd_ELF6VXBC3oeg"] div.zpspacer { height:30px; } @media (max-width: 768px) { div[data-element-id="elm_uYVEQJAvd_ELF6VXBC3oeg"] div.zpspacer { height:calc(30px / 3); } } </style><div class="zpspacer " data-height="30"></div>
</div></div></div></div></div><div data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_mJaOW60PFLpe_YJD-lPm2w"].zprow{ border-radius:1px; } </style><div data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_Y9gHrMIQQxv5xJADP1U9Sg"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_S5L8u3UC1M8caph3EZlu4g" data-element-type="button" class="zpelement zpelem-button "><style> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"].zpelem-button{ color:#3498DB ; border-radius:1px; } </style><div class="zpbutton-container zpbutton-align-center "><style type="text/css"> [data-element-id="elm_S5L8u3UC1M8caph3EZlu4g"] .zpbutton.zpbutton-type-primary{ background-color:#FFFFFF !important; color:#3498DB !important; border-style:solid; border-color:#3498DB !important; border-width:1px; border-radius:12px; } </style><a class="zpbutton-wrapper zpbutton zpbutton-type-primary zpbutton-size-md zpbutton-style-none " href="https://www.opdweb.jp/blogs/post/visual-editer"><span class="zpbutton-content">ビジュアルエディター設定に戻る</span></a></div>
</div></div></div></div></div><div data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ" data-element-type="section" class="zpsection zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_d4lQE_WUkuN_8kKXcxh9JQ"].zpsection{ border-radius:1px; } </style><div class="zpcontainer-fluid zpcontainer"><div data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_72pqTrYXDHrRBxBT1c_3lQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_JcnypJZSJJCpsjCYb7unJw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-12 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_JcnypJZSJJCpsjCYb7unJw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_auXIGDl6oguBfWSLMCC39Q" data-element-type="divider" class="zpelement zpelem-divider "><style type="text/css"> [data-element-id="elm_auXIGDl6oguBfWSLMCC39Q"].zpelem-divider{ border-radius:1px; } </style><style></style><div class="zpdivider-container zpdivider-line zpdivider-align-center zpdivider-width100 zpdivider-line-style-solid "><div class="zpdivider-common"></div>
</div></div><div data-element-id="elm_THBFt6kgdWC72aPMVl_0pw" data-element-type="spacer" class="zpelement zpelem-spacer "><style> div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:15px; } @media (max-width: 768px) { div[data-element-id="elm_THBFt6kgdWC72aPMVl_0pw"] div.zpspacer { height:calc(15px / 3); } } </style><div class="zpspacer " data-height="15"></div>
</div><div data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ" data-element-type="row" class="zprow zprow-container zpalign-items-flex-start zpjustify-content-flex-start zpdefault-section zpdefault-section-bg " data-equal-column=""><style type="text/css"> [data-element-id="elm_yhCVx8Gn6krZNFHfE-KOmQ"].zprow{ border-radius:1px; } </style><div data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_xvnCaecMrDWXdtwn4WQ-Xw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width: 541px !important ; height: 163px !important ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } @media (max-width: 767px) { [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"] .zpimage-container figure img { width:541px ; height:163px ; } } [data-element-id="elm_Ym-upi7yd5zGBxWKU2YD5g"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-original zpimage-tablet-fallback-original zpimage-mobile-fallback-original "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-begginers-guide" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/begginers_banner.png" width="541" height="163" loading="lazy" size="original"/></picture></a></figure></div>
</div></div><div data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw" data-element-type="column" class="zpelem-col zpcol-12 zpcol-md-6 zpcol-sm-12 zpalign-self- zpdefault-section zpdefault-section-bg "><style type="text/css"> [data-element-id="elm_PcdkJ9CR8rbqlgyKG9TTCw"].zpelem-col{ border-radius:1px; } </style><div data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ" data-element-type="image" class="zpelement zpelem-image banner "><style> @media (min-width: 992px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width: 540px ; height: 163.70px ; } } @media (max-width: 991px) and (min-width: 768px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:723px ; height:219.17px ; } } @media (max-width: 767px) { [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"] .zpimage-container figure img { width:415px ; height:125.80px ; } } [data-element-id="elm_iN6DLXaqjiHaAYkIUye3wQ"].zpelem-image { border-radius:1px; } </style><div data-caption-color="" data-size-tablet="" data-size-mobile="" data-align="left" data-tablet-image-separate="false" data-mobile-image-separate="false" class="zpimage-container zpimage-align-left zpimage-size-fit zpimage-tablet-fallback-fit zpimage-mobile-fallback-fit "><figure role="none" class="zpimage-data-ref"><a class="zpimage-anchor" href="/zoho-sites-tricks" target="" rel=""><picture><img class="zpimage zpimage-style-none zpimage-space-none " src="/zoho%20sites%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/tricks_banner.png" width="415" height="125.80" loading="lazy" size="fit"/></picture></a></figure></div>
</div></div></div></div></div></div></div></div> ]]></content:encoded><pubDate>Thu, 22 Sep 2022 11:55:15 +0900</pubDate></item></channel></rss>