[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2024.08.182024.08.19

2つの事柄を対比して説明することが多いです。
毎回、Keynoteで図解を作るのは大変。
テキスト入力だけでかんたんに作成できると便利です。

そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。

1. 追加CSSクラスにslide dichotomyを入れる

アイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。

目次に戻る

2. 追加されたCSS

ポイントは、

    display: flex;
    justify-content: space-between;

CSSは、以下のようになっています。

/** 2024-08-18：アイコンリストで二項対立の簡易図解*/
.iconlist-box.slide.dichotomy > ul {
    display: flex;
    justify-content: space-between;
    gap: 3%;
    list-style-type: none;
    padding: 0;
    width: 98%;
}

.iconlist-box.slide.dichotomy > ul > li {
    width: 50%;
    text-align: center;
    font-weight: bold;
    font-size: clamp(3.5px, calc(3.5vw + 2px), 24px);
}

.iconlist-box.slide.dichotomy > ul > li > ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0.5em;
    padding-left: 1em;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
}

.iconlist-box.slide.dichotomy > ul > li > ul > li {
    font-size: 75%;
    font-weight: normal;
    margin-top: 0.3em;
    width: fit-content;
}

.iconlist-box.slide.dichotomy > ul > li::before {
    display: none;
}

リストのアイコンを表示させるために、gapやpaddingの付け方を工夫しました。

以前に、追加した slide を拡張しています。

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

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...

以前の追加している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;
   padding-left: 50px;
   padding-right: 20px;
    
}

.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%;
}

こちらもどうぞ。