cocoonテーマを使う自営の背中ブログ運営するかめきちが、実践しながら説明します。
コクーンには「アイコンボックス」以外にも、読者の目を引いて読みやすくする装飾ブロックが山ほど用意されています。ニュース記事・体験談で実戦投入しやすいやつを厳選して紹介します。
① 付箋風ボックス（メモ・補足に最適）
「Cocoonブロック」→「スタイル」→「付箋風ボックス」
黄色い付箋みたいな見た目で、「ちょっと一言補足したい」時に最強。電工目線のワンポイントアドバイスとかにハマります。
② タブボックス（タイトル付き枠）
「Cocoonブロック」→「タブボックス」
左上に「ポイント」「注意」「memo」みたいなタブが付いた囲み。
アイコン＋ラベルで一瞬で内容が伝わるので、ニュース解説記事と相性◎。
右側ブロックのラベルで「注意」「警告」「OK」「NG」「重要」など、選べるアイコンが豊富。
③ 白抜きボックス（シンプルで上品）
「Cocoonブロック」→「白抜きボックス」
枠線だけのスッキリ系。本文と馴染ませつつ目立たせたい時に。
引用や「現場の声」セクションにピッタリ。
④ 吹き出し（会話風で読みやすさ激増）
「Cocoonブロック」→「吹き出し」
かめきちのアイコンを登録しておけば、「電工オヤジが語る一言」みたいな演出ができます。
⑤ 案内ボックス
「Cocoonブロック」→「案内ボックス」
information（青）／question（黄）／alert（赤）の3色展開。追記や注意喚起に最適。
⑥ ラベルボックス
「Cocoonブロック」→「ラベルボックス」
左上に小さなラベル（タグみたいなやつ）が付いた囲み。
「現場メモ」「速報」「考察」など、コーナー名を立てて連載感を出すのに便利。
⑦ ニューと囲みボタン
「Cocoonブロック」→「ボタン」
アフィリエイトリンクをただのテキストリンクで貼るより、ボタン化したほうがクリック率が段違いに上がります。「Amazonで見る」「楽天で見る」をボタン化推奨。
実戦配置例
| セクション | 使うブロック |
|---|---|
| 冒頭の追記 | 案内ボックス（information／青） |
| 概要の数字まとめ | タブボックス（memo） |
| 同業者としての一言 | 吹き出し |
| チェックリスト | チェックボックス |
| 重要な注意喚起 | 案内ボックス（alert／赤） |
| アフィリリンク | 囲みボタン |
| 出典・参考 | 白抜きボックス |
このくらいバリエーション付けると、最後までスクロールされる記事になります。
注意点ひとつだけ
装飾ブロックは「使いすぎると逆効果」です。1記事に5種類以内が目安。色とアイコンが氾濫すると、読者は何が重要か分からなくなります。
