[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。

まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。

ラベルボックスのスライド化

枠線を半透明のグレーに設定
ラベル背景色を明るいベージュに変更
要素の幅を内容に合わせて自動的に調整
要素の左右の余白を自動的に調整

これをカスタムクラス「slide」に追加します。

ラベルボックスのスライド化

枠線を半透明のグレーに設定
ラベル背景色を明るいベージュに変更
要素の幅を内容に合わせて自動的に調整
要素の左右の余白を自動的に調整

1. style.cssに追加したスタイル

/** 2024-06-17 ラベルボックスをスライド画像風にする.label-box.slide*/
.entry-content .label-box.slide {
   border: 1px solid rgba(93, 89, 75, .5);
}
.entry-content .label-box.slide .label-box-label {
	margin-left: 0;
	background: #F1F0DF;
	text-shadow: unset;
	line-height: 1.5;
}
.entry-content .label-box.slide .label-box-label-text {
	margin-left: auto;
	margin-right: auto;
	font-size: 160%;
}
.cocoon-block-label-box.not-nested-style.slide>.box-content {
    border-color: transparent;
}
.label-box.slide .label-box-content {
   margin-top: 0;
}

.label-box.slide .label-box-content>* {
   width:fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

ラベルボックスは、内部的にはこのようなHTMLです。

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box not-nested-style cocoon-block-label-box">

<div class="label-box-label block-box-label box-label">
<span class="label-box-label-text block-box-label-text box-label-text">
ラベルボックスのスライド化
</span></div>

<div class="label-box-content block-box-content box-content">
<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>枠線を<strong>半透明のグレー</strong>に設定</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>ラベル背景色を<strong>明るいベージュ</strong>に変更</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>要素の幅</strong>を内容に合わせて自動的に調整</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>要素の左右の余白</strong>を自動的に調整</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
</div></div>

目次に戻る

1-1. 画面サイズに合わせて調整する（vw）

CSSを使用して、画面幅に対してフォントサイズを動的に調整するには、vw単位を使用します。
vw単位は、ビューポート幅の1%に相当します。

現在、.label-box-label要素の幅が664pxで、フォントサイズが30pxの場合、その比率は約22.13です（664 ÷ 30 ≈ 22.13）。この比率を維持するには、vw単位を使用して以下のようにCSSを記述します。

.label-box-label {
  font-size: 4.52vw;
}

この設定により、画面幅が変更されても、.label-box-label要素のフォントサイズは常に要素の幅に対して一定の比率を保ちます。

目次に戻る

1-2. 文字サイズの変化を緩やかに

ただし、ちょっと文字のサイズが大きすぎることが気になりました。

画面幅が非常に小さい場合や大きい場合は、フォントサイズが読みにくくなる可能性があります。
そこで、緩やかに変化するように定数を入れました（calc(4vw + 2px)）。
また、clamp関数で最小値と最大値を指定しつした。

.entry-content .label-box.slide .label-box-label-text {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(4px, calc(4vw + 2px), 28px);
    letter-spacing : -1.5px;
}

上記の例では、フォントサイズの最小値を4px、最大値を28pxに設定しています。
画面幅が非常に小さい場合や大きい場合でも、読みやすさを維持することができます。

目次に戻る

2. アイコンリストも同様にした

アイコンリストでも

スライド画像にするために
style.cssを追加した

アイコンリストでも

スライド画像にするために
style.cssを追加した

/** 2024-06-22 アイコンリストをスライド画像風にする.iconlist-box.slide*/
.entry-content .iconlist-box.slide {
   border: 1px solid rgba(93, 89, 75, .5);
}
.iconlist-box.blank-box.slide {
    padding: 0;
    border-radius: 2px;
   padding-bottom: 20px;
}
.entry-content .iconlist-box.slide .iconlist-title {
	margin: 0;
	padding-left:0;
	text-align: center;
	background: #F1F0DF;
	line-height: 1.6;
    font-size: clamp(4px, calc(4vw + 2px), 28px);
    letter-spacing : -1.5px;
}
.iconlist-box.slide>ul, .iconlist-box.slide>ol {
   margin-top: 16px;
 	margin-left: auto;
	margin-right: auto;
	width:fit-content;
}

.iconlist-box.slide>ul li, .iconlist-box.slide>ol li {
  width:fit-content;
  line-height: 1.5;
  font-size: 95%;
  margin-bottom: 0.4em;
}
.iconlist-box.slide li strong {
  font-size: 105%;
}

こちらもどうぞ。