【Cocoonブロック】「トグルボックス」文章を飾る装飾系のブロックを学習しよう【WorldPress】

妖猫竜～あやネころん～

ころん、セミコロン、あやネころん。

今日はWordPressのテーマ「Cocoon」内の【Cocoonブロック】の「トグルボックス」を学習していくよ。

この記事は

記事を書いてるんだけど装飾を増やしたいけど分からない。
どれでどんな装飾ができるのかわからない。

って人向きに発信してるよ。一緒に学んで行こう。

トグルボックス

できる事

展開できる見出しを用意できる。
※展開できる見出しとは最初見た場合は見えておらず、ユーザーがアクションすることによって見えるようになる見出しのこと。

設定できるのは色設定だけみたいですね。

ボーダー色
背景色
文字色

各々基本25色の拡張色6色。

トグルボックス
クリックすることでコンテンツ内容の表示を切り替えることができるボックスです。
Cocoonボックスブロックの説明

ブロックの説明では上記のように記載がございます。
では早速みていきましょう。

トグルボックス見出し

色設定詳細

ボーダー色/天色
背景色/淡い赤
文字色/ピンク

見出し部分の背景は「ボーダー色」で、開いた後に出てくる部分の背景が「背景色」みたいだね。見出し部分の色自体はブロックの色設定ではなく、文の文字色で変えるみたいだね。

見ることはすくないけれどさらっとまとめてみると、

見出し部分の背景は「ボーダー色」
開いた部分の背景が「背景色」
開いた部分の文字は「文字色」
見出しの文字は文の文字色変更から

できる事

表や大きなものを展開先に置いておいてアクションで見るようにするとかですかね。

さて今回は「トグルボックス」についてみてきました。
次回は「検索案内」を予定してるよ。

次回の【Cocoonブロック】シリーズであいましょう。

【Cocoonブロック】シリーズは全部で13種類。

記事No17