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

デザイン切り替え

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

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

サイドバーで選ぶだけ。

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

実装はとってもカンタン

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

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

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

Cocoon

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

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマCocoon(2.7.3~)に標準搭載された、待望...
Cocoon

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

2025.8.26 デザインと実装コードを見直し、修正をおこないました。Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザイン...
Cocoon

Cocoonタイムラインを有料テーマ級にカスタマイズ!SWELL風デザインを簡単に実現

WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意されています。手順や流れをわかりやすく伝えるのに便利ですが、デフォルトの見た目はシ...
Cocoon

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

Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプルで視認性の高い万能ボックス。初心者から上級者まで多くのブロガーが愛用していますが、も...
Cocoon

Cocoonタブ見出しボックスを有料テーマ風に!簡単カスタマイズでデザイン切り替え

Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっとおしゃれにしたい、デザインを自由に使い分けたいというニーズに応えるカスタマイズがあります...
Cocoon

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

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマ「Cocoon」のアコーディオンボックス、使ってい...
Cocoon

Cocoonブログカードをカスタマイズ!タイトル・サムネイル・抜粋文・URLをワンクリック選択

2025.9.2 テキストリンクスタイルの微調整、全体コード修正をおこないました。有料テーマSWELLではブログカードの表示スタイルを自由に切り替えられるのをご...
Cocoon

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

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

ワンクリックで差がつく!Cocoonラベルボックスをおしゃれにカスタマイズする方法

Cocoonの「ラベルボックス」は補足情報やポイントをシンプルに伝えるのに便利な機能ですが、余白が狭く窮屈だったり、見出しの後ろに薄い線が見えたりと、デザインに...
Cocoon

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

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導くために欠かせない定...
スポンサーリンク