HubLでサポートされるタグ

このページは、全てのHubLタグの構文と利用可能なパラメーターを網羅したリファレンスガイドです。以下の各タグタイプに、基本構文のサンプル、およびパラメーターとコード出力の例が含まれています。

このページのタグのほとんどは既定のモジュールに同等のものがあります。モジュールはdnd_areas内およびフレキシブルカラム内で使用でき、ここで示すタグよりも効果的かつユーザーフレンドリーです。

ブログコメント

ブログ コメント タグはブログテンプレートにコメント埋め込みコードをレンダリングします。このJavaScript埋め込みコードは、ウェブサイト設定内の設定に基づいてコメントフォームとコメントを読み込みます。

Blog Comment Form module: {% blog_comments "blog_comments" overrideable=False, label="Blog Comments" %} Blog Comment Count module: {% blog_comments "blog_comments" %} Blog Comment listing for specific blog: {% blog_comments "default_blog_comments" select_blog="359485112" %} Blog Commment Form Output: <span id="hs_cos_wrapper_blog_comments" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_comments"> <div class="section post-footer"> <div id="comments-listing" class="new-comments no-comments"></div> <div id="hs-comment-embed" style="display:none;"></div> <div id="comment-form" class="new-comments"> <form novalidate="" accept-charset="UTF-8" action="https://api.hubapi.com/comments/v3/comment?portalId=311600" enctype="multipart/form-data" id="hsForm_d30edada-82e4-4a69-aaf4-a9d0376f37e6" method="POST" class="hs-form stacked" data-form-id="d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-portal-id="311600" data-reactid=".hbspt-forms-0"> <div data-reactid=".hbspt-forms-0.0:$0"> <div class="hs_email field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.$email"> <label class="" placeholder="Enter your Email" for="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$0.$email.0"> <span data-reactid=".hbspt-forms-0.0:$0.$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.$email.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.$email.1"> </legend> <div class="input" data-reactid=".hbspt-forms-0.0:$0.$email.$email"> <input id="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".hbspt-forms-0.0:$0.$email.$email.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$1"> <div class="hs_website field hs-form-field" data-reactid=".hbspt-forms-0.0:$1.$website"> <label class="" placeholder="Enter your Website" for="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$1.$website.0"> <span data-reactid=".hbspt-forms-0.0:$1.$website.0.0">Website</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$1.$website.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$1.$website.$website"> <input id="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="text" name="website" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$1.$website.$website.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$2"> <div class="hs_comment field hs-form-field" data-reactid=".hbspt-forms-0.0:$2.$comment"> <label class="" placeholder="Enter your Comment" for="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$2.$comment.0"> <span data-reactid=".hbspt-forms-0.0:$2.$comment.0.0">Comment</span> <span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$2.$comment.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$2.$comment.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment"> <textarea id="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" name="comment" required="" placeholder="" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment.0"></textarea> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$3"> <div class="hs_subscribe field hs-form-field" data-reactid=".hbspt-forms-0.0:$3.$subscribe"> <label class="" placeholder="Enter your Subscribe to follow-up comments for this post" for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$3.$subscribe.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.0.0"></span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$3.$subscribe.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe"> <ul class="inputs-list" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0"> <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0"> <label for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0"> <input id="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="checkbox" name="subscribe" value="true" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.1">Subscribe to follow-up comments for this post</span> </label> </li> </ul> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$4"> <div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage"> <label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0"> <span data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0.0">Lifecycle Stage</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage"> <input name="lifecyclestage" class="hs-input" type="hidden" value="subscriber" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage.0"> </div> </div> </div> <div class="hs_submit" data-reactid=".hbspt-forms-0.2"> <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.2.0"></div> <div class="actions" data-reactid=".hbspt-forms-0.2.1"> <input type="submit" value="Submit Comment" class="hs-button primary" data-reactid=".hbspt-forms-0.2.1.0"> </div> </div> <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:1396.815,&quot;rumServiceResponseTime&quot;:7737.500000000001,&quot;rumFormRenderTime&quot;:187.17999999999938,&quot;rumTotalRenderTime&quot;:7738.14,&quot;rumTotalRequestTime&quot;:183.2549999999992,&quot;pageUrl&quot;:&quot;http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350&quot;,&quot;pageTitle&quot;:&quot;HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview&quot;,&quot;source&quot;:&quot;FormsNext-static-1.390&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1479135449193,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36&quot;,&quot;referrer&quot;:&quot;&quot;,&quot;hutk&quot;:&quot;a525e671c25f6b108d25e08c892e359e&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;311600&quot;,&quot;formId&quot;:&quot;d30edada-82e4-4a69-aaf4-a9d0376f37e6&quot;,&quot;target&quot;:&quot;#comment-form&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;css&quot;:&quot;.your-custom-css {background-color: #fe7722}&quot;,&quot;requiredCss&quot;:&quot;.my-custom-error-msgs {border-radius: 3px;}&quot;,&quot;submitButtonClass&quot;:&quot;hs-button primary&quot;},&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;boolCheckBoxFields&quot;:&quot;subscribe&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{&quot;hs_preview&quot;:&quot;ALicr-ma-4312320350&quot;},&quot;formValidity&quot;:{},&quot;correlationId&quot;:&quot;55d71532-ab6b-4415-98f5-f3a16d7741c9&quot;,&quot;disableCookieSubmission&quot;:false}" data-reactid=".hbspt-forms-0.3"> <input type="hidden" id="id_portalId" name="portalId" value="311600"><input type="hidden" id="id_contentId" name="contentId" value="4312320350"> <input type="hidden" id="id_collectionId" name="collectionId" value="2224463151"> <input type="hidden" id="id_contentAuthorEmail" name="contentAuthorEmail" value="cstone@hubspot.com"><input type="hidden" id="id_contentAuthorName" name="contentAuthorName" value="Christopher Stone"> <input type="hidden" id="id_comment_verification_text" name="comment_verification_text" value="Your comment has been received."> <input type="hidden" id="id_contentTitle" name="contentTitle" value="HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview"> <input type="hidden" id="id_contentPermalink" name="contentPermalink" value="http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15"> <input type="hidden" id="id_contentCreatedAt" name="contentCreatedAt" value="1479135208000"> <input type="hidden" id="id_formGuid" name="formGuid" value="d30edada-82e4-4a69-aaf4-a9d0376f37e6"> </form> </div> </div> </span> Blog Comment Listing Module Output: (function ($) { var commentsEmbedContext = { portalId: 327485, collectionId: 359485112, contentId: 2684120609, target: '#comments-listing.new-comments', showComments: true, showForm: true, commentVerificationText: "Your comment has been received.", embedScriptEnv: "prod", apiEnv: "prod", contentTitle: "Post title", contentCreatedAt: "1427849160000", contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name, contentAuthorEmail: "dhunt@hubspot.com", contentAuthorName: "David Hunt", captchaRequired: true, captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt", maxThreadDepth: 3, formId: "8d42bb92-241b-4894-b853-1d5f6553daa0" }; function loadComments() { if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') { hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function () { if (typeof window.hsEmbedComments === 'function') { window.hsEmbedComments(commentsEmbedContext); } }); } else { setTimeout(loadComments, 50); } } loadComments(); })(window.hsjQuery || jQuery);
ParameterTypeDescription Default
limit
Integer

最大コメント数を設定します。

5000
select_blog
"default" or blog ID

埋め込みコメントにどのブログが接続されるかを指定します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
skip_css
Boolean

このオプションをTrueに設定すると、ブログコメントCSSの読み込みが停止します。 

false

ブログコンテンツ

ドラッグ&ドロップレイアウトにはブログ コンテンツ モジュールが含まれていますが、これらのモジュールは1つのタグでは作成されません。代わりに、条件付きロジックを使用してブログ記事とブログリストをどのようにレンダリングするかを定義します。ブログテンプレートのコーディングの詳細についてはこちらをご覧ください。

ブログの関連記事

複数ブログの記事で共有されたパラメーターのセットに基づいてブログ記事のリストを追加します。記事は、セットパラメーターとの関連性に基づいて選択されます。オプションのcallbackパラメーターの使用例については、related_blog_posts HubLタグを使用して関連するブログ記事のリストを作成する方法を参照してください。

このタグは、ページ/記事レベルの編集可能モジュールを生成するのではなく、全体がHubLで設定されている点に注意してください。

{% related_blog_posts %} {% related_blog_posts limit=2, blog_ids="1,2", tags="Sales enablement,Marketing", blog_authors="John Smith,Frank Smith", path_prefixes="/business-blog", start_date="2018-04-10", end_date="2018-04-10", blog_post_override="2783035366" %} <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""><!--related-blog-entries--></span> <div class="hs-related-blog-module feedreader_box"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""></span> <div class="hs-related-blog-item"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""></span> <div class="hs-related-blog-item-text"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts" data-hs-cos-general-type="widget" data-hs-cos-type="related_blog_posts" id="hs_cos_wrapper_" style=""><a class="hs-related-blog-title" href="//www.underseaband.com/business-blog/marketing-is-fun"><span>Marketing is fun</span></a></span> <div class="hs-related-blog-byline">by <span class="hs-related-blog-author">John Smith</span> <span class="hs-related-blog-posted-at">posted on</span> <span class="hs-related-blog-date">June 3, 2018</span> </div> <div class="hs-related-blog-byline"> <p class="hs-related-blog-description">Learn how to make marketing fun!<a href="//www.underseaband.com/business-blog/marketing-is-fun">Read more</a></p> </div> <div class="hs-related-blog-byline"> <span class="hs-related-blog-tags">Tags: Marketing</span> </div> </div> </div> <div class="hs-related-blog-item hs-with-featured-image"> <div class="hs-related-blog-item-text"> <a class="hs-related-blog-title" href="//www.underseaband.com/business-blog/sales-is-fun"><span>Sales is fun</span></a> <div class="hs-related-blog-byline">by <span class="hs-related-blog-author">Frank Smith</span> <span class="hs-related-blog-posted-at">posted on</span> <span class="hs-related-blog-date">June 7, 2018</span> </div> <div class="hs-related-blog-byline"> <p class="hs-related-blog-description">Learn how to make sales fun!<a href="//www.underseaband.com/business-blog/sales-is-fun">Read more</a></p> </div> <div class="hs-related-blog-byline"> <span class="hs-related-blog-tags">Tags: Sales enablement</span> </div> </div> <div class="hs-related-blog-item-image-wrapper"><img alt="" class="hs-related-blog-featured-image" src="//www.underseaband.com/hubfs/business-blog/sales-is-fun.jpg"></div> </div> </div>
ParameterTypeDescription Default
blog_ids
Integer

記事を含むブログのID。既定のブログを使用するには、このパラメーターを省略します。

blog_post_ids
String

リストする関連ブログ記事の検索に使用するブログ記事ID(カンマ区切り)。このパラメーターは、ウィジェットをページに表示する場合にのみ使用してください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。

blog_post_override
String

他のパラメーター値やフィルターに関係なく、返されたリストに常に表示されるブログ記事のID(カンマ区切り)。

limit
Integer

 リストするブログ記事の最大数。

3
tags
String

記事に関連性があるかどうかを判定するために使用するタグ(カンマ区切り)。ブログ記事にこれらのタグのいずれかまたは類似のタグがある場合、記事の関連性が高くなり、リストでのランキングが向上します。

start_date
datetime

最も古い公開日。

end_date
datetime

最新の公開日。

blog_authors
String

 リストする記事の執筆者の名前(カンマ区切り)。

path_prefixes
String

リストする記事のURLパスまたはサブディレクトリー(カンマ区切り)。ブログ記事のパスに類似するプレフィックスがある場合は、記事の関連性が高くなり、リストでのランキングが向上します。

callback
String

返されるブログ記事をレンダリングするためのJavaScript関数の名前。関数に、形式を設定するブログ記事オブジェクトの配列が渡されます。callbackパラメーターとpost_formatterパラメーターのどちらも指定されていない場合、タグは既定の形式のHTMLを生成します。

none
post_formatter
String

返されるブログ記事を表示するためのカスタムマクロの名前。このマクロには、フォーマットするブログ記事オブジェクト、ブログ記事の反復数、および結果に含まれるブログ記事の合計数という3つのパラメーターが渡されます。指定されていないか、「default」に設定された場合は、組み込みのフォーマッターを使用して各記事がフォーマットされます。

default
allow_any_language
String

falseに設定すると、タグが使用されているページと同じ言語の投稿のみが表示されます。パラメーターをtrueに設定した場合は、言語制限が無視され、ページの言語にかかわらず全ての関連記事が取り込まれます。

False

ページの読み込み速度を改善するため、post_formatterではなくcallbackパラメーターを使用することを強くお勧めします。

ブログ ソーシャル シェアリング

ブログ ソーシャル シェアリングは、ブログ記事にシェアカウンターをレンダリングします(コンテンツ設定で有効になっている場合)。

{% blog_social_sharing "blog_social_sharing" %} {% blog_social_sharing "blog_social_sharing" select_blog="359485112" %} <span id="hs_cos_wrapper_blog_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_social_sharing"> <div class="hs-blog-social-share"> <ul class="hs-blog-social-share-list"> <li class="hs-blog-social-share-item hs-blog-social-share-item-twitter"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="http://designers.hubspot.com/blog" data-size="medium" data-text="">Tweet</a> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-linkedin"> <script type="IN/Share" data-url="http://designers.hubspot.com/blog" data-showzero="true" data-counter="right"></script> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-facebook"> <div class="fb-like" data-href="http://designers.hubspot.com/blog" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true" data-width="120"></div> </li> <li class="hs-blog-social-share-item hs-blog-social-share-item-google-plus"> <div class="g-plusone" data-size="medium" data-href="http://designers.hubspot.com/blog"></div> </li> </ul> </div> </span>
ParameterTypeDescription Default
select_blog
"default" or blog ID

シェアカウンターに接続するブログを指定します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
downgrade_shared_url
Boolean

ソーシャル メディア ネットワークに送信されるURLでHTTPを使用します。ドメインをHTTPSのみにアップグレードするときにカウントを保持するために使用します。

false

ブログ配信登録

ブログ配信登録タグは、特定のブログのブログ配信登録フォームをレンダリングします。このフォームは、ブログがコンテンツ設定で作成される度に自動的に作成され、ブログあたり常に1つの配信登録フォームがあります。配信登録フォームのフィールドはフォームエディターUIを使用して設定されることに注意してください。

{% blog_subscribe "blog_subscribe" %} {% blog_subscribe "subscribe_designers_blog" select_blog="default", title="Subscribe to the Designers Blog", response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %} <span id="hs_cos_wrapper_blog_subscription" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe" style="" data-hs-cos-general-type="widget" data-hs-cos-type="blog_subscribe"> <h3 id="hs_cos_wrapper_blog_subscription_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Subscribe to Designers Blog</h3> <div id="hs_form_target_blog_subscription"></div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '327485', formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c', formInstanceId: '60', pageId: 2749976739, pageName: 'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies', redirectUrl: 'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription', css: '', target: '#hs_form_target_blog_subscription', formData: { cssClass: 'hs-form stacked' } }); </script> </span>
ParameterTypeDescription Default
select_blog
"default" or blog ID

レンダリングするブログ配信登録フォームを選択します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
title
String

配信登録フォームの上にh3タグタイトルのテキストを定義します。

"Subscribe Here!"
no_title
Boolean

Trueの場合、タイトルの上のh3タグは削除されます。

false
response_message
String

ユーザーがフォームを送信したときに表示されるインライン サンキュー メッセージを定義します。HTMLがサポートされます。

"Thanks for Subscribing!"
edit_form_link
String

このパラメーターは、対応するフォームエディター画面へとユーザーがクリックスルーできるリンクを生成します。このオプションは、モジュールにパラメーターoverrideable=Trueが指定された場合にのみ、エディターUIに表示されます。

例えば、HubIDとフォームIDを、既定のブログ配信登録フォームのURLの情報で置き換えるには、edit_form_link=" <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "とします。

\nにより、コードが改行されます。

ブール型

ブール値タグは、[true]または[false]を出力するUIのチェックボックスを作成します。値を出力することに加え、このモジュールは、パラメーターexport_to_template_contextと組み合わせて使用すると、条件付きテンプレートロジックの定義に役立ちます。 

{% boolean "boolean" %} {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %} false
ParameterTypeDescription Default
value
Boolean

チェックボックスをオンとオフのどちらにするかを指定します。

False

選択

選択タグはコンテンツエディターUIでドロップダウンを作成し、ユーザーが選択する値を出力します。選択タグはプリセットされた一連の選択肢をユーザーに提供する場合に便利です。ページヘッダーとしてページのタイプを出力する場合などです。

選択値を出力することに加え、このタグは、パラメーターexport_to_template_contextと組み合わせて使用すると、条件付きテンプレートロジックの定義に役立ちます。 

{% choice "choice" %} {% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %} <span id="hs_cos_wrapper_type_of_page" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice" style="" data-hs-cos-general-type="widget" data-hs-cos-type="choice"> About </span>
ParameterTypeDescription
value
Boolean

ドロップダウンの既定のフィールド値

choices
Sequence

値、または値とラベルのペアのカンマ区切りリスト。値とラベルのペアの構文を次に示します。choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]"。エディターではラベルが表示されますが、ページには値が出力されます。

色タグはページエディターUIでカラーピッカーを生成し、16進表記の色の値をテンプレートに出力します。このモジュールはテンプレートでのみ使用できます。CSSファイルでは使用できません。このタグを<style>またはインラインCSSで使用する場合、ラッパー<span>を削除するためno_wrapper=Trueパラメーターを使用できます。

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %} #000000
ParameterTypeDescription
color
String

カラーピッカーの既定の16進表記の色の値

CTA

CTA(Call-To-Action)タグを使用すると、ユーザーはHubSpot Calls-To-Action(CTA)ボタンをページの事前定義済み領域に追加できます。

{% cta "cta" %} {% cta "my_cta" label="Select a CTA", guid="ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", image_src="https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png" %} <span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_cta" style="" data-hs-cos-general-type="widget" data-hs-cos-type="cta"> <!--HubSpot Call-to-Action Code --> <span class="hs-cta-wrapper" id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"> <span class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b" style="visibility: visible;"> <a id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826" class="cta_button " href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpFSOqhysLBE-Yye5WFoP82Swxb2PVWpfI3VxlUjuOCHfiVMcxKic3yM28vuwu9UB8_Jyhk6DGRCEN63hKqQOMtMTGmQZ1UNMK3LtNx0sRrAfQQYna2BfZ9RmgQOs8sKO_PcKOP6G26L5wQ5vdcXXOiMCxFPJxzPzUCcl474iiHKbEo5H8LVtZf6e140VOSGJ37NTpxCcPHLDvH9iFaT6mR0BnKzFReaX0FXBj7Lx2rFLVCZcIC0bdaFEGI1uKOJBMNT9RDtEzeJzUHzFYN0b34uv-ZR4w&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables%3Fhs_preview%3D159bC1Cj-2863569740&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables" style="" cta_dest_link="http://www.hubspot.com/free-trial" title="Start a HubSpot trial"> Start a HubSpot trial </a> </span> <script charset="utf-8" src="//js.hscta.net/cta/current.js"></script> <script type="text/javascript"> hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b'); </script> </span> <!-- end HubSpot Call-to-Action Code --> </span>
ParameterTypeDescription
embed_code
String

CTAの埋め込みコード。\nで改行します。

full_html
String

CTAの埋め込みコード(embed_codeと同じ)。\nで改行します。

image_src
String

コンテンツエディターでプレビュー画像を定義する画像src URL。

image_editor
String

画像エディタープレビューのマークアップ

guid
String

CTAの固有ID番号。このIDは、特定のCTAの詳細画面のURLで確認できます。このパラメーターは、既定で表示するCTAを選択するために使用します。

image_html
String

CTAスクリプトがないCTA画像HTML。*

image_email
String

Eメール向けのCTAコード。*

*ここでは説明上、パラメーターを記載していますが、このパラメーター用にHubSpotによって生成されるコードは非常に特殊です。既定で選択されるCTAが必要な場合、CTAパラメーターをゼロから作成するのではなく、テンプレートレイアウト上でCTAを設定してからファイルに複製することをお勧めします。全てのパラメーターが正しく設定されたCTAのHubL CTAモジュールをコピーできます。

IDからCTAを生成するCTA関数もあります。

カスタムHTML

カスタムHTMLモジュールでは、ユーザーが未加工のHTMLをコンテンツエディターに入力できます。広範囲に及ぶ既定HTMLをタグに追加する必要がある場合は、ブロック構文を使用できます。

{% raw_html "raw_html" %} {% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %} Block Syntax Example: {% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module" %} {% widget_attribute "value" %} <div>Default HTML block</div> {% end_widget_attribute %} {% end_widget_block %} <span id="hs_cos_wrapper_my_custom_html_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"> <div>My HTML block</div> </span>
ParameterTypeDescription
value
String

モジュールの既定のコンテンツHTMLを設定します。

カスタムモジュール

カスタムモジュールを使用すると、HubSpotデザイナーはHubSpotのCMSのテンプレートやページで使用される編集可能なコンテンツオブジェクトのカスタムグループを作成できます。一方、マーケティング担当者は引き続きそのモジュール内に表示される特定のコンテンツをページごとに管理できます。カスタムモジュールとシンプルなHubL構文の詳細についてはこちらをご覧ください。

カスタムモジュールはカスタム モジュール エディターで構築する必要がありますが、コードテンプレートやHubLモジュールに含めることができます。カスタム モジュール エディターの右側のサイドバーの[テンプレートの使用]の下に[使用スニペット]が表示されます。

カスタムモジュールには、モジュールのIDと、読み込むモジュールを指定するためのパスパラメーターの文字列が必要です。使用スニペットにはラベルパラメーターも含まれます。以下の構文を確認してください。

{% module "module_15677217712485" path="/Custom/Test custom module" %} {% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %} <div id="hs_cos_wrapper_module_15677217712485" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">content!</div> <style> @import "//cdn2.hubspotqa.net/qa/hub/126/file-613025667-css/custom_widget_example.css" </style> <div> <img class="persons-photo" src="//cdn2.hubspotqa.net/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg" alt="dharmesh.jpeg"> <div> <img class="company-logo with-background" src="//cdn2.hubspotqa.net/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png" width="60px" height="inherit" alt="HubSpot_Logo_2x.png"> </div> </div> <div> <p class="quote"> <span class="quotation-mark"><b>" </b></span>The Content Optimization System matches content with context to create a highly personalized, relevant and meaningful customer experience. <span class="quotation-mark"><b>" </b></span> </p> </div> <div class="name-and-company"> <span><b>Dharmesh Shah,</b></span> <span>HubSpot</span> </div>
ParameterTypeDescription
module_id
String

レンダリングするモジュールのID。

path
String

レンダリングするモジュールのパス。絶対パスの場合は先頭にスラッシュを付けます。これがない場合、パスはテンプレートへの相対パスです。HubLタグに対応するパスを指定したHubSpot既定モジュールの参照。@hubspot/rich_text、@hubspot/linked_imageなど。

エディタープレースホルダー

モジュールを作成する際には、フィールドに既定のコンテンツを追加したり、HTML+HubLファイルにHubLタグeditor_placeholderを追加したりすることで、プレースホルダーコンテンツ(入力例のコンテンツ)をレンダリングできます。このタグにより、エディター上にはモジュールのアイコンと名前が、空のプレースホルダーとしてレンダリングされます。

module-placeholder-content0

このタグは、モジュールに既定のコンテンツがない、既定のコンテンツが不要、またはモジュール開発を効率化するといった場合に役立ちます。

コンテンツが選択されていない場合にカスタムモジュールにプレースホルダーを追加するには、if文をHTML+HubLファイルに追加して、プレースホルダーをレンダリングします。例:

{% if module.cta_field.name %} {% cta guid="{{ module.cta_field }}" %} {% elif is_in_editor %} {% editor_placeholder %} {% endif %}

プレースホルダーのスタイルは編集できませんが、以下のプロパティーをモジュールのmeta.jsonファイルに追加することで、コンテンツをカスタマイズできます。

ParameterTypeDescription
show_module_icon
Boolean

モジュールのアイコンを表示するかどうか。

title
String

プレースホルダーに表示するタイトル。

description
String

プレースホルダーに表示する説明。

例えば、meta.jsonファイルは次のようになります。

// Module meta.json { "global" : false, "host_template_types" : [ "PAGE" ], "module_id" : 62170380654, "is_available_for_new_content" : true, "placeholder": { "show_module_icon": true, "title": "Call to action", "description": "Select a CTA" } }

Eメールバックアップ配信解除

Eメール受信者が配信を停止しようとするときにHubSpotがそのEメールアドレスを確認できない場合は、Eメール受信者に対してバックアップ配信解除タグが表示されます。このタグは、コンタクトがEメールコミュニケーションの配信を停止するEメールアドレスを入力するためのフォームをレンダリングします。これは、配信解除バックアップ システム テンプレートに使用する必要があります。

{% email_simple_subscription "email_simple_subscription" %} {% email_simple_subscription "email_simple_subscription" header="Email Unsubscribe", input_help_text="Your email address:", input_placeholder="email@example.com", button_text="Unsubscribe", label="Backup Unsubscribe" %} <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Email Unsubscribe</span></h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </div> <form id="email-prefs-form" method="post" name="email-prefs-form" style="position: relative"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <div id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> <h3 style="font-weight: normal"><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style="">Your email address:</span></h3> <div style="padding-bottom: 10px"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="email-edit hs-input" name="email" placeholder="email@example.com" style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px" type="email" value=""></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""><input class="hs-button primary" id="submitbutton" type="submit" value="Unsubscribe"></span> </div><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription" data-hs-cos-general-type="widget" data-hs-cos-type="email_simple_subscription" id="hs_cos_wrapper_email_simple_subscription" style=""></span> </form>
ParameterTypeDescription Default
header
String

配信解除フォームの上にh1タグのテキストをレンダリングします。

"Email Unsubscribe"
input_help_text
String

Eメール配信解除フォームフィールドの上にh3タグのヘルプテキストをレンダリングします。

"Your email address:"
input_placeholder
String

Eメール アドレス フォーム フィールド内にプレースホルダーテキストを追加します。

"email@example.com"
button_text
String

配信解除フォームの送信ボタンのテキストを変更します。

"Unsubscribe"

Eメール配信登録

このモジュールは、Eメール受信者が配信設定を編集するときにレンダリングされます。これは、配信設定システムテンプレートに使用する必要があります。

{% email_subscriptions "email_subscriptions" %} {% email_subscriptions "email_subscriptions" resubscribe_button_text="Yes, resubscribe me!", unsubscribe_single_text="Uncheck the types of emails you do not want to receive:", subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n", unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?", button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences", unsubscribe_all_option="Unsubscribe me from all mailing lists.", unsubscribe_all_text="Or check here to never receive any emails:" %} <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <form id="email-prefs-form" method="post" name="email-prefs-form"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <h1><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">Communication Preferences</span></h1> <h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">example@email.com</span></h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><br></span> <p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</span></p> </div> <div class="email-prefs" id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <p class="header"><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style="">Uncheck the types of emails you do not want to receive:</span></p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><input name="email" type="hidden" value="example@email.com"> <input name="unsub_url" type="hidden" value=""> <input name="unsubed_all" type="hidden" value="false"> <input name="subscription_ids" type="hidden" value=""></span> <div class="item"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="item-inner"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""></span> <div class="checkbox-row"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions" id="hs_cos_wrapper_email_subscriptions" style=""><span class="fakelabel"><input id="id_0" name="id_0" type="checkbox"> <span>Example Subscription #1</span></span></span> </div> <p>Your email type description</p> </div> </div> <div class="item"> <div class="item-inner"> <div class="checkbox-row"> <span class="fakelabel"><input id="id_0" name="id_0" type="checkbox"> <span>Example Subscription #2</span></span> </div> <p>Your email type description</p> </div> </div> <div class="subscribe-options" style="margin-right: 0"> <p class="header">Or check here to never receive any emails:</p> <p><label for="globalunsub"><input id="globalunsub" name="globalunsub" type="checkbox"> <span>Unsubscribe me from all mailing lists.</span></label></p> </div><input class="hs-button primary" id="submitbutton" type="submit" value="Update email preferences"> <div class="clearer"></div> </div> </form>
ParameterTypeDescription Default
header
String

配信設定フォームの上にh1タグのテキストをレンダリングします。

"Communication Preferences"
subheader_text
String

配信解除設定の上に見出しの下のテキストを入力します。

"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
unsubscribe_single_text
String

配信登録オプションの上に<p class="header">のテキストをレンダリングします。

"Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
String

全てのEメールの配信解除チェックボックス入力の上に<p class="header">のテキストをレンダリングします。

"Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
String

コンタクトが現在全てのEメール配信を解除済みの場合、レンダリングする<p>内のテキストを入力します。

"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
String

全てのEメールの配信解除チェックボックス入力の横のテキストを設定します。

"Unsubscribe me from all mailing lists."
button_text
String

配信設定を更新する送信ボタンのテキストを設定します。

"Update email preferences"
resubscribe_button_text
String

コンタクトが配信に再登録する場合の送信ボタンのテキストを設定します。

"Yes, resubscribe me!"

Eメール配信登録確認

Eメール配信登録の更新確認は、受信者が配信設定を更新するとき、または配信解除する際のサンキューテンプレートに追加できるモジュールです。これは、配信設定システムテンプレートに使用する必要があります。

{% email_subscriptions_confirmation "email_subscriptions_confirmation" %} {% email_subscriptions_confirmation "email_subscriptions_confirmation" label="Subscriptions Update Confirmation", unsubscribe_all_success="You have successfully unsubscribed from all email communications.", subscription_update_success="You have successfully updated your email preferences.", subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n" %} <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <div class="page-header"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""></span> <h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">example@email.com</span></h2><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style=""><br></span> <p><span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</span></p> </div> <div class="success" id="content"> <span class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation" data-hs-cos-general-type="widget" data-hs-cos-type="email_subscriptions_confirmation" id="hs_cos_wrapper_email_subscriptions_confirmation" style="">You have successfully updated your email preferences.</span> </div>
ParameterTypeDescription Default
header
String

配信解除フォームの上にh1タグのテキストをレンダリングします。

"Communication Preferences"
subheader_text
String

確認メッセージの上のテキストを入力します。

"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
unsubscribe_all_success
String

全てのEメールコミュニケーションを配信解除した際に表示されるテキストを設定します。

"You have successfully unsubscribed from all email communications."
subscription_update_success
String

受信者が配信設定を更新した際のテキストを設定します。

"You have successfully updated your email preferences."

フレキシブルカラム

フレキシブルカラムはテンプレート内の垂直カラムで、コンテンツエディターで編集中にエンドユーザーがテンプレートにさまざまなモジュールを挿入または削除できます。HubLでフレキシブルカラムをコーディングするとき、他のHubLモジュールを選択してラップし、既定でフレキシブルカラムに表示されるようにできます。以下のサンプルコードで、基本構文、およびリッチテキストとフォームモジュールを既定のコンテンツとして含むフレキシブルカラムの例を示します。フレキシブルカラムはページテンプレートにのみ追加できます。ブログやEメールテンプレートには追加できません。

{% widget_container "my_flexible_column" %} {% module "rich_text" path="@hubspot/rich_text" %} {% module "linked_image" path="@hubspot/linked_image" %} {% end_widget_container %} <span id="hs_cos_wrapper_my_flexible_column" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_rich_text" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_rich_text_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're <a href="#">offering</a>, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul></span></div> <div id="hs_cos_wrapper_linked_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <span id="hs_cos_wrapper_linked_image_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="width:200px;border-width:0px;border:0px;" width="200" alt="placeholder_200x200" title="placeholder_200x200"></span> </div></span>

モジュールにフレキシブルカラムを含めることはできませんが、反復可能なフィールドとグループを含めることはできます。この方法で、再配置、追加、削除などができるスライドを含むカルーセルのようなモジュールを作成できます。

フォーム

ユーザーがHubSpotフォームを選択してページに追加できるようにします。

{% form "form" %} {% form "my_form" form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial" %} Block Syntax Example: {% widget_block form "my_form" form_follow_ups_follow_up_type="", response_redirect_id=306590405, form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial", notifications_are_overridden=True, sfdc_campaign="", response_message="Thanks for submitting the form.", response_response_type="redirect", response_redirect_url="", overrideable=True, gotowebinar_webinar_key="", response_redirect_name="Homepage (http://www.hubspot.com/)", label="Form", response={message="Thank you for submitting the form.", redirect_url=""} %} {% widget_attribute "notifications_override_email_addresses" is_json=True %}["noreply@hubspot.com"]{% end_widget_attribute %} {% end_widget_block %} <div id="hs_cos_wrapper_my_form" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"> <h3 id="hs_cos_wrapper_module_13885064832664947_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Free Trial</h3> <div id="hs_form_target_module_13885064832664947"> <form accept-charset="UTF-8" enctype="multipart/form-data" id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" class="hs-form stacked hs-custom-form" action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143" method="POST" novalidate="novalidate"> <div class="hs_lastname field hs-form-field"> <label placeholder="Enter your Last Name" for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Last Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="lastname" value="" placeholder=""> </div> </div> <div class="hs_firstname field hs-form-field"> <label placeholder="Enter your First Name" for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">First Name</label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="firstname" value="" placeholder=""> </div> </div> <div class="hs_email field hs-form-field"> <label placeholder="Enter your Email" for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756">Email<span class="hs-form-required"> * </span></label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="email" required="required" id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756" name="email" value="" placeholder=""> </div> </div> <div class="hs_submit"> <div class="hs-field-desc" style="display: none;"></div> <div class="actions"> <input class="hs-button primary large" type="submit" value="Submit"> </div> </div> </form> </div> <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> <script> hbspt.forms.create({ portalId: '158015', formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143', formInstanceId: '6756', pageId: 1, redirectUrl: "http:\/\/www.davidjosephhunt.com\/404", deactivateSmartForm: true, css: '', target: '#hs_form_target_module_13885064832664947', contentType: "landing-page", formData: { cssClass: 'hs-form stacked hs-custom-form' } }); </script> </div>
ParameterTypeDescription Default
form_key
String

ページレベルでのフォームの固有IDを指定します。

form_to_use
String

既定で読み込むフォームをフォームIDに基づいて指定します。このIDは各フォームのフォームエディターURLで確認できます。

title
String

フォームの上にh3ヘッダータグを入力します。

no_title
Boolean

 Trueの場合、タイトルの上のh3タグは削除されます。

False
form_follow_ups_follow_up_type
Enumeration

ワークフローへのコンタクトの登録や、シンプルなフォローアップEメールの送信などの、フォローアップアクションを指定します。指定可能な値は、no_actionsimpleautomationです。

simple_email_for_live_id
Number

公開ページ用のシンプルなフォローアップEメールのIDを指定します。

simple_email_for_buffer_id
Number

ページの自動保存バージョン用のシンプルなフォローアップEメールのIDを指定します。

follow_up_type_simple
Boolean

trueの場合、シンプルなフォローアップEメールを有効にします。form_follow_ups_follow_up_typeの代替。

follow_up_type_automation
Boolean

trueの場合、ワークフローに送信を登録します。form_follow_ups_follow_up_typeの代替。

simple_email_campaign_id
Number

シンプルなフォローアップEメールのIDを指定します。simple_email_for_live_idの代替。

form_follow_ups_workflow_id
Number

送信を登録するワークフローのIDを指定します。

response_redirect_url
String

外部ページにリダイレクトする場合、このパラメーターはリダイレクト先のURLを指定します。

response_redirect_id
Number

HubSpot上にホスティングされているページにリダイレクトする場合、このパラメーターにはそのページのページIDを指定します。ページIDは各ページのページエディターURLで確認できます。

response_response_type
Enumeration

送信時に別のページにリダイレクトするか、インライン サンキュー メッセージを表示するかを指定します。このパラメーターの値は"redirect"または"inline"にする必要があります。

inline
response_message
String

インライン サンキュー メッセージを設定します。このパラメーターではHTMLがサポートされます。

notifications_are_overridden
Boolean

Trueの場合、notifications_override_email_addressesパラメーターで選択されたEメールアドレスに、フォームによってフォーム通知が送信されます
(フォームの既定ではなく)

False
notifications_override_guid_buffer
String

ページの自動保存バージョンの優先設定のID。

notifications_override_guid
String

ページの公開バージョンの優先設定のID。

notifications_override_email_addresses
JSON

ブロック構文は、フォーム送信時に通知されるEメール受信者のJSONリストをサポートしています。これらのEメールアドレスは、フォームで設定されたEメール通知設定よりも優先されます。

gotowebinar_webinar_key
String

フォームを送信したコンタクトを登録するGoToWebinarウェビナーを指定します。GoToWebinar連携を使用しているポータルにのみ使用できます。

sfdc_campaign
String

フォームを送信したコンタクトを登録するSalesforceキャンペーンを指定します。このパラメーターの値はSFDCキャンペーンIDであり、Salesforceと連携されたポータルでのみ使用できます。

フッター

コンテンツ設定([Eメール]>[フッター情報])で指定された年および会社名を使用して著作権情報をレンダリングします。

{% page_footer "page_footer" %} <span id="hs_cos_wrapper_page_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer" style="" data-hs-cos-general-type="widget" data-hs-cos-type="page_footer"> <footer> <span class="hs-footer-company-copyright">© 2020 HubSpot</span> </footer> </span>

ギャラリー

HubSpotギャラリータグを生成します。このギャラリータグはSlickに基づきます。標準モジュールHubL構文でギャラリーモジュールを作成できますが、HubLを使用して既定のスライドを事前定義する場合はブロック構文を使用する必要があります。両方の方法を以下に示します。ギャラリー画像は、JavaScriptを使用して遅延読み込みされます。

{% gallery "crm_gallery" %} <-- Block syntax --> {% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %} {% widget_attribute "slides" is_json=True %} [{ "caption": "CRM Contacts App", "show_caption": true, "link_url": "http://www.hubspot.com/crm", "alt_text": "Screenshot of CRM Contacts", "img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240", "open_in_new_tab": true }, { "caption": "HubSpot CRM Contact Profile", "show_caption": true, "link_url": "http://www.hubspot.com/", "alt_text": "HubSpot CRM Contact Profile", "img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240", "open_in_new_tab": true }] {% end_widget_attribute %} {% end_widget_block %} <span id="hs_cos_wrapper_crm_gallery" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery" style="" data-hs-cos-general-type="widget" data-hs-cos-type="gallery"> <div id="hs_cos_flex_gallery_crm_gallery" class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"> <div class="hs_cos_flex-viewport" style="overflow: hidden; position: relative;"> <ul class="hs_cos_flex-slides hs_cos_flex-slides-main " style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main hs_cos_flex-active-slide" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> <li class="hs_cos_flex-slide-main" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false"></a> <div class="caption"> HubSpot CRM Contact Profile </div> </li> <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;"> <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false"></a> <div class="caption"> CRM Contacts App </div> </li> </ul> </div> <ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging"> <li><a class="hs_cos_flex-active">1</a></li> <li><a class="">2</a></li> </ol> <ul class="hs_cos_flex-direction-nav"> <li><a class="hs_cos_flex-prev" href="#">Previous</a></li> <li><a class="hs_cos_flex-next" href="#">Next</a></li> </ul> </div> <script> window.hsSliderConfig = window.hsSliderConfig || {}; window.hsSliderConfig['crm_gallery'] = { mode: 'gallery', mainConfig: { "animationLoop": true, "direction": "horizontal", "slideshowSpeed": 5000.0, "controlNav": true, "smoothHeight": false, "namespace": "hs_cos_flex-", "slideshow": true, "selector": ".hs_cos_flex-slides > li", "animation": "slide" } }; </script>
ParameterTypeDescription Default
slides
JSON

既定のキャプションのJSONリスト、リンクURL、代替テキスト、画像src、新しいタブで開くかどうか。上記のブロック構文を参照してください。

loop_slides
Boolean

Trueの場合、複数スライドを連続してループ処理します。

True
num_seconds
Number

スライド間で一時停止する時間(秒)。

5
show_pagination
Boolean

スライダーの下にスライド間を移動するためのボタンを表示します。

True
sizing
Enumeration

スライドの高さに基づいてスライダーのサイズを変更するかどうかを指定します。指定可能な値は、staticまたはresizeです。

"static"
auto_advance
Boolean

num_secondsに設定された時間の後に自動的にスライドを移動します。

False
transition
Enumeration

スライド切り替えのタイプを設定します。指定可能な値は、fadeまたはslideです。

"slide"
caption_position
Enumeration

キャプションの位置をスライド上またはスライドの下にします。指定可能な値は、belowまたはsuperimposeです。

"below"
display_mode
Enumeration

画像ギャラリーの表示方法を指定します。指定可能な値は、standard、lightbox、thumbnailです。

"standard"
lightboxRows
Number

"display_mode"が"lightbox"に設定された場合に、このパラメーターはLightbox内に表示される行数を制御します。

3

ヘッダー

テキストをh1~h6タグとしてレンダリングするヘッダーモジュールを生成します。

{% header "header" %} {% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %} <span id="hs_cos_wrapper_my_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="header"> <h1>A clear and bold header</h1> </span>
ParameterTypeDescription Default
header_tag
String

レンダリングする見出しタグを選択します。指定可能な値は、h1、h2、h3、h4、h5、h6です。

h1
value
String

見出しモジュール内の既定のテキストをレンダリングします。

"A clear bold header"

アイコン

アイコンタグを追加してユーザーが選択できるようにし、使用するアイコンを追加します。サポートされるアイコンセットはFontAwesome 5.0.10および5.14.0です。

{% icon name="Accessible Icon" style="REGULAR" unicode="f368" icon_set="fontawesome-5.14.0" purpose="decorative" title="Accessible Icon" %} <span id="hs_cos_wrapper_module_42549274798_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_icon" style="" data-hs-cos-general-type="widget" data-hs-cos-type="icon"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"> <g id="layer1"> <path d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"></path> </g> </svg> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
name
String

アイコンの名前。

style
String

アイコンのスタイル。指定可能な値は以下のとおりです。REGULARまたはSOLID

REGULAR
unicode
String

アイコンのUnicode文字表現。

icon_set
String

使用するFontAwesomeアイコンセット。指定可能な値はfontawesome-5.14.0またはfontawesome-5.0.10です。

purpose
String

アイコンの目的。アクセシビリティーのために使用します。有効な値は、decorativeまたはsemanticです。decorativeに設定した場合、さらにaria-hidden="true"属性がアイコンに追加されます。

decorative
title
String

アイコンのsvgのタイトル要素と、そのタイトルを指すlabelledby属性。

画像

ユーザーがコンテンツエディターから画像を選択できる画像タグを作成します。画像をターゲットURLにリンクする場合は、下記のlinked_imageを使用する必要があります。

{% image "image" %} {% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %} <span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </span>
ParameterTypeDescription Default
alt
String

画像の既定の代替テキストを設定します。

src
String

imgタグのsrc属性を入力します。

width
Number

imgタグのwidth属性を設定します。

The width of the image
height
Number

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
Number

imgタグのhspace属性を設定します。

align
String

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
String

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

loading
String

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

画像のsrc

コンテンツエディター上に画像セレクターを作成する画像srcモジュールでは、imgタグの出力ではなく、画像のURLがレンダリングされます。画像srcをインラインCSSや他のマークアップに追加できるように、このタグは通常、no_wrapper=Trueパラメーターを付けて使用します。このタグの代用としては、export_to_template_contextパラメーターを使用する方法があります。

{% image_src "image_src" %} {% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %} //cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
ParameterTypeDescription Default
src
String

 既定のURL画像srcを指定します。

言語切り替え機能

特定CMSページの翻訳版へのリンクが付いた地球儀アイコンを追加します。多言語コンテンツの詳細についてはこちらをご覧ください。

{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %} <span id="hs_cos_wrapper_module_1487954976079503" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_language_switcher" style="" data-hs-cos-general-type="widget" data-hs-cos-type="language_switcher"> <div class="lang_switcher_class"> <div class="globe_class"> <ul class="lang_list_class"> <li> <a class="lang_switcher_link" href="http://www.hubspot.com">English</a> </li> <li> <a class="lang_switcher_link" href="http://www.hubspot.com/es">Spanish</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
display_mode
Enumeration

言語切り替え機能のテキストの言語。値は以下のとおりです。

  • Pagelangでは、言語の名前が、切り替え機能が有効になっているページの言語で表示されます。
  • Localizedでは、各言語の名前がその言語で表示されます。
  • Hybridは、2つの組み合わせです。
Localized

画像リンク

リンクでラップされた、ユーザーが選択可能な画像を作成します。このモジュールには、画像モジュールの全てのパラメーターおよび2つの追加パラメーターが含まれます。追加パラメーターには、リンク先URL、およびリンクを新しいウィンドウで開くかどうかを指定します。

{% linked_image "linked_image" %} {% linked_image "executive_image" label="Executive photo", link="https://twitter.com/bhalligan", open_in_new_tab=True, alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %} <span id="hs_cos_wrapper_executive_image" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"> <a href="https://twitter.com/bhalligan" target="_blank" id="hs-link-executive_image" style="border-width:0px;border:0px;"> <img src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300" class="hs-image-widget " style="width:300px;border-width:0px;border:0px;" width="300" alt="Photo of Brian Halligan" title="Photo of Brian Halligan"> </a> </span>
ParameterTypeDescription Default
alt
String

画像の既定の代替テキストを設定します。

src
String

imgタグのsrc属性を入力します。

width
Number

imgタグのwidth属性を設定します。

The width of the image
height
Number

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
Number

imgタグのhspace属性を設定します。

align
String

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
String

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolean

リンク先URLを別のタブで開くかどうかを選択します。

False
link
String

imgタグをラップするリンクの宛先URLを設定します。

target
String

リンクタグのtarget属性を設定します。

loading
String

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

ロゴ

ロゴモジュールは、コンテンツ設定にある貴社のロゴ画像をレンダリングします。

{% logo "logo" %} {% logo "my_logo" width="200" %} <span id="hs_cos_wrapper_my_logo" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo" style="" data-hs-cos-general-type="widget" data-hs-cos-type="logo"> <a href="//www.hubspot.com" id="hs-link-my_logo"> <img src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot"> </a> </span>
ParameterTypeDescription Default
suppress_company_name
Boolean

画像ロゴが設定されていない場合は会社名を非表示にします。

False
alt
String

画像の既定の代替テキストを設定します。

Value in Content Settings
src
String

imgタグのsrc属性を入力します。

Value in Content Settings
width
Number

imgタグのwidth属性を設定します。

The width of the image
height
Number

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
Number

imgタグのhspace属性を設定します。

align
String

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
String

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

open_in_new_tab
Boolean

リンク先URLを別のタブで開くかどうかを選択します。

False
link
String

imgタグをラップするリンクの宛先URLを設定します。

override_inherited_src
Boolean

trueの場合、srcを設定またはテンプレートから継承するのではなく、ロゴウィジェットのsrcを使用します。

True
heading_level
String

リンクされていないテキストベースのロゴを使用する場合、これにより、HTMLタグh1h2h3h4のいずれかの使用可能なオプションでテキストベースのロゴがラップされます。 

h1
loading
String

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

メニュー

[コンテンツ設定]>[詳細メニュー]のメニューツリーに基づいて詳細メニューを生成します。テンプレートおよびモジュールでのメニューの使用に関する詳細については、メニューとナビゲーションを参照してください。idnullに設定された場合、メニュータグはHubSpotアカウントの既定のメニューをレンダリングします。

{% menu "menu" %} {% menu "my_menu" id=456, site_map_name="Default", overrideable=False, root_type="site_root", flyouts="true", max_levels="2", flow="horizontal", label="Advanced Menu" %} <div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default"> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/music">Music</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/shows">Shows</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/blog">Blog</a></li> <li class="hs-menu-item hs-menu-depth-1"><a href="http://www.underseaband.com/contact">Contact</a></li> </ul> </div> </span>
ParameterTypeDescription Default
id
Integer

コンテンツ設定の詳細メニューのメニューツリーのID。

site_map_name
String

コンテンツ設定の詳細メニューのメニューツリーの名前。

"default"
root_type
Enumeration

詳細メニューのタイプを指定します。オプションは、"site_root"、"top_parent"、"parent"、"page_name"、"page_id"、"breadcrumb"です。これらの値は、静的、セクション別の動的、ページ別の動的、階層リンクに対応します。

"site_root"
flyouts
String

trueの場合、クラスがメニューツリーに追加されます。これにより、親にカーソルを置いたときに子メニュー項目が表示されるようにスタイルを設定できます。falseの場合、子メニュー項目は常に表示されます。

"true"
max_levels
Integer

マークアップにレンダリングされるメニューのネストレベル数を指定します。このパラメーターでは、メニューで展開可能なメニューツリーの子の数を指定します。

2
flow
Enumeration

メニュー項目の方向を設定します。これによりメニューツリーにクラスが追加されるため、状況に応じてスタイル設定できます。指定可能な値は、horizontal、vertical、vertical_flyoutsです。horizontalメニューでは項目が横に並んで表示され、verticalメニューでは上から下に表示されます。

"horizontal"
root_key
String

メニューのルートを見つけるために使用されます。root_typeをpage_idまたはpage_nameに設定した場合、このパラメーターはそれぞれページIDまたはページのラベルにする必要があります。

"horizontal"

パスワードプロンプト

パスワードで保護されたページにパスワードプロンプトを追加します。

{% password_prompt "password_prompt" %} {% password_prompt "my_password_prompt" submit_button_text="Submit", bad_password_message="Sorry, please try again.\n", label="Password Prompt" %} <span id="hs_cos_wrapper_password_prompt" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_prompt"> <form method="post" action="/_hcms/protected/auth"> <input name="content_id" type="hidden" value="1"> <input name="redirect_url" type="hidden" value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi"> <input name="password" type="password" id="hs-pwd-widget-password" style="height: 22px; margin-top: -5px"> <input type="submit" class="hs-button primary large" value="Submit"> </form> <script type="text/javascript"> document.getElementById("hs-pwd-widget-password").focus(); </script> </span>
ParameterTypeDescription Default
submit_button_text
String

 パスワード入力フィールドの下にあるボタンのラベル。

"Submit"
bad_password_message
String

 正しくないパスワードが入力された場合に表示されるメッセージ。

"<p>Sorry, please try again.</p>"
password_placeholder
String

 パスワードフィールド内のプレースホルダーテキストを定義します。

"Password"

記事フィルター

トピック別の記事、月別の記事、執筆者別の記事のリンクリストを作成します。

注:このモジュールはブログ記事テンプレートでのみ使用できます。

{% post_filter "post_filter" %} {% post_filter "posts_by_topic" select_blog="default", expand_link_text="see all", overrideable=False, list_title="Posts by Topic", max_links=5, filter_type="topic", label="Posts by Topic" %} <span id="hs_cos_wrapper_posts_by_topic" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_filter"> <div class="block"> <h3>Posts by Topic</h3> <div class="widget-module"> <ul> <li><a href="http://www.underseaband.com/blog/topic/pedals">pedals (15)</a></li> <li><a href="http://www.underseaband.com/blog/topic/music-recommendations">music recommendations (7</a></li> <li><a href="http://www.underseaband.com/blog/topic/undersea">Undersea (6)</a> </li> <li> <a href="http://www.underseaband.com/blog/topic/band">band (2)</a> </li> <li> <a href="http://www.underseaband.com/blog/topic/diy-tips">DIY tips (2)</a> </li> <li> <a href="http://www.underseaband.com/blog/topic/visual-artists">Visual artists (1)</a> </li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"default" or blog ID

使用するHubSpotブログを選択します。このパラメーターでは、ブログIDまたは"default"値のどちらかを使用します。

"default"
expand_link_text
String

 記事数が表示可能なmax_links数を超える場合に表示するテキストリンク。リンクを省略するには、パラメーターを除外します。

"see all"
list_title
String

表示するリストタイトル。

""
list_tag
String

リストに使用されるタグを設定します。この値は通常、"ul"または"ol"にします。

"ul"
title_tag
String

リストタイトルに使用されるタグを設定します。

"h3"
max_links
Number

表示するフィルター値の最大数。全て表示するには、パラメーターを除外します。

5
filter_type
Enumeration

フィルターのタイプを選択します。有効な値は、"topic""month""author"です。

"topic"

記事一覧

最も人気のある記事または上位記事のリストを追加します。

このタグは、ブログ記事テンプレートでのみ使用できます。このタグのコンテンツは、クライアント側で非同期的に読み込まれます。そのため、読み込まれた後にフィードを操作する場合は、その操作を処理するグローバルJS関数を定義する必要があります。関数hsPostListingComplete(feeds)を使用してください。feedsには完了した全てのフィードのjQueryセレクターを渡します。この関数でDOMオブジェクトを直接操作できます。

{% post_listing "post_listing" %} {% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %} <span id="hs_cos_wrapper_top_posts" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="post_listing"> <div class="block"> <h3>Most popular posts</h3> <div class="widget-module"> <ul> <li><a href="http://www.underseaband.com/blog/5-emerging-bands-that-you-need-to-hear">5 emerging bands that you need to hear</a></li> <li><a href="http://www.underseaband.com/blog/pedal-board-power-supplies">Pedal Board Power Supplies</a></li> <li><a href="http://www.underseaband.com/blog/pedal-board-wiring">Pedal Board Wiring</a></li> <li><a href="http://www.underseaband.com/blog/pedal-board-layouts">Pedal Board Layouts</a></li> <li><a href="http://www.underseaband.com/blog/your-teeth-shake">Your Teeth Shake</a></li> </ul> </div> </div> </span>
ParameterTypeDescription Default
select_blog
"default" or blog ID

 リストに使用するHubSpotブログを選択します。このパラメーターでは、ブログIDまたは"default"値のどちらかを使用します。

"default"
list_title
String

表示するリストタイトル。

""
list_tag
String

リストに使用されるタグを設定します。この値は通常、"ul"または"ol"にします。

"ul"
title_tag
String

リストタイトルに使用されるタグを設定します。

"h3"
listing_type
String

指定した期間のブログ記事を新着順または人気順に表示します。指定可能な値は、recent、popular_all_time、popular_past_year、popular_past_six_months、popular_past_monthです。

"recent"
max_links
Number

 リストするブログ記事の最大数。

5
include_featured_image
Boolean

 記事リンクと共にキービジュアルを表示します。

False

require_css

<head>でレンダリングするstyle要素を読み込むHubLタグ。<head />にレンダリングされるスタイルシートを、ここで示すインラインの方法ではなく<link />タグを使用して別のファイルから読み込むには、代わりにHubL関数require_css(absolute_url)を使用します。

{{ standard_header_includes }} <!-- more html --> {% require_css %} <style> body { color: red; } </style> {% end_require_css %} {{ standard_footer_includes }} <!-- other standard header html --> <style> body { color: red; } </style> <!-- more html --> <!-- other standard footer html -->

require_head

テンプレートの<head>内であるstandard_header_includesの内部に配置される要素を読み込むHubLタグ。ほとんどのJavaScriptとCSSについては、require_jsrequire_cssを参照してください。require_headの使用例には、metaタグの指定、モジュールからの特殊なlinkタグ(プリフェッチや事前接続など)があります。

{% require_head %} <meta name="third-party-app-verification-id" content="123456"> <link rel="prefetch" href="http://example.com/large-script.js"> <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.--> {% end_require_head %}

require_js

レンダリングするscript要素を読み込むHubLタグ。<head />にレンダリングされるスクリプトを、ここで示すインラインの方法ではなく<script />タグを使用して別のファイルから読み込むには、代わりにHubL関数require_js(absolute_url)を使用します。

{{ standard_header_includes }} <!-- more html --> {% require_js position="footer" %} <script> console.log("The CMS is awesome!"); </script> {% end_require_js %} {{ standard_footer_includes }} <!-- other standard header html --> <!-- more html --> <script> console.log("The CMS is awesome!"); </script> <!-- other standard footer html -->
ParameterTypeDescription Default
position
String

インラインスクリプトをレンダリングする位置を設定します。オプションは、"head""footer"です。

"footer"

リッチテキスト

WYSIWYGコンテンツエディターを作成します。

{% rich_text "rich_text" %} {% rich_text "left_column" label="Enter HTML here" html="<div>My rich text default content</div>" %} Block Syntax Example: {% widget_block rich_text "right_column" overrideable=True, label="Right Column" %} {% widget_attribute "html" %} <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul> {% end_widget_attribute %} {% end_widget_block %} <span id="hs_cos_wrapper_right_column" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul> </span>
ParameterTypeDescription Default
html
String

モジュールの既定のリッチ テキスト コンテンツ。

<h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>

RSSリスティング

内部または外部のRSSフィードからコンテンツのリストを読み込みます。

このモジュールは、クライアント側で非同期的に読み込まれます。そのため、読み込まれた後にフィードを操作する場合は、その操作を処理するグローバルJS関数を定義する必要があります。関数hsRssFeedComplete(feeds)を使用してください。feedsには完了した全てのフィードのjQueryセレクターを渡します。この関数でDOMオブジェクトを直接操作できます。
{% rss_listing "rss_listing" %} {% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="24732847"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="5", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %} <span id="hs_cos_wrapper_my_rss_listing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rss_listing"> <h3></h3> <div class="hs-rss-module feedreader_box"> <div class="hs-rss-item hs-with-featured-image"> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="http://www.underseaband.com/blog/city-where-stars-are-not"><span>City Where Stars Are Not</span></a> <div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span> <span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">5/1/15 11:02 AM</span> </div> <div class="hs-rss-description"> <p> We are pleased to announce the release of our next single "City Where Stars Are Not"! It will be available Tuesday May 5th and features lead vocals by bassist David Hunt. Thanks to Peter...<a href="http://www.underseaband.com/blog/city-where-stars-are-not">Read more</a> </p> </div> </div> <div class="hs-rss-item-image-wrapper"> <img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/citywherestarsarenot.png?t=1430835551915"> </div> </div> <div class="hs-rss-item hs-with-featured-image"> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="http://www.underseaband.com/blog/loud-louder"><span>New Pedal! ChadderBox Effects Loud Louder</span></a> <div class="hs-rss-byline">by <span class="hs-rss-author">Corey Wade</span> <span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/27/15 10:30 AM</span> </div> <div class="hs-rss-description"> <p> I have the good fortune to have recently met Chad from ChadderBox Effects. It turns out he works part-time on the same floor in the same building where I also work part-time. When I found out Chad...<a href="http://www.underseaband.com/blog/loud-louder">Read more</a> </p> </div> </div> <div class="hs-rss-item-image-wrapper"> <img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/10724991_612551458879970_1563949619_n.jpg?t=1430835551915"> </div> </div> <div class="hs-rss-item hs-with-featured-image"> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="http://www.underseaband.com/blog/introducing-ariél-torres"><span>Introducing: Ariél Torres</span></a> <div class="hs-rss-byline">by <span class="hs-rss-author">Corey Wade</span> <span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/24/15 10:30 AM</span> </div> <div class="hs-rss-description"> <p> Everyone needs to check out Boston-based visual artist Ariél Torres’ work. He was very nice to let us use one of his pieces for “Your Teeth Shake”, and we couldn’t be more stoked about it. Check out...<a href="http://www.underseaband.com/blog/introducing-ariél-torres">Read more</a> </p> </div> </div> <div class="hs-rss-item-image-wrapper"> <img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/tangledupinblue-449270-edited.jpg?t=1430835551915"> </div> </div> <div class="hs-rss-item hs-with-featured-image"> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="http://www.underseaband.com/blog/new-pedal-fuzzrocious-rat-tail"><span>New Pedal! Fuzzrocious Rat Tail</span></a> <div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span> <span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/21/15 4:34 PM</span> </div> <div class="hs-rss-description"> <p> I found myself in the position of needing to put together a new board to fill in on guitar with our friends Glacier.&nbsp;First I needed a distortion pedal that could pull of their heavier bits so I...<a href="http://www.underseaband.com/blog/new-pedal-fuzzrocious-rat-tail">Read more</a> </p> </div> </div> <div class="hs-rss-item-image-wrapper"> <img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/11023171_476701342477661_420938091_n.jpg?t=1430835551915"> </div> </div> <div class="hs-rss-item hs-with-featured-image"> <div class="hs-rss-item-text"> <a class="hs-rss-title" href="http://www.underseaband.com/blog/using-two-amps"><span>Using two amps</span></a> <div class="hs-rss-byline">by <span class="hs-rss-author">Matthew Vincenty</span> <span class="hs-rss-posted-at">posted at</span> <span class="hs-rss-date">4/17/15 3:58 PM</span> </div> <div class="hs-rss-description"> <p> Sometimes just one amp isn't enough. Using multiple amps together can yield a sound that is more than the sum of it's parts. Both Corey and myself have split our singal to multiple amps. Currently...<a href="http://www.underseaband.com/blog/using-two-amps">Read more</a> </p> </div> </div> <div class="hs-rss-item-image-wrapper"> <img class="hs-rss-featured-image" src="http://www.underseaband.com/hubfs/Blog_Images/E719C0A7-6C2A-41FB-9A59-FA8236DED4A5.jpg?t=1430835551915"> </div> </div> </div> </span>
ParameterTypeDescription Default
show_title
Boolean

 RSSフィードタイトルを表示または非表示にします。

True
show_date
Boolean

投稿日を表示します。

True
show_author
Boolean

執筆者名を表示します。

True
show_detail
Boolean

limit_to_charsパラメーターによって設定された最大文字数までの記事要約を表示します。

True
title
String

RSSフィードリストの上の見出しを入力します。

limit_to_chars
Number

要約に表示する文字の最大数。

200
publish_date_format
String

公開日の形式。指定可能な値は、"short""medium""long"です。"MMMM d, yyyy 'at' h:mm a"などのカスタム形式も使用できます。

"short"
attribution_text
String

執筆者を記事に関連付けるテキスト

"by"
click_through_text
String

記事要約の最後にあるクリックスルーリンクに表示されるテキスト。

"Read more"
publish_date_text
String

 記事がいつ公開されたかを示すテキスト。

"posted at"
include_featured_image
Boolean

HubSpotが生成したRSSフィードの記事リンクと共にキービジュアルを表示します。

False
item_title_tag
String

各記事タイトルのHTMLタグを指定します。

span
is_external
Boolean

RSSフィードは外部ブログです。

False
number_of_items
Number

表示する記事の最大数。

5
publish_date_language
String

公開日の言語を指定します。

en_US
rss_url
String

 RSSフィードが所在するURL。

content_group_id
String

フィードソースが内部ブログの場合、ブログのID。

select_blog
String

内部HubSpotブログフィードを選択するために使用できます。

default
feed_source
String

RSSフィードのソースを設定します。内部の場合、通常の形式は{rss_url="", is_external=False, content_group_id="2502431580"}です。外部の場合、通常の形式は{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}です。

tag_id
Number

フィードソースが内部ブログの場合、タグのID。

セクションヘッダー

htmlの見出しと<p>サブヘッダーを生成します。

{% section_header "section_header" %} {% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header" %} <span id="hs_cos_wrapper_my_section_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="section_header"> <div class="page-header section-header"> <h1>A clear and bold header</h1> <p class="secondary-header"><span id="hs_cos_wrapper_subheader" class="section-subheader">A more subdued subheader</span></p> </div> </span>
ParameterTypeDescription Default
header
String

ヘッダーに表示するテキスト。

"A clear and bold header"
subheader
String

サブヘッダーに表示するテキスト。

"A more subdued subheader"
heading_level
String

セマンティックHTMLの見出しのレベル。h1からh6までがサポートされます。

"h1"

シンプルメニュー

シンプルメニューでは、ページレベルで変更できる基本的なナビゲーションメニューを作成できます。通常のメニューモジュールとは異なり、シンプルメニューはウェブサイト設定のナビゲーション画面からは管理されず、テンプレートとページエディターから管理されます。ブロック構文を使用して既定のメニューツリーを設定できます。

{% simple_menu "simple_menu" %} {% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %} Block Syntax Example: {% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu" %} {% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %} {% end_widget_block %} <span id="hs_cos_wrapper_my_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <ul></ul> </span> <span id="hs_cos_wrapper_block_simple_menu" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"> <div id="hs_menu_wrapper_module_143093417497114626" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name=""> <ul> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com" target="_self">Home</a></li> <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children"><a href="//www.hubspot.com/internet-marketing-company" target="_self">About</a> <ul class="hs-menu-children-wrapper"> <li class="hs-menu-item hs-menu-depth-2"><a href="//www.hubspot.com/company/management" target="_self">Our Team</a></li> </ul> </li> <li class="hs-menu-item hs-menu-depth-1"><a href="//www.hubspot.com/pricing" target="_self">Pricing</a></li> </ul> </div> </span>
ParameterTypeDescription Default
orientation
Enumeration

ページのメニュー項目の方向をスタイル設定できるようにするための、メニューマークアップのクラスを定義します。指定可能な値は"horizontal""vertical"です。

"horizontal"
menu_tree
JSON

ページリンク名とターゲットURLを含むメニュー構造。

[]

ソーシャルシェアリング

ソーシャル シェアリング タグは、特定のページをシェアするために使用できるソーシャルメディアのアイコンを生成します。このモジュールをブロック構文と組み合わせると、アイコン画像などをカスタマイズできます。

{% social_sharing "social_sharing" %} {% social_sharing "my_social_sharing" use_page_url=True %} Block Syntax Example: {% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %} {% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %} {% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %} {% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %} {% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %} {% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %} {% end_widget_block %} <span id="hs_cos_wrapper_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing"> <a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Facebook"> </a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on LinkedIn"> </a> <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Twitter"> </a> <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=http%3A%2F%2Fcdn1.hubspot.com%2Fhub%2F158015%2F305390_10100548508246879_837195_59275782_6882128_n.jpg" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Pinterest"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail" target="_blank" style="width:24px;border-width:0px;border:0px;"> <img src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Email"> </a> </span>
ParameterTypeDescription Default
use_page_url
Boolean

trueの場合、モジュールは既定でページのURLをシェアします。

True
link
String

use_page_urlがfalseの場合、共有する別のURLを指定します。

pinterest
JSON

Pinterestリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
twitter
JSON

Twitterリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
linked_in
JSON

LinkedInリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
facebook
JSON

Facebookリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
email
JSON

Eメール シェア リンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above

スペーサー

スペーサータグは空のspanタグを生成します。このタグは、スペーサーとして機能するようにスタイル設定できます。ドラッグ&ドロップレイアウトで、スペーサーモジュールはspan1~span12のクラスが指定されたコンテナーでラップされ、モジュールが12列のレスポンシブグリッドでどれほどのスペースを占めるかを指定します。

{% space "space" %} {% space "spacer" label="Horizontal Spacer" %} <span id="hs_cos_wrapper_module_spacer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space" style="" data-hs-cos-general-type="widget" data-hs-cos-type="space"></span>

テキスト

1行テキストを作成します。このタグは、no_wrapper=Trueパラメーターを指定してマークアップと組み合わせて使用すると便利です。例えば、定義済みアンカーのターゲット定義をエンドユーザーに許可する場合、no_wrapper=Trueを指定したテキストモジュールをhrefに入力できます。

{% text "text" %} {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %} <span id="hs_cos_wrapper_simple_text_field" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">This is the default value for this text field</span>
ParameterTypeDescription Default
value
String

1行テキストフィールドの既定のテキストを設定します。

テキストエリア

テキストエリアはユーザーがプレーンテキストを入力できる点でテキストモジュールと似ていますが、コンテンツエディター上で大きなエリアを提供できます。このモジュールではHTMLはサポートされません。定義済みのラッピングタグ内で直接使用する場合は、no_wrapper=trueパラメーターを追加します。

{% textarea "my_textarea" %} {% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.
ParameterTypeDescription Default
value
String

テキストエリアの既定のテキストを設定します。

動画プレーヤー

[埋め込み、共有、トラッキングを許可]を選択したファイルマネージャー動画でVidyard動画プレーヤーをレンダリングします。

{% video_player "embed_player" %} {% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
ParameterTypeDescription Default
hide_playlist
Boolean

動画のプレイリストを非表示にします。

True
playlist_color
String

プレイリストの16進表記の色の値。

play_button_color
String

再生ボタンと一時停止ボタンの16進表記の色の値。

#2A2A2A
embed_button
Boolean

プレーヤーに埋め込みボタンを表示します。

False
viral_sharing
Boolean

プレーヤーにソーシャルネットワークのシェアボタンを表示します。

False
width
Number

埋め込み動画プレーヤーの幅。

Auto
height
Number

埋め込み動画プレーヤーの高さ。

Auto
player_id
Number

埋め込む動画のplayer_idGET /filemanager/api/v2/files/:file_idを使用してmeta.video_data.hosting_infos dictで返されます。

style
String

プレーヤーの追加のスタイル。

conversion_asset
JSON

プレーヤーのイベント設定。動画再生の前または後にCTAまたはフォームをレンダリングできます。このパラメーターは、type(FORMまたはCTA)、id(typeオブジェクトのGUID)、position(POSTまたはPRE)という3つのパラメーターを含むJSONオブジェクトを受け入れます。

See above example

参考になりましたか? *
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。