「ボタン」タグの記事一覧｜JINRパターンブロック

cv-button

ボタン

インフォメーションボタン

コードをコピー

												<!-- wp:jinr-blocks/fullwidth {"fullWidthSize":"d\u002d\u002dfullwidth-article","className":"jinr-custom-buttoninfo-fullwidth"} -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container jinr-custom-buttoninfo-fullwidth"><section class="b--jinr-fullwidth" style="background-color:#f5f5f5"><div class="d--fullwidth-article d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#555555"><!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"15px"}}} -->
<p class="has-text-align-center" style="font-size:15px">【期間限定】20xx年4月まで、お得なキャンペーン開催中！</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:jinr-blocks/button {"content":"小さいボタンをここに","inputUrl":"https://jinr.jp/","className":"jinr-custom-button-info","jinrBlocksCSSAttribute":"/*ボタン上下余白OFF*/\n.jinr-custom-button-info.b\u002d\u002djinr-button{\n\tmargin-top:0 !important;\n\tmargin-bottom:0 !important;\n}\n\n.jinr-custom-buttoninfo-fullwidth .wp-container-3{\n\tgap:0 !important;\n}\n\n/*ボタンを小さく*/\n.jinr-custom-button-info a{\n\tpadding:10px 15px !important;\n}\n\n/*カラム上下余白*/\n.jinr-custom-buttoninfo-fullwidth .wp-block-columns{\n\tmargin:1.5em !important;\n}"} -->
<div class="jinr-add-class-container"><div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button jinr-custom-button-info js--scr-animation">[jinr_button1 href="https://jinr.jp/" align="d--button-center"]<span>小さいボタンをここに</span>[/jinr_button1]</div><style jsx="true">/*ボタン上下余白OFF*/
.jinr-custom-button-info.b--jinr-button{
	margin-top:0 !important;
	margin-bottom:0 !important;
}

.jinr-custom-buttoninfo-fullwidth .wp-container-3{
	gap:0 !important;
}

/*ボタンを小さく*/
.jinr-custom-button-info a{
	padding:10px 15px !important;
}

/*カラム上下余白*/
.jinr-custom-buttoninfo-fullwidth .wp-block-columns{
	margin:1.5em !important;
}</style></div>
<!-- /wp:jinr-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->

マイクロコピーボタン

コードをコピー

												<!-- wp:jinr-blocks/background {"backgroundBgColor":"#fcfcfc","backgroundOpacity":0,"backgroundSize":5,"className":"undefined"} -->
<div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background undefined"><div class="o--background-container d--background-design-flat d--background-shadow-s d--border-outset"><div class="c--background-inner d--border-none d--border-1px t--round" style="border-color:#c5c5c5"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"> <i class="jin-icons in--p jin-ifont-backslash" aria-hidden="true"></i> <span class="jinr-d--font-size d--fontsize-15px"> このボタンから購入で〇〇円OFF </span> <i class="jin-icons in--p jin-ifont-slash" aria-hidden="true"></i> </p>
<!-- /wp:paragraph -->

<!-- wp:jinr-blocks/button {"content":"いますぐ申し込む  \u003ci class=\u0022jin-icons in\u002d\u002dp jin-ifont-arrowthin\u0022 aria-hidden=\u0022true\u0022\u003e\u003c/i\u003e ","inputUrl":"https://jinr.jp/","toggleTab":true,"className":"d\u002d\u002dbutton-type1 d\u002d\u002dbutton-center undefined","topMarginPcAttribute":"d\u002d\u002dtop-margin-s-pc"} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button d--button-type1 d--button-center undefined d--top-margin-s-pc js--scr-animation">[jinr_button1 target="true" href="https://jinr.jp/" align="d--button-center"]<span>いますぐ申し込む  <i class="jin-icons in--p jin-ifont-arrowthin" aria-hidden="true"></i> </span>[/jinr_button1]</div>
<!-- /wp:jinr-blocks/button --></div></div><div class="a--background-color" style="background:#fcfcfc"></div><div class="a--background-image t--round d--background-pattern1" style="opacity:1;background-size:1.6666666666666667%"></div></div>
<!-- /wp:jinr-blocks/background -->

コンバージョンボタン3（修正中）

コードをコピー

												<!-- wp:columns {"className":".jinr-custom-cv-column"} -->
<div class="wp-block-columns .jinr-custom-cv-column js--scr-animation"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:jinr-blocks/button {"content":"レビュー記事を読む","buttonDesign":"outline","buttonLayout":"d\u002d\u002dbutton-right","registeredButton":"2","className":"wp-block-jinr-blocks-button b\u002d\u002djinr-block b\u002d\u002djinr-button d\u002d\u002dbutton-type1 d\u002d\u002dbutton-center jinr-custom-wbutton-outline","jinrBlocksCSSAttribute":""} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button d--button-type1 d--button-center jinr-custom-wbutton-outline js--scr-animation">[jinr_button2 href="" align="d--button-right"]レビュー記事を読む[/jinr_button2]</div>
<!-- /wp:jinr-blocks/button --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:jinr-blocks/button {"content":"公式ページで購入","buttonLayout":"d\u002d\u002dbutton-left","className":"d\u002d\u002dbutton-type1 d\u002d\u002dbutton-center jinr-custom-wbutton-fill"} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button d--button-type1 d--button-center jinr-custom-wbutton-fill js--scr-animation">[jinr_button1 href="" align="d--button-left"]公式ページで購入[/jinr_button1]</div>
<!-- /wp:jinr-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

お問い合わせフォーム誘導

コードをコピー

												<!-- wp:jinr-blocks/background {"backgroundBgColor":"#f5f9fd","backgroundPattern":"d\u002d\u002dbackground-pattern-original"} -->
<div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background"><div class="o--background-container d--background-design-flat d--background-shadow-s d--border-outset"><div class="c--background-inner d--border-none d--border-1px t--round" style="border-color:#c5c5c5"><!-- wp:jinr-blocks/designtitle {"mainText":"Contact","subText":"お問い合わせ","divText":"Contact","radioLayout":"center","radioSymbol":"icon","symbolIcon":"v2mail"} -->
<section class="wp-block-jinr-blocks-designtitle b--jinr-block b--jinr-h2rich d--h2rich-center d--h2rich-style1 d--titledesign-weight-thin d--h2rich-icon js--scr-animation" style="border-color:#407FED"><div class="c--h2rich-decoration"><div class="a--h2rich-icon ef" style="color:#407FED"><i class="jin-icons jin-ifont-v2mail"></i></div></div><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#407FED">お問い合わせ</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#407FED">Contact</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">当サイトへのご相談はこちら</p>
<!-- /wp:paragraph -->

<!-- wp:jinr-blocks/button {"content":"お問い合わせページへ  \u003ci class=\u0022jin-icons in\u002d\u002dp jin-ifont-arrowthin\u0022 aria-hidden=\u0022true\u0022\u003e\u003c/i\u003e ","inputUrl":"https://jinr.jp/download/","toggleTab":true} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button js--scr-animation">[jinr_button1 target="true" href="https://jinr.jp/download/" align="d--button-center"]<span>お問い合わせページへ  <i class="jin-icons in--p jin-ifont-arrowthin" aria-hidden="true"></i> </span>[/jinr_button1]</div>
<!-- /wp:jinr-blocks/button --></div></div><div class="a--background-color" style="background:#f5f9fd"></div><div class="a--background-image d--background-pattern-original t--round d--background-repeat-on" style="opacity:0.29999999999999993;background-image:url();background-size:50%"></div></div>
<!-- /wp:jinr-blocks/background -->

デザイン見本帳

ボタン