WELCOME

デザイン見本帳

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

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

パターン一覧

ナビゲーション01 |サイトマップ用

croover
コードをコピー
								<!-- wp:jinr-blocks/fullwidth {"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-max d--fullwidth-pad0 d--fullwidth-pad0-sp t--main-width" style="color:#555555"><!-- wp:jinr-blocks/background {"backgroundBgColor":"#fdfdfd","backgroundBorderDesign":"d\u002d\u002dborder-solid","backgroundBorderColor":"#f7f7f7","className":"wp-block-jinr-blocks-background b\u002d\u002djinr-block b\u002d\u002djinr-background jinr-custom-navigation01","jinrBlocksCSSAttribute":".jinr-custom-navigation01 .c\u002d\u002dbackground-inner{\npadding:15px 50px;\n}\n@media (max-width: 781px){\n.jinr-custom-navigation01 .wp-block-columns{\ngap:0 !important;\n}\n.wp-block-columns:not(.is-not-stacked-on-mobile) \u003e .wp-block-column:not(:first-child){\nmargin-left:0 !Important;\n}\n}\n\n@media (min-width: 552px){\n\tmargin-bottom:0 !Important;\n}\n\n.jinr-custom-navigation01  p{\nmargin:14px 0 14px 0  !important;\n}\n.jinr-custom-navigation01 a{\ncolor:#444 !Important;\ntext-decoration:none !important;\ntransition:.3s;\n}\n.jinr-custom-navigation01 a:hover{\nopacity:.7;\n}"} -->
<div class="jinr-add-class-container"><div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background jinr-custom-navigation01"><div class="o--background-container d--background-design-flat d--background-shadow-s d--border-outset"><div class="c--background-inner d--border-solid d--border-1px t--round" style="border-color:#f7f7f7"><!-- wp:spacer {"height":"1px"} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jinr-blocks/designtitle {"mainText":"はじめてのIllustrator","subText":"Lesson 1","divText":"はじめてのIllustrator","titleDesign":"2","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#e2e2e2","symbolColor":"#444444","className":"jinr-custom-navigation01-title"} -->
<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-none jinr-custom-navigation01-title js--scr-animation" style="border-color:#e2e2e2"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">Lesson 1</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">はじめてのIllustrator</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">01 新規ドキュメントを作成</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">02 ファイルを保存</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">03 表示倍率の変更</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">04 表示範囲の変更</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">05 ワークスペースの操作</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">06 定規とガイドを使う</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">07 オブジェクトを選択</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">08 トリムマークを作成</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">09 操作の取り消し</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:jinr-blocks/designtitle {"mainText":"基本図形の描き方と変形操作","subText":"Lesson 2","divText":"基本図形の描き方と変形操作","titleDesign":"2","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#e2e2e2","symbolColor":"#444444","className":"undefined"} -->
<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-none undefined js--scr-animation" style="border-color:#e2e2e2"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">Lesson 2</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">基本図形の描き方と変形操作</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:columns -->
<div class="wp-block-columns js--scr-animation"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">01 新規ドキュメントを作成</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">02 ファイルを保存</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">03 表示倍率の変更</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">04 表示範囲の変更</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">05 ワークスペースの操作</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">06 定規とガイドを使う</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="#">07 オブジェクトを選択</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">08 トリムマークを作成</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="#">09 操作の取り消し</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"25px"} -->
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div><div class="a--background-color" style="background:#fdfdfd"></div><div class="a--background-image t--round d--background-pattern1" style="opacity:0.29999999999999993;background-size:16.666666666666668%"></div></div><style jsx="true">.jinr-custom-navigation01 .c--background-inner{
padding:15px 50px;
}
@media (max-width: 781px){
.jinr-custom-navigation01 .wp-block-columns{
gap:0 !important;
}
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child){
margin-left:0 !Important;
}
}

@media (min-width: 552px){
	margin-bottom:0 !Important;
}

.jinr-custom-navigation01  p{
margin:14px 0 14px 0  !important;
}
.jinr-custom-navigation01 a{
color:#444 !Important;
text-decoration:none !important;
transition:.3s;
}
.jinr-custom-navigation01 a:hover{
opacity:.7;
}</style></div>
<!-- /wp:jinr-blocks/background --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->							
記事URLをコピーしました