アイコン付きボタン

小さなキャッチコピー

テキストを記入

サイドバーなどに使用するアイコン付きのリンクボタンです。

<!-- wp:st-blocks/flexbox {"selectedIcon":"","backgroundColor":"#f4fdf7","borderWidth":2,"borderColor":"#42d77d"} -->
<a class="st-flexbox-link" href="#"><div class="wp-block-st-blocks-flexbox st-header-flexwrap" style="width:100%;box-sizing:border-box;height:auto;background-color:#f4fdf7;border:2px solid #42d77d;margin-bottom:20px;padding:20px"><div class="st-header-flexbox"><!-- wp:columns {"isStackedOnMobile":false,"className":"gap-0","stGap0":true} -->
<div class="wp-block-columns is-not-stacked-on-mobile gap-0"><!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:image {"id":552,"width":60,"height":60,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://affinger.com/library/wp-content/uploads/2022/11/lion-60.png" alt="" class="wp-image-552" width="60" height="60"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"70%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:70%"><!-- wp:paragraph {"align":"left","className":"has-no-st-margin-bottom","fontSize":"small","stMarginBottom":"0"} -->
<p class="has-text-align-left has-no-st-margin-bottom has-small-font-size">小さなキャッチコピー</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"left","level":4,"className":"is-style-st-heading-custom-naked"} -->
<h4 class="has-text-align-left is-style-st-heading-custom-naked">テキストを記入</h4>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div></a>
<!-- /wp:st-blocks/flexbox -->