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

デザイン切り替え

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

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

サイドバーで選ぶだけ。

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

実装はとってもカンタン

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

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

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

Cocoon

Cocoon白抜きボックスをおしゃれにカスタマイズ!複数デザインの使い分け方法

Cocoonの段落装飾は複数のスタイルを選べますが、箇条書きや画像などのブロック要素を入れられないため使い勝手の面ではイマイチです。「要点をまとめたいのにリスト...
Cocoon

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

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

Cocoonタブブロックの使い方&おしゃれカスタマイズ|ワンクリックで12デザイン切替

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

Cocoonタイムライン(ステップブロック)おしゃれ化カスタマイズ|最大6種類のデザイン切り替え

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

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

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

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

見出し2025.11.04更新:選べるデザインに「マスキングテープ風」を追加しました。Cocoonの「タブ見出しボックス」は、自由に見出しや色設定ができる汎用性...
Cocoon

Cocoon「見出しボックス」リストマーカー(点)の色を自動調整&デザイン切り替えカスタマイズ

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。「リストの点がテーマカラーと合わない」「記事の内容に合わせて、デザインを切り替えたい」そんな方...
Cocoon

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

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

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

Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザインを簡単に作成できます。補足情報に便利ですが、デフォルトではデザインが固定...
Cocoon

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

Cocoonの「ラベルボックス」は情報をまとめるのに便利な機能ですが、余白が狭かったり、見出しの後ろに線が残ったりしてもう少しすっきりさせたいという声もよく聞き...
Cocoon

Cocoonブログカードをカスタマイズ!タイトル・サムネ・抜粋文・URL表示をワンクリックで切り替える方法

Cocoonでブログカードを使っていると、「この場面ではもう少しシンプルにしたい」「表示を切り替えられたら便利なのに」と感じることはありませんか?この記事では、...
スポンサーリンク