Portfolio

BOXデザイン

ブロックエディタで作成できるBOXデザインをまとめました。

シンプルな囲み枠

1.角に丸みを帯びた囲み枠

角に丸みを帯びた囲み枠

  // 段落：角に丸みを帯びた囲み枠
  register_block_style(
    'core/paragraph',
    array(
      'name' => 'rounded-line-box',
      'label' => '丸みのあるBOX',
    )
  );
// 段落：丸みのあるBOX
.is-style-rounded-line-box {
  border: {
    width: 2px;
    style: solid;
    color: var(--wp--preset--color--primary);
    top-left-radius: 18px;
    top-right-radius: 18px;
    bottom-left-radius: 18px;
    bottom-right-radius: 18px;
  }

  padding: {
    top: var(--wp--preset--spacing--40);
    right: var(--wp--preset--spacing--30);
    bottom: var(--wp--preset--spacing--40);
    left: var(--wp--preset--spacing--30);
  }
}

2.上下ラインを強調した囲み枠

上下ラインを強調した囲み枠

  // 段落：上下ラインBOX
  register_block_style(
    'core/paragraph',
    array(
      'name' => 'horizontal-line-box',
      'label' => '上下ラインBOX',
    )
  );
// 段落：上下ラインBOX
.is-style-horizontal-line-box {
  border: {
    top: {
      style: solid;
      width: 3px;
      color: var(--wp--preset--color--primary);
    }

    bottom: {
      width: 3px;
      style: solid;
      color: var(--wp--preset--color--primary);
    }
  }

  padding: {
    top: var(--wp--preset--spacing--40);
    right: var(--wp--preset--spacing--30);
    bottom: var(--wp--preset--spacing--40);
    left: var(--wp--preset--spacing--30);
  }

  background-color: var(--wp--preset--color--pale-gray);
}

3.ポストイットのような囲み枠

ポストイットのような囲み枠

  // 段落：ポストイットBOX
  register_block_style(
    'core/paragraph',
    array(
      'name' => 'postit-box',
      'label' => 'ポストイットBOX',
    )
  );
// 段落：ポストイットBOX
.is-style-postit-box {
  border: {
    left: {
      style: solid;
      color: var(--wp--preset--color--secondary);
      width: 5px;
    }
  }

  padding: {
    top: var(--wp--preset--spacing--40);
    right: var(--wp--preset--spacing--40);
    bottom: var(--wp--preset--spacing--40);
    left: var(--wp--preset--spacing--40);
  }

  background-color: var(--wp--preset--color--pale-gray);
}

見出し付きのBOX

1.フルワイド見出しBOX

ポイント

BOXは要点をまとめたり、視線を集めて強調したいポイントを装飾することができます。

見出し付きBOXは、複数段落やレスポンシブに対応しています。

ポイント

BOXは要点をまとめたり、視線を集めて強調したいポイントを装飾することができます。

見出し付きBOXは、複数段落やレスポンシブに対応しています。

ポイント

BOXは要点をまとめたり、視線を集めて強調したいポイントを装飾することができます。

見出し付きBOXは、複数段落やレスポンシブに対応しています。

/**
 * Title: フルワイド見出しBOX
 * Slug: prof/box-fullwide-heading
 * categories: Prof
 * Block types: core/heading, core/paragraph
 */
?>
<!-- wp:group {"style":{"border":{"width":"1px"},"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"blockGap":"0px"}},"borderColor":"primary","layout":{"type":"default"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-width:1px;margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"backgroundColor":"primary","textColor":"base"} -->
  <p class="has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><strong></strong></p>
  <!-- /wp:paragraph -->

  <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
  <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
    <p></p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:group -->
</div>
<!-- /wp:group -->

2.ポイントBOX（内側・左）

POINT

ボックス内にラベルを設置した囲み枠。

塗りつぶし範囲はラベル文字数に連動します。

/**
 * Title: ポイントBOX（内側・左）
 * Slug: prof/box-point-inside-left
 * categories: Prof
 * Block types: core/heading, core/paragraph
 */
?>
<!-- wp:group {"style":{"border":{"width":"1px"},"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"borderColor":"secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-secondary-border-color" style="border-width:1px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"fontSize":"medium"} -->
  <div class="wp-block-group has-medium-font-size"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit"},"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"typography":{"lineHeight":"1","letterSpacing":"1px"}},"backgroundColor":"secondary","textColor":"base","fontSize":"medium"} -->
    <p class="has-base-color has-secondary-background-color has-text-color has-background has-medium-font-size" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);letter-spacing:1px;line-height:1"><strong>POINT</strong></p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:group -->

  <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
  <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
    <p></p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:group -->
</div>
<!-- /wp:group -->

3.ポイントBOX（外側・右）

POINT

ボックスの外側にラベルを設置した囲み枠。

上のBOXとデザイン違いです。

/**
 * Title: ポイントBOX（外側・右）
 * Slug: prof/box-point-outside-right
 * categories: Prof
 * Block types: core/heading, core/paragraph
 */
?>
<!-- wp:group {"style":{"spacing":{"blockGap":"0","margin":{"bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-bottom:0"><!-- wp:group {"style":{"spacing":{"blockGap":"0","margin":{"top":"0","bottom":"0"},"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"},"fontSize":"medium"} -->
  <div class="wp-block-group has-medium-font-size" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"typography":{"lineHeight":"1","letterSpacing":"1px"}},"backgroundColor":"secondary","textColor":"base","fontSize":"medium"} -->
    <p class="has-base-color has-secondary-background-color has-text-color has-background has-medium-font-size" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);letter-spacing:1px;line-height:1"><strong>POINT</strong></p>
    <!-- /wp:paragraph -->
  </div>
  <!-- /wp:group -->

  <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"margin":{"top":"0","bottom":"var:preset|spacing|30"}},"border":{"width":"1px"}},"borderColor":"secondary","layout":{"type":"constrained"}} -->
  <div class="wp-block-group has-border-color has-secondary-border-color" style="border-width:1px;margin-top:0;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
    <p></p>
    <!-- /wp:paragraph -->

  </div>
  <!-- /wp:group -->
</div>
<!-- /wp:group -->

新着記事

All Post »