WELCOME

デザイン見本帳

コードをコピーを押すと、デザインをコピーできます。
執筆画面に戻って、右クリックで貼り付けてください。

※ コピぺして「ブロックリカバリー」を求められた場合は、リカバリーをしてもらえばOKです
※ SSL化されていないサイトはコピーがうまくできません。その時はWEB版をご利用ください

パターン一覧

コンセプト02|ダイナミック

croover
01 Concept

開発者の想い

直感的なデザインツールで「こうしたい」の思いに応える

ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。

ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。

コードをコピー
								<!-- wp:jinr-blocks/fullwidth {"fullWidthBgColor":"#ffffff"} -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container"><section class="b--jinr-fullwidth" style="background-color:#ffffff"><div class="d--fullwidth-max d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#555555"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile js--scr-animation"><!-- wp:column {"width":"30px"} -->
<div class="wp-block-column" style="flex-basis:30px"><!-- wp:jinr-blocks/designtitle {"mainText":"開発者の想い","subText":"01 Concept","divText":"開発者の想い","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#444444","symbolColor":"#444444","className":"jinr-custom-title07","jinrBlocksCSSAttribute":"/*横並びにする*/\n.jinr-custom-title07 .c\u002d\u002dh2rich-contents{\n\tdisplay:flex;\n\tgap:0.5em !important;\n\talign-items: center;\n}\n\n/*サブコピーのデザイン*/\n.jinr-custom-title07 .a\u002d\u002dh2rich-subcopy{\n\tletter-spacing:3px !important;\n\twriting-mode: vertical-rl;\n\t\tmargin-bottom:10px;\n}\n\n/*SP - スマホ調整*/\n@media (max-width: 781px){\n\t.jinr-custom-title07 .a\u002d\u002dh2rich-maincopy{\n\t\tfont-weight:400;\n\t\tfont-size:15px !important;\n\t}\n\n}\n\n/*メインコピー*/\n.jinr-custom-title07{\n\twriting-mode: vertical-rl;\n\tletter-spacing:3px !important;\n}\n"} -->
<div class="jinr-add-class-container"><section class="wp-block-jinr-blocks-designtitle b--jinr-block b--jinr-h2rich d--h2rich-left d--h2rich-style1 d--titledesign-weight-thin d--h2rich-none jinr-custom-title07 js--scr-animation" style="border-color:#444444"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">01 Concept</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">開発者の想い</h2></div></section><style jsx="true">/*横並びにする*/
.jinr-custom-title07 .c--h2rich-contents{
	display:flex;
	gap:0.5em !important;
	align-items: center;
}

/*サブコピーのデザイン*/
.jinr-custom-title07 .a--h2rich-subcopy{
	letter-spacing:3px !important;
	writing-mode: vertical-rl;
		margin-bottom:10px;
}

/*SP - スマホ調整*/
@media (max-width: 781px){
	.jinr-custom-title07 .a--h2rich-maincopy{
		font-weight:400;
		font-size:15px !important;
	}

}

/*メインコピー*/
.jinr-custom-title07{
	writing-mode: vertical-rl;
	letter-spacing:3px !important;
}
</style></div>
<!-- /wp:jinr-blocks/designtitle --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:image {"id":2615,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://jinr-theme.com/wp-content/uploads/2022/06/アートボード-12.png" alt="" class="wp-image-2615"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong><span class="jinr-d--font-size d--fontsize-24px">直感的なデザインツールで「こうしたい」の思いに応える</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここに説明を書きます。ここに説明を書きます。ここに説明を書きます。</p>
<!-- /wp:paragraph -->

<!-- wp:jinr-blocks/button {"content":"Read more","inputUrl":"https://jinr.jp/","buttonDesign":"arrow","buttonLayout":"d\u002d\u002dbutton-right","registeredButton":"5"} -->
<div class="wp-block-jinr-blocks-button b--jinr-block b--jinr-button js--scr-animation">[jinr_button5 href="https://jinr.jp/" align="d--button-right"]<span>Read more</span>[/jinr_button5]</div>
<!-- /wp:jinr-blocks/button --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->							
記事URLをコピーしました