「画像加工」タグの記事一覧｜JINRパターンブロック

image

画像加工

画像加工04｜画像に影をつける

コードをコピー

												<!-- wp:jinr-blocks/background {"backgroundDesign":"d\u002d\u002dbackground-design-shadow","backgroundShadowType":"d\u002d\u002dbackground-shadow-m","backgroundBgColor":"rgba(255,255,255,0.51)","className":"wp-block-jinr-blocks-background b\u002d\u002djinr-block b\u002d\u002djinr-background jinr-custom-imgbg02","jinrBlocksCSSAttribute":".jinr-custom-imgbg02{\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"} -->
<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-shadow d--background-shadow-m 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:rgba(255,255,255,0.51)"></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{
}

/*エディター上での余白を消す*/
.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;
}

</style></div>
<!-- /wp:jinr-blocks/background -->

画像加工03｜写真フレームをつける

コードをコピー

												<!-- wp:jinr-blocks/background {"backgroundDesign":"d\u002d\u002dbackground-design-shadow","backgroundShadowType":"d\u002d\u002dbackground-shadow-float","backgroundBgColor":"#fdfdfd","className":"wp-block-jinr-blocks-background b\u002d\u002djinr-block b\u002d\u002djinr-background jinr-custom-imgbg03","jinrBlocksCSSAttribute":"/*前後余白の調整*/\n.jinr-custom-imgbg03{\nmargin-bottom:70px !important;}\n\n/*画像余白の調整*/\n.jinr-custom-imgbg03 .wp-block-image{\nmargin-top:2.5rem !important;\nmargin-bottom:2.5rem !important;\n}\n\n.jinr-custom-imgbg03 figcaption{\nfont-size:.9em !important;\nletter-spacing:1px;\ncolor:#444444 !important;\nmargin:16px 0 0 0 ;}"} -->
<div class="jinr-add-class-container"><div class="wp-block-jinr-blocks-background b--jinr-block b--jinr-background jinr-custom-imgbg03"><div class="o--background-container d--background-design-shadow d--background-shadow-float 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"/><figcaption>縁側からの琵琶湖花火 2022</figcaption></figure>
<!-- /wp:image --></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 class="a--background-float-item-top"></div><div class="a--background-float-item-bottom"></div></div><style jsx="true">/*前後余白の調整*/
.jinr-custom-imgbg03{
margin-bottom:70px !important;}

/*画像余白の調整*/
.jinr-custom-imgbg03 .wp-block-image{
margin-top:2.5rem !important;
margin-bottom:2.5rem !important;
}

.jinr-custom-imgbg03 figcaption{
font-size:.9em !important;
letter-spacing:1px;
color:#444444 !important;
margin:16px 0 0 0 ;}</style></div>
<!-- /wp:jinr-blocks/background -->

画像加工02｜写真に塗りの影をつける

コードをコピー

												<!-- 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 -->

画像加工01｜ストライプの影をつける

コードをコピー

												<!-- wp:jinr-blocks/background {"backgroundBgColor":"rgba(255,255,255,0.51)","className":"wp-block-jinr-blocks-background b\u002d\u002djinr-block b\u002d\u002djinr-background jinr-custom-imgbg","jinrBlocksCSSAttribute":".jinr-custom-imgbg{\nposition:relative;\nmargin-right:18px !important;\nmargin-bottom:60px !important;\n}\n\n.jinr-custom-imgbg .d\u002d\u002dfont-pc-m-size .editor-styles-wrapper{\nline-height:0 !Important;}\n\n.jinr-custom-imgbg .wp-block-image{\nmargin:0 !important;\n}\n\n.jinr-custom-imgbg .c\u002d\u002dbackground-inner{\npadding:0px !important;\n}\n\n\n.jinr-custom-imgbg::before{\n\tcontent:'';\n\tposition:absolute;\n\tbottom:-18px;\n\tright:-18px;\n\twidth:100%;\n\theight:100%;\n\tbackground-image:repeating-linear-gradient(-45deg,#aaaaaa 0px,#aaaaaa 1px,rgba(0 0 0 / 0)0%,rgba(0 0 0 /0)1%);\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-imgbg"><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:rgba(255,255,255,0.51)"></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-imgbg{
position:relative;
margin-right:18px !important;
margin-bottom:60px !important;
}

.jinr-custom-imgbg .d--font-pc-m-size .editor-styles-wrapper{
line-height:0 !Important;}

.jinr-custom-imgbg .wp-block-image{
margin:0 !important;
}

.jinr-custom-imgbg .c--background-inner{
padding:0px !important;
}


.jinr-custom-imgbg::before{
	content:'';
	position:absolute;
	bottom:-18px;
	right:-18px;
	width:100%;
	height:100%;
	background-image:repeating-linear-gradient(-45deg,#aaaaaa 0px,#aaaaaa 1px,rgba(0 0 0 / 0)0%,rgba(0 0 0 /0)1%);
	z-index:3;
}
</style></div>
<!-- /wp:jinr-blocks/background -->

デザイン見本帳

画像加工