画像加工02|写真に塗りの影をつける
croover
コードをコピー
<!-- wp:jinr-blocks/background {"backgroundBgColor":"#ffffff","className":"wp-block-jinr-blocks-background b\u002d\u002djinr-block b\u002d\u002djinr-background jinr-custom-imgbg02","jinrBlocksCSSAttribute":".jinr-custom-imgbg02{\nposition:relative;\nmargin-right:35px !important;\nmargin-bottom:65px !important;\n}\n\n/*エディター上での余白を消す*/\n.editor-styles-wrapper{line-height:0 !important;\n}\n\n\n.jinr-custom-imgbg02 .d\u002d\u002dfont-pc-m-size .editor-styles-wrapper{\nline-height:0 !Important;}\n\n.jinr-custom-imgbg02 .wp-block-image{\nmargin:0 !important;\n}\n\n.jinr-custom-imgbg02 .c\u002d\u002dbackground-inner{\npadding:0px !important;\n}\n\n\n.jinr-custom-imgbg02::before{\n\tcontent:'';\n\tposition:absolute;\n\tbottom:-35px;\n\tright:-35px;\n\twidth:100%;\n\theight:100%;\n\tbackground-color:#407fed;\n\tborder-radius:5px;\n\tz-index:3;\n}\n"} --> <div class="jinr-add-class-container"><div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background jinr-custom-imgbg02"><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:image {"id":1137,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image size-full"><img src="https://jinr-theme.com/wp-content/uploads/2022/06/アートボード-32.png" alt="" class="wp-image-1137"/></figure> <!-- /wp:image --></div></div><div class="a--background-color" style="background:#ffffff"></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-imgbg02{ position:relative; margin-right:35px !important; margin-bottom:65px !important; } /*エディター上での余白を消す*/ .editor-styles-wrapper{line-height:0 !important; } .jinr-custom-imgbg02 .d--font-pc-m-size .editor-styles-wrapper{ line-height:0 !Important;} .jinr-custom-imgbg02 .wp-block-image{ margin:0 !important; } .jinr-custom-imgbg02 .c--background-inner{ padding:0px !important; } .jinr-custom-imgbg02::before{ content:''; position:absolute; bottom:-35px; right:-35px; width:100%; height:100%; background-color:#407fed; border-radius:5px; z-index:3; } </style></div> <!-- /wp:jinr-blocks/background -->