目次
目次

「画像」ブロックをカラムからはみ出し配置する方法

Cocoonカスタマイズ集
この記事は約24分で読めます。
記事内に広告が含まれています。

はじめに

以下をCocoonで実現します。

【SWELL】リッチカラムで画像を上にはみ出すカスタマイズ方法｜かんた🌊SWELLマニア
WordPressテーマSWELLのリッチカラムブロックのアレンジについてす。 ちょっとだけ独自のカスタマイズを加えて、オシャレなサイトに仕上げたい人向けです。 【パターン①】番号ちょいズレ 【SWELL】リッチカラムに番号を表示 →デモサ...
note.com

ダウンロード

以下のデータをコピーし、そのまま「段落」ブロックに貼り付けます。

コピーする
<!-- wp:cocoon-blocks/column-2 {"className":"my-box","metadata":{"name":"カラム上に番号を付ける"}} -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box my-box"><!-- wp:cocoon-blocks/column-left {"extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-column-left column-left is-style-bottom-margin-0em has-bottom-margin"><!-- wp:paragraph {"className":"my-number has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center my-number has-cocoon-white-color has-text-color has-link-color"><strong>1</strong></p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":20863,"width":"200px","height":"auto","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230464.png" alt="" class="wp-image-20863" style="width:200px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:1em;padding-left:1em"><!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center","extraBottomMargin":"1"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block is-style-bottom-margin-1em has-bottom-margin"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-left -->

<!-- wp:cocoon-blocks/column-right {"extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-column-right column-right is-style-bottom-margin-0em has-bottom-margin"><!-- wp:paragraph {"className":"my-number has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center my-number has-cocoon-white-color has-text-color has-link-color"><strong>2</strong></p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":20862,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230429.png" alt="" class="wp-image-20862"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:1em;padding-left:1em"><!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center","extraBottomMargin":"1"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block is-style-bottom-margin-1em has-bottom-margin"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-right --></div>
<!-- /wp:cocoon-blocks/column-2 -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:cocoon-blocks/column-2 {"className":"my-box","metadata":{"name":"カラムから画像をはみ出させる1"}} -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box my-box"><!-- wp:cocoon-blocks/column-left {"extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-column-left column-left is-style-bottom-margin-0em has-bottom-margin"><!-- wp:image {"id":20863,"width":"200px","height":"auto","sizeSlug":"full","linkDestination":"none","align":"center","className":"my-shift"} -->
<figure class="wp-block-image aligncenter size-full is-resized my-shift"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230464.png" alt="" class="wp-image-20863" style="width:200px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:group {"metadata":{"name":""},"style":{"spacing":{"padding":{"right":"1em","left":"1em","top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:1em;padding-bottom:0px;padding-left:1em"><!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center","extraBottomMargin":"1"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block is-style-bottom-margin-1em has-bottom-margin"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-left -->

<!-- wp:cocoon-blocks/column-right {"extraBottomMargin":"0"} -->
<div class="wp-block-cocoon-blocks-column-right column-right is-style-bottom-margin-0em has-bottom-margin"><!-- wp:image {"id":20862,"sizeSlug":"full","linkDestination":"none","align":"center","className":"my-shift"} -->
<figure class="wp-block-image aligncenter size-full my-shift"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230429.png" alt="" class="wp-image-20862"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"1em","right":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:1em;padding-bottom:0px;padding-left:1em"><!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center","extraBottomMargin":"1"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block is-style-bottom-margin-1em has-bottom-margin"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-right --></div>
<!-- /wp:cocoon-blocks/column-2 -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:cocoon-blocks/column-2 {"className":"my-box","metadata":{"name":"カラムから画像をはみ出させる2"}} -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box my-box"><!-- wp:cocoon-blocks/column-left -->
<div class="wp-block-cocoon-blocks-column-left column-left"><!-- wp:group {"style":{"color":{"gradient":"linear-gradient(180deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"},"spacing":{"padding":{"top":"1em","bottom":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background:linear-gradient(180deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);padding-top:1em;padding-bottom:1em"><!-- wp:image {"id":20863,"sizeSlug":"full","linkDestination":"none","align":"center","className":"my-shift"} -->
<figure class="wp-block-image aligncenter size-full my-shift"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230464.png" alt="" class="wp-image-20863"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":"has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center has-cocoon-white-color has-text-color has-link-color"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center has-cocoon-white-color has-text-color has-link-color"><span class="fz-12px">camera</span></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"extraBottomMargin":"1","style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-bottom-margin-1em has-bottom-margin" style="padding-right:1em;padding-left:1em"><!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-left -->

<!-- wp:cocoon-blocks/column-right -->
<div class="wp-block-cocoon-blocks-column-right column-right"><!-- wp:group {"style":{"color":{"gradient":"linear-gradient(180deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"},"spacing":{"padding":{"top":"1em","bottom":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background:linear-gradient(180deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);padding-top:1em;padding-bottom:1em"><!-- wp:image {"id":20862,"sizeSlug":"full","linkDestination":"none","align":"center","className":"my-shift"} -->
<figure class="wp-block-image aligncenter size-full my-shift"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2024/06/1717230429.png" alt="" class="wp-image-20862"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":"has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center has-cocoon-white-color has-text-color has-link-color"><strong>見出し</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"has-cocoon-white-color has-text-color has-link-color","style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}},"typography":{"textAlign":"center"}},"textColor":"cocoon-white"} -->
<p class="has-text-align-center has-cocoon-white-color has-text-color has-link-color"><span class="fz-12px">lens</span></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"extraBottomMargin":"1","style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-bottom-margin-1em has-bottom-margin" style="padding-right:1em;padding-left:1em"><!-- wp:paragraph -->
<p>説明</p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"詳細を見る","url":"https://ss1.xrea.com/chuya.s239.xrea.com/temp/","align":"center"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://ss1.xrea.com/chuya.s239.xrea.com/temp/" class="btn" target="_self" rel="noopener">詳細を見る</a></div>
<!-- /wp:cocoon-blocks/button-1 --></div>
<!-- /wp:group --></div>
<!-- /wp:cocoon-blocks/column-right --></div>
<!-- /wp:cocoon-blocks/column-2 -->

<!-- wp:html -->
<style data-wp-block-html="css">
.my-box > div {
  box-shadow: 0 0 3px 0 #ccc;
  position: relative;
}

/* 番号を付ける */
.my-number {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 100%;
  display: grid;
  height: 40px;
  left: 50%;
  place-items: center;
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  width: 40px;
}

/* 画像をはみ出させる */
.my-shift img {
  margin-top: -80px !important;
}
</style>
<!-- /wp:html -->

完成イメージ1

1

見出し

説明

詳細を見る

2

見出し

説明

詳細を見る

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。
    太字や中央寄せなどはエディターで設定します。右カラムも同様な手順で入力します。

    1. 「2カラム」ブロックを配置し、高度な設定→追加CSSクラスにmy-boxと入力します。
    2. 「段落」ブロックで、番号を入力します。
      高度な設定→追加CSSクラスにmy-numberと入力します。
    3. 「スペーサ」ブロックを配置し、高さ40pxに設定します（番号を表示する余白を設ける）。
    4. 「段落」ブロックで見出しを入力します。
    5. 「画像」ブロックで画像を配置します。
    6. 7と8をグループ化し、スタイル→「パディング左右」を1emに設定します。
    7. 「段落」ブロックで説明を入力します。
    8. 「ボタン」ブロックを配置します。
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    .my-box > div {
  box-shadow: 0 0 3px 0 #ccc;
  position: relative;
}

/* 番号を付ける */
.my-number {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 100%;
  display: grid;
  height: 40px;
  left: 50%;
  place-items: center;
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  width: 40px;
}

/* 画像をはみ出させる */
.my-shift img {
  margin-top: -80px;
}

完成イメージ2

見出し

説明

詳細を見る

見出し

説明

詳細を見る

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で設定します。
    太字や中央寄せなどはエディターで設定します。右カラムも同様な手順で入力します。

    1. 「2カラム」ブロックを配置し、高度な設定→追加CSSクラスにmy-boxと入力します。
    2. 「画像」ブロックを配置し、高度な設定→追加CSSクラスにmy-shiftと入力します。
    3. 完成イメージ1と同様にグループ化し、スタイル→「パディング左右」を1emに設定します。
  • ラベル
    CSSを追加

    完成イメージ1と同様。

完成イメージ3

見出し

camera

説明

詳細を見る

見出し

lens

説明

詳細を見る

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で設定します。
    太字や中央寄せなどはエディターで設定します。右カラムも同様な手順で入力します。

    1. 「2カラム」ブロックを配置し、高度な設定→追加CSSクラスにmy-boxと入力します。
    2. グループ化し、スタイル→色で背景を設定します。
    3. 「画像」ブロックを配置し、高度な設定→追加CSSクラスにmy-shiftと入力します。
    4. 完成イメージ1と同様にグループ化し、[C] ブロック下余白を1emに設定します。
      スタイル→「パディング左右」を1emに設定します。
  • ラベル
    CSSを追加

    完成イメージ1と同様。

さいごに

この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。

タイトルとURLをコピーしました