Cocoonで「ここだけ変えたい」ときはどうする？設定・CSSでできること

WordPressの無料テーマとして使われている「Cocoon」。

無料で始められるうえに機能も豊富なので、

「まずはCocoonでブログやサイトを作ってみよう」

という方も多いと思います。

実際、Cocoonは標準機能だけでもかなり多くの設定ができます。

ただ、使っているうちに出てくるのが、

「あと、ここだけ変えたい」

という悩みです。

「スマホだけ少し崩れている」

「余白をもう少し狭くしたい」

「ボタンの色や形を変えたい」

「設定を探したけれど、どこにあるのか分からない」

今回は、そんなCocoonの「あと少し」を調整するときの考え方を紹介します。

まずはCocoonの標準設定でできないか確認

Cocoonには、テーマ側にかなり多くの設定項目が用意されています。

そのため、

「CSSを書かないと変更できないのかな？」

と思ったことでも、実はCocoonの設定を変更するだけで解決することがあります。

例えば、

ヘッダーやメニュー

サイドバーやウィジェット

カラーや文字まわり

トップページの表示

投稿ページの表示

モバイル表示

広告や各種パーツ

スキンによるデザイン変更

など。

最初からCSSを追加するのではなく、まず標準設定で対応できないか確認するのがおすすめです。

「設定場所が分からない」だけの場合もあります

WordPressに慣れていないと、

「やりたいことは単純なのに、どこを触ればいいのか分からない」

ということがあります。

Cocoonは機能が多いぶん、設定項目も多くあります。

テーマ設定なのか、WordPress側の設定なのか、ウィジェットなのか、個別ページなのか。

探しているうちに、

「もう何を変更したのか分からなくなった……」

ということも。

こういう場合は、コードを書く必要はなく、正しい設定場所を見つけるだけで解決するケースもあります。

CSSで調整した方が早いケース

標準設定だけでは、細かい部分まで思い通りにできないこともあります。

例えば、

「この部分だけ余白を変えたい」

「特定のボタンだけデザインを変えたい」

「スマホのときだけ配置を調整したい」

「文字サイズをもう少し細かく変更したい」

といったケース。

こういう部分的な見た目の変更は、CSSを追加することで対応できる場合があります。

サイト全体を作り直さなくても、数行のCSSだけで解決することもあります。

自分でCSSを触ったら崩れてしまった場合

検索すると、Cocoon向けのCSSカスタマイズ例はたくさん見つかります。

コピーして貼り付けるだけで使えるものもあります。

ただ、そのCSSが

「現在使っているスキンに合っているか」

「別のCSSと競合していないか」

「PCとスマホの両方で問題ないか」

までは、実際のサイトによって変わります。

そのため、

「ネットにあったCSSを入れたら、別のところまで崩れた」

ということもあります。

そんな場合は、追加したCSSをさらに増やして直そうとするより、一度現在の状態を整理した方が早いこともあります。

無料テーマだから全部自分でやる必要はありません

Cocoonを使っている方の中には、

「無料テーマを使っているんだから、自分で全部やらないと」

と思っている方もいるかもしれません。

でも、サイト全体を制作会社へ依頼する必要はなくても、

困っている部分だけ人にお願いする

という使い方もできます。

「この余白だけ」

「スマホ表示だけ」

「このボタンだけ」

といった小さな修正なら、必要な部分だけ対応することもできます。

Cocoonの「ここだけ変えたい」に対応しています

Cocoonを使っていて、

「設定場所が分からない」

「思った通りの見た目にならない」

「CSSで少し調整してほしい」

「自分で触ったら表示が崩れてしまった」

といった場合は、設定・修正・カスタマイズのお手伝いもしています。

できるだけCocoonの標準機能を活用し、必要な場合のみCSSなどを使って調整します。

私自身、Cocoonだけでなく、その前身となるSimplicityの頃からWordPressテーマに触れてきました。

大がかりなリニューアルではなく、

「ここだけ少し直してほしい」

というご相談でも大丈夫です。

まずは対象ページと、変更したい内容をお知らせください。