サイト型トップページの作り方を公開しています!Check

デザイン切り替え

  • 「Cocoonって便利だけどデザインがちょっと味気ない…」
  • 「有料テーマみたいにオシャレな見た目にできたらいいのに」
  • 「難しいCSS編集は苦手。でも人とは違うデザインにしたい!」

そんなお悩み、5分で解決できます。

サイドバーで選ぶだけ。

  • ワンクリックでデザインを自由に切り替え
  • 同一ページ内で異なるデザインを組み合わせOK
  • 一度導入すれば、サイト全体で使い回せる

実装はとってもカンタン

必要なのは、コードを2か所に貼り付けるだけ
初心者でも迷わず設定できるように、具体的な手順(コード)を記載しています。

機能性と見た目の両立を、このカスタマイズで実現しませんか?

すべて、このサイトで実装しているお気に入りばかりです。

Cocoon

Cocoon見出しボックスをカスタマイズ|リストマーカー(点)の自動配色とデザイン切り替え実装

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利にカスタマイズしたい方へ。この記事では、ボックス内のリストマーカー(点)の色をボーダー色と自動で揃...
Cocoon

【Cocoon】タブブロックの使い方とデザイン強化カスタマイズ|均等配置・横スクロール対応

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパ...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれにカスタマイズ!使い方・デザイン例・CSSコードまとめ

Cocoonの「ラベルボックス」は、注意書きや補足情報をシンプルに強調できる便利な装飾ブロックです。一方で、余白の窮屈さが気になるラベルの後ろに線が少し残ってし...
Cocoon

Cocoonアイコンボックスをおしゃれにカスタマイズ|クリックで簡単デザイン切り替え

Cocoonのアイコンボックスは、補足説明や注意書きを分かりやすく伝えられる便利なブロックです。しかし標準状態ではデザインが1種類のみで、記事内容に合わせて使い...
Cocoon

Cocoon「タブ見出しボックス」を自由にデザイン|コピペで使えるカスタムスタイル8種

WordPressテーマ「Cocoon」のタブ見出しボックスは、記事内で見出しやコンテンツを整理できる便利な装飾ブロックです。シンプルで使いやすいのが魅力ですが...
Cocoon

カラム固定を解消!Cocoonボックスメニューの列数を2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon

【Cocoon】白抜きボックスのデザイン拡張カスタマイズ&ワンクリック切替がとても便利!

更新情報2026/01/26 実線と破線スタイルに角丸を追加しました。Cocoonには「段落ブロック」に便利な装飾スタイルがありますが、リストや画像など複数のブ...
Cocoon

Cocoonタイムライン(ステップブロック)おしゃれ化カスタマイズ!6種類のデザインを使い分け

Cocoonの「タイムライン」ブロックは、手順解説や申し込みフローの表示にぴったりな便利機能です。しかし、デフォルトのままだと「見た目がシンプルすぎる」「ブロッ...
Cocoon

Cocoon新着・人気記事・ナビカードを横並びに!カラム数をワンクリックで変更する方法

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoon

Cocoonアコーディオン(トグル)をカスタマイズ!10種類のデザインでスッキリ魅せる

WordPressテーマ「Cocoon」のアコーディオン、使っていますか?情報量が多いページでも、クリックひとつで内容を折りたためるとても便利なブロックです。た...
Cocoon

Cocoonブログカードの表示要素を編集画面で切替|クリック率が上がる12スタイル(コピペOK)

更新情報2026/1/7 テキストリンクスタイル:アイコン・フォントの微調整2025/12/20 縦型スタイルを1種類追加、掲載コードを全修正この記事では、タイ...
スポンサーリンク