リッチカラム

ナンバー付きカラム

ヒイラギやユーカリ、松の枝などの植物がコンクリート調の背景の周囲に配置され、中央が空白になっている構図。

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<div class="swell-block-columns c-NumColumn" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%;--swl-clmn-mrgn--x:2rem"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s __NumColItem">
<figure class="wp-block-image size-full __NumColImage u-mb-ctrl u-mb-10"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/botanical-frame-flatlay.webp" alt="ヒイラギやユーカリ、松の枝などの植物がコンクリート調の背景の周囲に配置され、中央が空白になっている構図。" class="wp-image-627" style="object-fit:cover" title=""/></figure>

<div class="wp-block-group __NumColGroup">
<p class="has-text-align-center __NumColNum u-mb-ctrl u-mb-0">01</p>

<h3 class="wp-block-heading has-text-align-left is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<p class="has-text-align-left">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

<div class="swell-block-column swl-has-mb--s __NumColItem">
<figure class="wp-block-image size-full __NumColImage u-mb-ctrl u-mb-10"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/botanical-frame-flatlay.webp" alt="ヒイラギやユーカリ、松の枝などの植物がコンクリート調の背景の周囲に配置され、中央が空白になっている構図。" class="wp-image-627" style="object-fit:cover" title=""/></figure>

会員限定コンテンツ

ここは会員限定コンテンツです。

＼お申込みはこちら／

お申込みする！

リンク付きカラム

＼編集画面でペーストするだけ！／

<div class="swell-block-columns c-LinkGroup" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group __LinkGroup has-border -border01 has-text-color has-link-color" style="color:#333333">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<p class="has-text-align-center __StrechedLinkText"><a href="#">テキストリンクテキストリンクテキストリンクテキストリンクテキストリンクテキストリンク</a></p>
</div>
</div>

<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group __LinkGroup has-border -border01 has-text-color has-link-color" style="color:#333333">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<p></p>

/* 「リンク付きカラム」のCSS */
.c-LinkGroup {
	.__LinkGroup {
		position: relative;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		cursor: pointer;
	}

	/* ホバー時の演出（お好みで） */
	.__LinkGroup:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}

	/* クラスをつけたブロックの「中にあるリンク(aタグ)」を拡張する */
	.__StrechedLinkText a::after { 
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: auto; /* 明示的にクリックを受け付ける */
	}
}

シンプルカラムフィル

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<div class="swell-block-columns c-FillColumn" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s c-columnFullwide__columnItem">
<div class="wp-block-group has-border -border01">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<p class="has-text-align-center">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

<div class="swell-block-column swl-has-mb--s c-columnFullwide__columnItem">
<div class="wp-block-group has-border -border01">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

/* 「シンプルカラムフィル」のCSS */
.c-FillColumn {
	.swell-block-columns__inner > .c-columnFullwide__columnItem {
		flex-grow: 1 !important;
	}
}

シンプルカラム中央

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<div class="swell-block-columns c-CenterColumn" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s c-columnCentred__columnItem">
<div class="wp-block-group has-border -border01">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<div class="swell-block-column swl-has-mb--s c-columnCentred__columnItem">
<div class="wp-block-group has-border -border01">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

/* 「シンプルカラム中央」のCSS */
.c-CenterColumn {
	.swell-block-columns__inner:has(.c-columnCentred__columnItem) {
		justify-content: center !important;
	}
}

シンプル3カラム

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<div class="swell-block-columns is-style-clmn-border" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s">
<figure class="wp-block-image size-full is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" class="wp-image-210" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<p class="has-text-align-center">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

<div class="swell-block-column swl-has-mb--s">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

シンプル3カラム（グループ）

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group is-style-kakko_box">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

番号付き3カラム

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出しH3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

＼編集画面でペーストするだけ！／

<div class="swell-block-columns" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner">
<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group has-border -border01">
<p class="has-text-align-center u-mb-ctrl u-mb-5"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGQ9Ik0wIDE5MkMwIDEwMy42IDcxLjYgMzIgMTYwIDMyczE2MCA3MS42IDE2MCAxNjBWMzIwYzAgODguNC03MS42IDE2MC0xNjAgMTYwUzAgNDA4LjQgMCAzMjBWMTkyek0xNjAgOTZjLTUzIDAtOTYgNDMtOTYgOTZWMzIwYzAgNTMgNDMgOTYgOTYgOTZzOTYtNDMgOTYtOTZWMTkyYzAtNTMtNDMtOTYtOTYtOTZ6Ij48L3BhdGg+PC9zdmc+)" data-icon="Fas0zero" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiA1MTIiPjxwYXRoIGQ9Ik0xNjAgNjRjMC0xMS44LTYuNS0yMi42LTE2LjktMjguMnMtMjMtNS0zMi45IDEuNmwtOTYgNjRDLS41IDExMS4yLTQuNCAxMzEgNS40IDE0NS44czI5LjcgMTguNyA0NC40IDguOUw5NiAxMjMuOFY0MTZIMzJjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJoOTYgOTZjMTcuNyAwIDMyLTE0LjMgMzItMzJzLTE0LjMtMzItMzItMzJIMTYwVjY0eiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="Fas1one" data-id="2" aria-hidden="true" class="swl-inline-icon"> </span></p>

<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group has-border -border01">
<p class="has-text-align-center u-mb-ctrl u-mb-5"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGQ9Ik0wIDE5MkMwIDEwMy42IDcxLjYgMzIgMTYwIDMyczE2MCA3MS42IDE2MCAxNjBWMzIwYzAgODguNC03MS42IDE2MC0xNjAgMTYwUzAgNDA4LjQgMCAzMjBWMTkyek0xNjAgOTZjLTUzIDAtOTYgNDMtOTYgOTZWMzIwYzAgNTMgNDMgOTYgOTYgOTZzOTYtNDMgOTYtOTZWMTkyYzAtNTMtNDMtOTYtOTYtOTZ6Ij48L3BhdGg+PC9zdmc+)" data-icon="Fas0zero" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span><span data-icon="Fas2two" data-id="1" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGQ9Ik0xNDIuOSA5NmMtMjEuNSAwLTQyLjIgOC41LTU3LjQgMjMuOEw1NC42IDE1MC42Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMHMtMTIuNS0zMi44IDAtNDUuM0w0MC4yIDc0LjVDNjcuNSA0Ny4zIDEwNC40IDMyIDE0Mi45IDMyQzIyMyAzMiAyODggOTcgMjg4IDE3Ny4xYzAgMzguNS0xNS4zIDc1LjQtNDIuNSAxMDIuNkwxMDkuMyA0MTZIMjg4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDMyYy0xMi45IDAtMjQuNi03LjgtMjkuNi0xOS44cy0yLjItMjUuNyA2LjktMzQuOUwyMDAuMiAyMzQuNWMxNS4yLTE1LjIgMjMuOC0zNS45IDIzLjgtNTcuNGMwLTQ0LjgtMzYuMy04MS4xLTgxLjEtODEuMXoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span></p>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group has-border -border01">
<p class="has-text-align-center u-mb-ctrl u-mb-5"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGQ9Ik0wIDE5MkMwIDEwMy42IDcxLjYgMzIgMTYwIDMyczE2MCA3MS42IDE2MCAxNjBWMzIwYzAgODguNC03MS42IDE2MC0xNjAgMTYwUzAgNDA4LjQgMCAzMjBWMTkyek0xNjAgOTZjLTUzIDAtOTYgNDMtOTYgOTZWMzIwYzAgNTMgNDMgOTYgOTYgOTZzOTYtNDMgOTYtOTZWMTkyYzAtNTMtNDMtOTYtOTYtOTZ6Ij48L3BhdGg+PC9zdmc+)" data-icon="Fas0zero" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span><span data-icon="Fas3three" data-id="1" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik02NCA2NGMwLTE3LjcgMTQuMy0zMiAzMi0zMkgzMzZjMTMuMiAwIDI1IDguMSAyOS44IDIwLjRzMS41IDI2LjMtOC4yIDM1LjJMMjI2LjMgMjA4SDI0OGM3NS4xIDAgMTM2IDYwLjkgMTM2IDEzNnMtNjAuOSAxMzYtMTM2IDEzNkgxNjkuNGMtNDIuNCAwLTgxLjItMjQtMTAwLjItNjEuOWwtMS45LTMuOGMtNy45LTE1LjgtMS41LTM1IDE0LjMtNDIuOXMzNS0xLjUgNDIuOSAxNC4zbDEuOSAzLjhjOC4xIDE2LjMgMjQuOCAyNi41IDQyLjkgMjYuNUgyNDhjMzkuOCAwIDcyLTMyLjIgNzItNzJzLTMyLjItNzItNzItNzJIMTQ0Yy0xMy4yIDAtMjUtOC4xLTI5LjgtMjAuNHMtMS41LTI2LjMgOC4yLTM1LjJMMjUzLjcgOTZIOTZDNzguMyA5NiA2NCA4MS43IDY0IDY0eiI+PC9wYXRoPjwvc3ZnPg==)" aria-hidden="true" class="swl-inline-icon"> </span></p>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

3カラム（リスト）

見出しH3

テキストテキスト
テキストテキスト
テキストテキスト

見出しH3

テキストテキスト
テキストテキスト
テキストテキスト

見出しH3

テキストテキスト
テキストテキスト
テキストテキスト

＼編集画面でペーストするだけ！／

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<ul class="wp-block-list">
<li>テキストテキスト</li>

<li>テキストテキスト</li>

<li>テキストテキスト</li>
</ul>
</div>
</div>

<div class="swell-block-column swl-has-mb--s">
<div class="wp-block-group has-border -border04">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-5"><img src="https://revify.hakubi-code.com/wp-content/uploads/2026/01/image-placeholder-icon_cropped.png" alt="" style="width:auto;height:120px"/></figure>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<ul class="wp-block-list">
<li>テキストテキスト</li>

<li>テキストテキスト</li>

<li>テキストテキスト</li>
</ul>
</div>
</div>

<h3 class="wp-block-heading is-style-section_ttl u-mb-ctrl u-mb-5">見出しH3</h3>

<ul class="wp-block-list">
<li>テキストテキスト</li>

<li>テキストテキスト</li>

<li>テキストテキスト</li>
</ul>
</div>
</div>
</div></div>