WELCOME

デザイン見本帳

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

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

ボックス

チェックボックス

  • チェックリスト01
    コードをコピー
    												<!-- wp:jinr-blocks/simplebox {"className":"jinr-custom-checklist","jinrBlocksCSSAttribute":".jinr-custom-checklist .jin-ifont-check:before{\n\tfont-size:2rem;\n}\n\n.jinr-custom-checklist .c\u002d\u002dsimple-box-inner{\n\tpadding:25px 0 !important;\n}\n\n.jinr-custom-checklist p{\n\tmargin:1rem 0 !important;\n}"} -->
    <div class="jinr-add-class-container"><section class="wp-block-jinr-blocks-simplebox b--jinr-block-container jinr-custom-checklist"><div class="b--jinr-block b--jinr-box d--simple-box1 jinr-custom-checklist"><div class="c--simple-box-inner"><!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> チェックで見やすいボックスです。</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> この段落をコピペしていくと</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> チェック項目を増やせます</p>
    <!-- /wp:paragraph --></div></div></section><style jsx="true">.jinr-custom-checklist .jin-ifont-check:before{
    	font-size:2rem;
    }
    
    .jinr-custom-checklist .c--simple-box-inner{
    	padding:25px 0 !important;
    }
    
    .jinr-custom-checklist p{
    	margin:1rem 0 !important;
    }</style></div>
    <!-- /wp:jinr-blocks/simplebox -->											
  • チェックリスト02
    コードをコピー
    												<!-- wp:jinr-blocks/simplebox {"className":"jinr-custom-checklist","jinrBlocksCSSAttribute":".jinr-custom-checklist .c\u002d\u002dsimple-box-inner{\n\tpadding:25px 0 !important;\n}\n\n\n.jinr-custom-checklist p{\n\tmargin:1rem 0 !important;\n}"} -->
    <div class="jinr-add-class-container"><section class="wp-block-jinr-blocks-simplebox b--jinr-block-container jinr-custom-checklist"><div class="b--jinr-block b--jinr-box d--simple-box1 jinr-custom-checklist"><div class="c--simple-box-inner"><!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-checkcircle" aria-hidden="true"></i> チェックで見やすいボックスです</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-checkcircle" aria-hidden="true"></i> 段落ブロックをコピーして</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-checkcircle" aria-hidden="true"></i> ペーストするとチェックを増やせます</p>
    <!-- /wp:paragraph --></div></div></section><style jsx="true">.jinr-custom-checklist .c--simple-box-inner{
    	padding:25px 0 !important;
    }
    
    
    .jinr-custom-checklist p{
    	margin:1rem 0 !important;
    }</style></div>
    <!-- /wp:jinr-blocks/simplebox -->											
  • 旅のチェックリスト
    コードをコピー
    												<!-- wp:jinr-blocks/background {"backgroundBgColor":"#fcfcfc","className":"jinr-custom-checklist-trip","jinrBlocksCSSAttribute":".jinr-custom-checklist-trip .jin-ifont-check:before{\n\tfont-size:2rem;\n}"} -->
    <div class="jinr-add-class-container"><div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background jinr-custom-checklist-trip"><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":"旅のチェックリスト","subText":"Check List","divText":"旅のチェックリスト","titleDesign":"2","mainTextColor":"#1d2d75"} -->
    <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 js--scr-animation" style="border-color:#407FED"><div class="c--h2rich-contents"><span class="a--h2rich-subcopy ef" style="color:#407FED">Check List</span><h2 class="a--h2rich-maincopy d--bold ef" style="color:#1d2d75">旅のチェックリスト</h2></div></section>
    <!-- /wp:jinr-blocks/designtitle -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> メガネ|意外と忘れやすいです</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> カメラ|充電器も忘れず持っていきましょう</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> 下着類|洗濯セットもあると尚いいでしょう</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> パスポート|期限が切れてないか確認を!</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> 身分証明書|免許証や保険証も忘れずに</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> クレジット|海外旅行付帯保険があるものを</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p> <i class="jin-icons in--p jin-ifont-check" aria-hidden="true"></i> 航空券・チケット|期日もダブルチェック</p>
    <!-- /wp:paragraph --></div></div><div class="a--background-color" style="background:#fcfcfc"></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-checklist-trip .jin-ifont-check:before{
    	font-size:2rem;
    }</style></div>
    <!-- /wp:jinr-blocks/background -->											
記事URLをコピーしました