
WordPress テーマ Cocoon カスタマイズを承ります
WordPress テーマ Cocoon、私も愛用しています。高機能で使いやすいですよね。
デザインもシンプルで良いのですが、使っている人も多いため、他とは違った見た目にカスタマイズして目立ちたい!と欲が出てくることもあるかと思います。
目次や見出しをおしゃれにしたい、Cocoon ブロックの見た目を変更したい、Cocoon の機能を拡張したい、等々。
私自身も Cocoon を利用して複数のサイトを運営している中で、「このサイトの見出しは背景色塗りつぶしではなく、ボーダーのデザインにしてみよう」とか「こっちのブログにはブロックに指定できる色をたくさん増やしてみよう」など、サイトやブログに合わせてカスタマイズを施しています。
サイトやブログを運営していると、様々な欲求が湧いてくるのは当然のことだと思います。
あなたが抱えている、Cocoon の○○部分を○○したい、Cocoon に○○の機能を追加したい、などのご要望をぜひ当所にお聞かせください。
カスタマイズしたい内容は千差万別、ご予算の範囲内でご要望にお応えできるかはお話を聞いてみなければわかりませんが、Cocoon を実際に利用してカスタマイズしてきた経験が、 あなたの Cocoon の見た目や機能をバージョンアップさせる力になりましたら幸いです。
Cocoon カスタマイズ事例
当所で行った Cocoon のカスタマイズ事例をいくつかご紹介します。カスタマイズできる内容はこれに限りませんが、どのようなカスタマイズができるのかの参考にご覧ください。
目次をおしゃれにカスタマイズ


Cocoon の目次は、Cocoon 設定 > 目次から設定を行なった後、CSSで見た目をカスタマイズします。上記の例はあくまでも一例ですが、目次をおしゃれにしたいなどのご要望にお応え致します。Cocoon の目次のカスタマイズ(有償)を希望される場合は、お問い合わせ からご連絡ください。
色設定(カラーパレット)を追加してブロックのカラーをカスタマイズ


Cocoon 設定 > エディターから拡張カラーパレット色を設定できますが、Cocoon 標準では 6色以上は設定できません。カラーパレットに6色以上追加したい場合に、このカスタマイズが有効です。追加した色の名称は、拡張色Aなどの名称とは違い、独自の名称を付けることができますので、一目でわかりやすいのも特徴です。
カラーパレットに追加した色は Cocoonブロックで利用可能です。以下は、タブ見出しボックスに追加した色を適用した例です。

カラーパレットに追加できる数に制限はありませんが、数を増やしすぎるとエディターの使い勝手が悪くなりますので、よく使う色などに絞って追加されることをお勧めします。Cocoon の色設定(カラーパレット)追加カスタマイズ(有償)を希望される場合は、お問い合わせ からご連絡ください。
記事一覧(アーカイブ)に投稿者のアイコンを追加してSNS風の見た目にカスタマイズ


Cocoon はカスタマイズしやすいように、アクションフックやフィルターフックが充実しています。Cocoon に用意されたフックを活用することで、少ないソースコードで様々なカスタマイズが可能となります。記事一覧(アーカイブ)に投稿者のアイコンを追加してSNS風の見た目にカスタマイズした際もフックを活用しています。
Cocoon のカスタマイズでフックを利用する必要があるかはその時々にもよりますが、柔軟にカスタマイズができるようにと、Cocoon にはこういった仕組みも導入されています。
コーポレートサイト風にカスタマイズ

Cocoon の見た目をコーポレートサイト風にカスタマイズすることも可能です。
ヘッダー、フッター、見出し、CTA(コールトゥアクション)、Cocoon ブロック等の調整はもちろん、Cocoon 設定も大きく関わってきますので、カスタマイズにかかる費用は少し高めの傾向にあります。
参考価格
カスタマイズする内容により金額は異なりますが、上記カスタマイズ事例を承る場合の参考価格を以下に記載します。
Cocoon のカスタマイズ可能な内容はこれに限りません。ちょっとしたレイアウトの崩れなどでもご相談いただけます。Cocoon のカスタマイズでお困りの場合は お問い合わせ からご連絡ください。
FAQ
お問い合わせ
以下のフォームに希望する Cocoon のカスタマイズ内容を記入して送信してください。内容を確認後、改めて担当者から返信させていただきます。ただし、内容によっては返信できない場合がございます。悪しからずご了承くださいませ。
※送信いただいた個人情報はお問い合わせへの返信のみに使用します。詳しくはプライバシーポリシーをご確認ください。