商品ランキング｜２カラム版

croover

ランキング1位

おすすめサービス

国内シェア No.1の安心

このパターンは記事ページで使うと綺麗に反映されます。

ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。

公式サイトで購入する

ランキング2位

おすすめサービス

顧客満足度 No.1の安心

このパターンは記事ページで使うと綺麗に反映されます。

ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。

公式サイトで購入する

ランキング3位

おすすめサービス

顧客満足度 No.1の安心

このパターンは記事ページで使うと綺麗に反映されます。

ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。

公式サイトで購入する

ランキング / CTA

コードをコピー

								<!-- wp:jinr-blocks/fullwidth {"fullWidthSize":"d\u002d\u002dfullwidth-article","fullWidthBgColor":"rgba(255,255,255,0)"} -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container"><section class="b--jinr-fullwidth" style="background-color:rgba(255,255,255,0)"><div class="d--fullwidth-article d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#555555"><!-- wp:jinr-blocks/designtitle {"mainText":"おすすめサービス","subText":"ランキング1位","divText":"おすすめサービス","titleDesign":"2","radioSymbol":"icon","symbolIcon":"crown","mainTextColor":"#4e4e4e","subTextColor":"#515151","titleDesignColor":"#f8e505","symbolColor":"#ffd900","tagSelect":"div","className":"undefined","bottomMarginPcAttribute":"d\u002d\u002dbottom-margin-s-pc","bottomMarginSpAttribute":"d\u002d\u002dbottom-margin-s-sp"} -->
<section class="wp-block-jinr-blocks-designtitle b--jinr-block b--jinr-h2rich d--h2rich-left d--h2rich-style2 d--titledesign-weight-thin d--h2rich-icon undefined d--bottom-margin-s-pc d--bottom-margin-s-sp js--scr-animation" style="border-color:#f8e505"><div class="c--h2rich-decoration"><div class="a--h2rich-icon ef" style="color:#ffd900"><i class="jin-icons jin-ifont-crown"></i></div></div><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#515151">ランキング1位</span><div class="a--h2rich-maincopy d--bold ef" style="color:#4e4e4e">おすすめサービス</div></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"id":641,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://jinr-theme.com/wp-content/uploads/2022/02/アートボード-2-8.png" alt="" class="wp-image-641"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><span class="jinr-d--font-size d--fontsize-24px">国内シェア No.1の安心</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>このパターンは記事ページで使うと綺麗に反映されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。</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} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button 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>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:jinr-blocks/designtitle {"mainText":"おすすめサービス","subText":"ランキング2位","divText":"おすすめサービス","titleDesign":"3","radioSymbol":"icon","symbolIcon":"crown","mainTextColor":"#4e4e4e","subTextColor":"#515151","titleDesignColor":"#f2f2f2","symbolColor":"#e7e7e7","tagSelect":"div","className":"undefined","topMarginPcAttribute":"d\u002d\u002dtop-margin-xl-pc","topMarginSpAttribute":"d\u002d\u002dtop-margin-xl-sp"} -->
<section class="wp-block-jinr-blocks-designtitle b--jinr-block b--jinr-h2rich d--h2rich-left d--h2rich-style3 d--titledesign-weight-thin d--h2rich-icon undefined d--top-margin-xl-pc d--top-margin-xl-sp js--scr-animation" style="border-color:#f2f2f2"><div class="c--h2rich-decoration"><div class="a--h2rich-icon ef" style="color:#e7e7e7"><i class="jin-icons jin-ifont-crown"></i></div></div><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#515151">ランキング2位</span><div class="a--h2rich-maincopy d--bold ef" style="color:#4e4e4e">おすすめサービス</div></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"id":641,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://jinr-theme.com/wp-content/uploads/2022/02/アートボード-2-8.png" alt="" class="wp-image-641"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><span class="jinr-d--font-size d--fontsize-24px">顧客満足度 No.1の安心</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>このパターンは記事ページで使うと綺麗に反映されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。</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} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button 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>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:jinr-blocks/designtitle {"mainText":"おすすめサービス","subText":"ランキング3位","divText":"おすすめサービス","titleDesign":"3","radioSymbol":"icon","symbolIcon":"crown","mainTextColor":"#4e4e4e","subTextColor":"#515151","titleDesignColor":"#f1e5cc","symbolColor":"#eba653","tagSelect":"div","className":"undefined","topMarginPcAttribute":"d\u002d\u002dtop-margin-xl-pc","topMarginSpAttribute":"d\u002d\u002dtop-margin-xl-sp"} -->
<section class="wp-block-jinr-blocks-designtitle b--jinr-block b--jinr-h2rich d--h2rich-left d--h2rich-style3 d--titledesign-weight-thin d--h2rich-icon undefined d--top-margin-xl-pc d--top-margin-xl-sp js--scr-animation" style="border-color:#f1e5cc"><div class="c--h2rich-decoration"><div class="a--h2rich-icon ef" style="color:#eba653"><i class="jin-icons jin-ifont-crown"></i></div></div><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#515151">ランキング3位</span><div class="a--h2rich-maincopy d--bold ef" style="color:#4e4e4e">おすすめサービス</div></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"id":641,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://jinr-theme.com/wp-content/uploads/2022/02/アートボード-2-8.png" alt="" class="wp-image-641"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><span class="jinr-d--font-size d--fontsize-24px">顧客満足度 No.1の安心</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>このパターンは記事ページで使うと綺麗に反映されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。ここに紹介テキストを書きます。</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} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button 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>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->

デザイン見本帳