画像ブロックのカスタマイズまとめになります。画像リンクの場合や画像にキャプションが付いているときのカスタマイズをまとめています。
使い方！
- 専用プラグインをインストールして有効化
コピーボタンをクリック- 「Shift + Ctrl + V」でテキストとして投稿画面で貼り付け
このページのもくじ
リンク
影
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-shadow","plusbfClassName":"bfimg-link-shadow","plusbfStyle":".bfimg-link-shadow img {\n box-shadow: 0 2px 6px 0 rgba(0 0 0 / 30%);\n transition: .3s ease-out;\n}\n.bfimg-link-shadow img:hover {\n transform: translateY(-8px);\n box-shadow: 0 6px 12px -2px rgba(0 0 0 / 30%);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-shadow"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-shadow2","plusbfClassName":"bfimg-link-shadow2","plusbfStyle":".bfimg-link-shadow2 img {\n box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n transition: .3s ease-out;\n}\n.bfimg-link-shadow2 img:hover {\n transform: translateY(-8px);\n box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-shadow2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-shadow3","plusbfClassName":"bfimg-link-shadow3","plusbfStyle":".bfimg-link-shadow3 img {\n box-shadow: 0 0.75rem 2rem -0.5rem rgba(0,0,0,0.3);\n transition: .3s ease-out;\n}\n.bfimg-link-shadow3 img:hover {\n transform: translateY(-8px);\n box-shadow: 0 0.75rem 2rem -0.5rem rgba(0,0,0,0.3);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-shadow3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
men
少しだけ影の付き方が違います。お好みにお使い下さい
下線
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-underline","plusbfClassName":"bfimg-link-underline","plusbfStyle":".bfimg-link-underline a {\n display: flex;\n position: relative;\n}\n.bfimg-link-underline a img {\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-underline a:after {\n content: \u0022\u0022;\n position: absolute;\n width: 100%;\n height: 4px;\n bottom: 0;\n left: 0;\n background: currentColor;\n transform: scale(0, 1);\n transition: .6s ease-out;\n transform-origin: left;\n}\n.bfimg-link-underline a:hover:after {\n transform: scale(1, 1);\n background: currentColor;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-underline"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-underline2","plusbfClassName":"bfimg-link-underline2","plusbfStyle":".bfimg-link-underline2 a {\n display: flex;\n position: relative;\n}\n.bfimg-link-underline2 a img {\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-underline2 a:after {\n content: \u0022\u0022;\n position: absolute;\n width: 100%;\n height: 4px;\n bottom: 0;\n left: 0;\n background: #ffc266;\n transform: scale(0, 1);\n transition: .6s ease-out;\n transform-origin: left;\n}\n.bfimg-link-underline2 a:hover:after {\n transform: scale(1, 1);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-underline2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
拡大
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-zoom","plusbfClassName":"bfimg-link-zoom","plusbfStyle":".bfimg-link-zoom a {\n display: inline-block;\n overflow: hidden;\n}\n.bfimg-link-zoom a img {\n transform: scale(1);\n transition: .3s ease-out;\n}\n.bfimg-link-zoom a img:hover {\n transform: scale(1.1);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-zoom"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-zoom2","plusbfClassName":"bfimg-link-zoom2","plusbfStyle":".bfimg-link-zoom2 a {\n display: inline-block;\n overflow: hidden;\n}\n.bfimg-link-zoom2 a img {\n transform: scale(1) rotate(0deg);\n transition: .3s ease-out;\n}\n.bfimg-link-zoom2 a img:hover {\n transform: scale(1.2) rotate(8deg);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-zoom2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-zoom3","plusbfClassName":"bfimg-link-zoom3","plusbfStyle":".bfimg-link-zoom3 a {\n display: inline-block;\n overflow: hidden;\n}\n.bfimg-link-zoom3 a img {\n transform: scale(1) rotate(0deg);\n transition: .3s ease-out;\n}\n.bfimg-link-zoom3 a img:hover {\n transform: scale(1.2) rotate(-8deg);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-zoom3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
透過
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-opacity","plusbfClassName":"bfimg-link-opacity","plusbfStyle":".bfimg-link-opacity a {\n display: inline-block;\n overflow: hidden;\n}\n.bfimg-link-opacity a img {\n transition: .3s ease-out;\n}\n.bfimg-link-opacity a img:hover {\n opacity: 0.54;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-opacity"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-opacity2","plusbfClassName":"bfimg-link-opacity2","plusbfStyle":".bfimg-link-opacity2 a {\n display: flex;\n overflow: hidden;\n background-color: currentcolor;\n}\n.bfimg-link-opacity2 a img {\n margin: 0;\n align-self: flex-start;\n transition: .3s ease-out;\n}\n.bfimg-link-opacity2 a img:hover {\n opacity: 0.54;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-opacity2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-opacity3","plusbfClassName":"bfimg-link-opacity3","plusbfStyle":".bfimg-link-opacity3 a {\n display: flex;\n overflow: hidden;\n background-color: #333;\n}\n.bfimg-link-opacity3 a img {\n transition: .3s ease-out;\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-opacity3 a img:hover {\n opacity: 0.54;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-opacity3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
縮小
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-reduction","plusbfClassName":"bfimg-link-reduction","plusbfStyle":".bfimg-link-reduction a {\n display: flex;\n overflow: hidden;\n background-color: currentcolor;\n}\n.bfimg-link-reduction a img {\n transform: scale(1);\n transition: .3s ease-out;\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-reduction a img:hover {\n transform: scale(0.98);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-reduction"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-reduction2","plusbfClassName":"bfimg-link-reduction2","plusbfStyle":".bfimg-link-reduction2 a {\n display: flex;\n overflow: hidden;\n box-shadow: inset 0 0 0 1px;\n}\n.bfimg-link-reduction2 a img {\n transform: scale(1);\n transition: .3s ease-out;\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-reduction2 a img:hover {\n transform: scale(0.95);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-reduction2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-reduction3","plusbfClassName":"bfimg-link-reduction3","plusbfStyle":".bfimg-link-reduction3 a {\n display: flex;\n overflow: hidden;\n box-shadow: inset 0 0 8px 1px;\n}\n.bfimg-link-reduction3 a img {\n transform: scale(1);\n transition: .3s ease-out;\n margin: 0;\n align-self: flex-start;\n}\n.bfimg-link-reduction3 a img:hover {\n transform: scale(0.95);\n}"} -->
<figure class="wp-block-image size-large bfimg-link-reduction3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
内線ver1
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline","plusbfClassName":"bfimg-link-innerline","plusbfStyle":".bfimg-link-innerline a {\n display: flex;\n position: relative;\n overflow: hidden;\n}\n.bfimg-link-innerline a:before {\n content: \u0022\u0022;\n position: absolute;\n top: 1rem;\n left: 1rem;\n right: 1rem;\n bottom: 1rem;\n transform: scale(0.5);\n opacity: 0;\n transition: 0.3s ease-in-out;\n border: 1px solid #fff;\n}\n.bfimg-link-innerline:hover a:before {\n transform: scale(1);\n opacity: 1;\n}\n.bfimg-link-innerline a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline2","plusbfClassName":"bfimg-link-innerline2","plusbfStyle":".bfimg-link-innerline2 a {\n display: flex;\n position: relative;\n overflow: hidden;\n}\n.bfimg-link-innerline2 a:before {\n content: \u0022\u0022;\n position: absolute;\n top: 1rem;\n left: 1rem;\n right: 1rem;\n bottom: 1rem;\n transform: scale(0.5);\n opacity: 0;\n transition: 0.3s ease-in-out;\n border: 1px dashed #fff;\n}\n.bfimg-link-innerline2:hover a:before {\n transform: scale(1);\n opacity: 1;\n}\n.bfimg-link-innerline2 a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline3","plusbfClassName":"bfimg-link-innerline3","plusbfStyle":".bfimg-link-innerline3 a {\n display: flex;\n position: relative;\n overflow: hidden;\n}\n.bfimg-link-innerline3 a:before {\n content: \u0022\u0022;\n position: absolute;\n top: 1rem;\n left: 1rem;\n right: 1rem;\n bottom: 1rem;\n transform: scale(0.5);\n opacity: 0;\n transition: 0.3s ease-in-out;\n border: 4px dotted #fff;\n}\n.bfimg-link-innerline3:hover a:before {\n transform: scale(1);\n opacity: 1;\n}\n.bfimg-link-innerline3 a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
内線ver2
タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline2-1","plusbfClassName":"bfimg-link-innerline2-1","plusbfStyle":".bfimg-link-innerline2-1 a {\n display: flex;\n position: relative;\n}\n.bfimg-link-innerline2-1 a:before {\n position: absolute;\n top: 1rem;\n right: 1rem;\n bottom: 1rem;\n left: 1rem;\n border: 1px solid #fff;\n content: \u0022\u0022;\n transition: 0.3s ease-in-out;\n}\n.bfimg-link-innerline2-1:hover a:before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n}\n.bfimg-link-innerline2-1 a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline2-1"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline2-2","plusbfClassName":"bfimg-link-innerline2-2","plusbfStyle":".bfimg-link-innerline2-2 a {\n display: flex;\n position: relative;\n}\n.bfimg-link-innerline2-2 a:before {\n position: absolute;\n top: 1rem;\n right: 1rem;\n bottom: 1rem;\n left: 1rem;\n border: 4px double #fff;\n content: \u0022\u0022;\n transition: 0.3s ease-in-out;\n}\n.bfimg-link-innerline2-2:hover a:before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n}\n.bfimg-link-innerline2-2 a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline2-2"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->タイトル
<!-- wp:image {"id":752,"sizeSlug":"large","className":"bfimg-link-innerline2-3","plusbfClassName":"bfimg-link-innerline2-3","plusbfStyle":".bfimg-link-innerline2-3 a {\n display: flex;\n position: relative;\n}\n.bfimg-link-innerline2-3 a:before {\n position: absolute;\n top: 1.5rem;\n right: 1rem;\n bottom: 1.5rem;\n left: 1rem;\n border-top: 1px solid #fff;\n border-bottom: 1px solid #fff;\n content: \u0022\u0022;\n transition: 0.3s ease-in-out;\n}\n.bfimg-link-innerline2-3 a:after {\n position: absolute;\n top: 1rem;\n right: 1.5rem;\n bottom: 1rem;\n left: 1.5rem;\n border-right: 1px solid #fff;\n border-left: 1px solid #fff;\n content: \u0022\u0022;\n transition: 0.3s ease-in-out;\n}\n.bfimg-link-innerline2-3:hover a:before,\n.bfimg-link-innerline2-3:hover a:after {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n}\n.bfimg-link-innerline2-3 a img {\n margin: 0;\n align-self: flex-start;\n}"} -->
<figure class="wp-block-image size-large bfimg-link-innerline2-3"><a href="#"><img src="" alt=""/></a><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->| 対応テーマ | SANGO・JIN・COCOON・THE SONIC |
キャプション
COMING SOON