WELCOME

デザイン見本帳

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

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

パターン一覧

ナビゲーション02|サイトマップ用3カラム

croover
コードをコピー
								<!-- wp:jinr-blocks/fullwidth -->
<section class="wp-block-jinr-blocks-fullwidth b--jinr-block b--jinr-fullwidth-container"><section class="b--jinr-fullwidth" style="background-color:#f5f5f5"><div class="d--fullwidth-max 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 -->
<div class="wp-block-column"><!-- wp:jinr-blocks/background {"backgroundBgColor":"#fdfdfd","backgroundBorderDesign":"d\u002d\u002dborder-solid","backgroundBorderColor":"#f7f7f7","className":"jinr-custom-navigation01","displayDeviceAttribute":"on","jinrBlocksCSSAttribute":".jinr-custom-navigation01 .c\u002d\u002dbackground-inner{\npadding:15px 40px;\n}\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.wp-block-columns:not(.is-not-stacked-on-mobile) \u003e .wp-block-column{\nmargin-bottom:0 !Important;}\n\n.jinr-custom-navigation01  p{\nmargin:14px 0 14px 0  !important;\n}\n\n\n.jinr-custom-navigation01 a{\ncolor:#444 !Important;\ntext-decoration:none !important;\ntransition:.3s;\n}\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:jinr-blocks/designtitle {"mainText":"ブログの作り方","subText":"まずはここから!","divText":"ブログの作り方","titleDesign":"2","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#444444","symbolColor":"#444444","className":"jinr-custom-navigation01-title on","displayDeviceAttribute":"on"} -->
<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 on js--scr-animation" style="border-color:#444444"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">まずはここから!</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">ブログの作り方</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="https://jinr.jp/"><strong>01</strong> 新規ドキュメントを作成</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>03</strong> 表示倍率の変更</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>04</strong> 表示範囲の変更</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>06</strong> 定規とガイドを使う</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>07</strong> オブジェクトを選択</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>09</strong> 操作の取り消し</a></p>
<!-- /wp:paragraph --></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 40px;
}

@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;
}
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
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>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:jinr-blocks/background {"backgroundBgColor":"#fdfdfd","backgroundBorderDesign":"d\u002d\u002dborder-solid","backgroundBorderColor":"#f7f7f7","className":"jinr-custom-navigation01","displayDeviceAttribute":"on","jinrBlocksCSSAttribute":".jinr-custom-navigation01 .c\u002d\u002dbackground-inner{\npadding:15px 40px;\n}\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.wp-block-columns:not(.is-not-stacked-on-mobile) \u003e .wp-block-column{\nmargin-bottom:0 !Important;}\n\n.jinr-custom-navigation01  p{\nmargin:14px 0 14px 0  !important;\n}\n\n\n.jinr-custom-navigation01 a{\ncolor:#444 !Important;\ntext-decoration:none !important;\ntransition:.3s;\n}\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:jinr-blocks/designtitle {"mainText":"記事の書き方","subText":"ライティング","divText":"記事の書き方","titleDesign":"2","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#444444","symbolColor":"#444444","className":"undefined on","displayDeviceAttribute":"on"} -->
<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 on js--scr-animation" style="border-color:#444444"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">ライティング</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">記事の書き方</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>01</strong> 新規ドキュメントを作成</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>03</strong> 表示倍率の変更</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>04</strong> 表示範囲の変更</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>06</strong> 定規とガイドを使う</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>07</strong> オブジェクトを選択</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>09</strong> 操作の取り消し</a></p>
<!-- /wp:paragraph --></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 40px;
}

@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;
}
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
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>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:jinr-blocks/background {"backgroundBgColor":"#fdfdfd","backgroundBorderDesign":"d\u002d\u002dborder-solid","backgroundBorderColor":"#f7f7f7","className":"jinr-custom-navigation01","displayDeviceAttribute":"on","jinrBlocksCSSAttribute":".jinr-custom-navigation01 .c\u002d\u002dbackground-inner{\npadding:15px 40px;\n}\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.wp-block-columns:not(.is-not-stacked-on-mobile) \u003e .wp-block-column{\nmargin-bottom:0 !Important;}\n\n.jinr-custom-navigation01  p{\nmargin:14px 0 14px 0  !important;\n}\n\n\n.jinr-custom-navigation01 a{\ncolor:#444 !Important;\ntext-decoration:none !important;\ntransition:.3s;\n}\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:jinr-blocks/designtitle {"mainText":"サイトデザイン","subText":"美しさも大切","divText":"サイトデザイン","titleDesign":"2","mainTextColor":"#444444","subTextColor":"#444444","titleDesignColor":"#444444","symbolColor":"#444444","className":"jinr-custom-navigation01-title on","displayDeviceAttribute":"on"} -->
<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 on js--scr-animation" style="border-color:#444444"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#444444">美しさも大切</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#444444">サイトデザイン</h2></div></section>
<!-- /wp:jinr-blocks/designtitle -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>01</strong> 新規ドキュメントを作成</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>03</strong> 表示倍率の変更</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>04</strong> 表示範囲の変更</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>06</strong> 定規とガイドを使う</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>07</strong> オブジェクトを選択</a></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"displayDeviceAttribute":"on"} -->
<p><a href="#"><strong>09</strong> 操作の取り消し</a></p>
<!-- /wp:paragraph --></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 40px;
}

@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;
}
}

.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
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>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></section></section>
<!-- /wp:jinr-blocks/fullwidth -->							
記事URLをコピーしました