画像ブロック:まとめ

2,880 views

画像ブロックのカスタマイズまとめになります。画像リンクの場合や画像にキャプションが付いているときのカスタマイズをまとめています。

使い方!

  1. 専用プラグインをインストールして有効化
  2. コピーボタンをクリック
  3. 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

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