Cocoonカスタマイズおすすめ設定｜無料テーマでもおしゃれに仕上げるコツ

Cocoonをインストールして「とりあえず使えるようにはなった」けど、「なんか見た目がパッとしない」と感じている人は多いと思う。

実は、Cocoonのカスタマイズで見た目が変わる最大のポイントはスキン選びと配色の統一なんだよね。この2つを押さえるだけで、無料テーマとは思えないクオリティのブログになる。

この記事では、Cocoonを使いこなすためのおすすめカスタマイズを「見た目」「機能」「収益化」の3つのカテゴリーに分けて紹介するよ。すべてCocoon設定の管理画面から操作できるものだけを厳選したから、CSSの知識は一切不要。

💻 ナビ助おすすめのレンタルサーバー

国内最速・かんたんセットアップでブログ開設

✅ 国内最速のレンタルサーバー
✅ WordPressかんたんセットアップ
✅ 独自ドメイン2つ無料
✅ 初月割引キャンペーン実施中

ConoHa WINGを見てみる

※最短10分でブログ開設できます

⭐おすすめ記事
ブログ運営Labへようこそ！サーバー選びに迷ったら、こちらの記事が参考になります。

ConoHa WINGの口コミ・評判｜国内最速サーバーの実力を検証

料金・速度・使いやすさを正直レビュー

見た目を劇的に変えるカスタマイズ
機能面のおすすめカスタマイズ
収益化に関わるカスタマイズ
追加CSSでワンランク上のデザインに
1. CSSの追加方法
2. 初心者でもコピペで使えるCSS例
よくある質問
まとめ

見た目を劇的に変えるカスタマイズ

スキンの選び方で9割決まる

Cocoon設定の「スキン」タブには100種類以上のデザインテンプレートが用意されている。スキンを変えるだけで背景色、リンク色、ボタンデザイン、見出しスタイルが一括で変わるから、カスタマイズの手間が一気に省けるんだ。

人気のスキンをいくつか紹介すると、「JEEP」はシンプルで読みやすいレイアウト、「grayish」はフルスクリーンのメインビジュアルが使えるモダンなデザイン、「Made in Heaven」はCocoonっぽさが薄れるスッキリしたデザインが特徴。迷ったらプレビュー機能で実際の表示を確認しながら選ぶのが一番確実だよ。

見出しデザインを変更する

「Cocoon設定」→「全体」タブまたはスキンの設定から、h2やh3見出しのデザインを変更できる。見出しのデザインが変わるだけで記事全体の印象が大きく変わるから、スキン選びと合わせて確認しておこう。下線だけのシンプルなデザインから、背景色付きの目立つデザインまで選べるよ。

サイトカラーを統一する

「外観」→「カスタマイズ」から、サイト全体のキーカラーとテキストカラーを設定できる。キーカラーはヘッダー、ボタン、リンクなどに反映されるから、ブログのテーマに合った色を1色決めておこう。例えば料理ブログならオレンジ系、ビジネス系なら青系、美容ブログならピンク系が相性がいい。

ナビ助

スキン選びで迷ったら「JEEP」か「grayish」から試してみて。どっちもシンプルで使いやすいし、どんなジャンルのブログにも合うよ！

機能面のおすすめカスタマイズ

OGP設定でSNSシェアを最適化

「Cocoon設定」→「OGP」タブで、SNSでシェアされた際の画像とテキストの表示を設定しよう。デフォルトのOGP画像を設定しておかないと、アイキャッチ画像がない記事がシェアされたときに画像なしで表示されてしまう。サイトのロゴやイメージ画像を1枚設定しておくだけで印象が変わるよ。

構造化データを有効にする

「Cocoon設定」→「SEO」タブで、パンくずリストの構造化データを有効化しよう。Google検索結果にパンくずリストが表示されるようになって、クリック率が上がる可能性がある。設定はチェックを入れるだけで5秒で終わるから、やらない理由がない設定だよ。

ページ表示速度の最適化

「Cocoon設定」→「高速化」タブの設定に加えて、「Cocoon設定」→「画像」タブでWebPの変換設定を確認しておこう。画像の遅延読み込み（Lazy Load）は標準で有効になっているけど、テーマのバージョンによってはオフになっている場合もあるから、念のため確認しておくのが安心。

モバイルメニューの設定

ブログ読者の7〜8割はスマホからアクセスしている。モバイル用のハンバーガーメニューを設定して、スマホでもカテゴリーや重要なページに簡単にアクセスできるようにしておこう。「外観」→「メニュー」でモバイルメニューを作成して、表示位置を設定するだけだよ。

注意

Cocoonのカスタマイズに夢中になって、記事を書く時間がなくなるのは初心者あるある。基本設定を済ませたら、まずは記事作成に集中しよう。デザインの微調整は記事が20〜30本溜まってからでも十分間に合うよ。

収益化に関わるカスタマイズ

広告表示位置の最適化

「Cocoon設定」→「広告」タブで、AdSense広告の表示位置を細かくコントロールできる。記事上・記事中（見出し前）・記事下の3ヶ所が基本の配置パターン。特に目次上の広告はクリック率が高いとされているけど、広告を貼りすぎると読者体験が悪化するから、最初は「記事下」と「目次上」の2ヶ所から始めるのがおすすめ。

テンプレートでアフィリエイトタグを管理

Cocoonの「テンプレート」機能で、頻繁に使うアフィリエイトコードを登録しておこう。ショートコードで記事に挿入するだけで呼び出せるから、毎回コードをコピペする手間がなくなる。リンク変更時も一括で修正できるのが最大のメリットだよ。

ボタンの色を目立たせる

アフィリエイトリンクをボタン形式で設置する場合、サイトのメインカラーと補色関係にある色にするとクリック率が上がる。例えばメインカラーが青系なら、ボタンはオレンジや赤系にすると目立ちやすい。Cocoonのボタンブロックで色やサイズを簡単に変更できるよ。

ナビ助

収益化のカスタマイズは、AdSenseの審査に通ってからで大丈夫だよ。まずは質の高い記事を書くことが最優先！

⭐おすすめ記事
ブログを始めるならサーバー選びが大事。国内最速ConoHa WINGの実力をまとめました。

ConoHa WINGの口コミ・評判｜国内最速サーバーの実力を検証

料金・速度・使いやすさを正直レビュー

追加CSSでワンランク上のデザインに

CSSの追加方法

「外観」→「カスタマイズ」→「追加CSS」から安全にCSSを追加できる。テーマファイルを直接編集するのは絶対にNGで、追加CSSに書けばアップデートで消える心配もないよ。プレビューを確認しながらコードを追加できるから、ミスに気づきやすいのもメリット。

初心者でもコピペで使えるCSS例

ネット上には「Cocoon CSS カスタマイズ」で検索すると大量のコードが見つかる。プロフィールボックスの角丸化、見出しデザインの変更、サイドバーの装飾などが人気のカスタマイズだよ。ただし、コピペする前にプレビューで表示を確認して、崩れていないかチェックするのを忘れずに。

ポイント

Cocoonカスタマイズの優先順位

最優先：スキン選び、SEO設定、アクセス解析連携、高速化
早めに：OGP設定、サイドバー整理、モバイルメニュー
余裕ができたら：広告配置、テンプレート管理、追加CSS

Cocoonのカスタマイズ情報はCocoon公式サイトのマニュアルが最も正確だよ。困ったときはCocoonフォーラムで質問してみよう。デザインのカスタマイズ事例はサルワカでも豊富に紹介されているよ。Cocoonの基本的な使い方を知りたい人は以下の記事も参考にしてね。

Cocoonの使い方を初心者向けに解説｜無料テーマのおすすめ設定

「Cocoonをインストールしたけど、何から設定すればいいのかわからない」「機能が多すぎてどこを触ればいいか迷う」という初心者の方は多いのではないでしょうか。Cocoonは無料テーマでありながら、有料テーマに匹敵する機能を備えたWordPr…

よくある質問

Cocoonのスキンを変更するとSEOに影響しますか？

スキンの変更は見た目だけの変更なので、SEOに直接的な影響はないよ。安心して好みのスキンに変更して大丈夫。ただし表示速度が極端に遅くなるスキンは間接的にSEOに悪影響を与える可能性があるから、変更後はPageSpeed Insightsで速度チェックしておくと安心。

有料テーマに移行する場合、Cocoonの設定は引き継げますか？

Cocoon固有の設定やスキンはすべてリセットされる。記事の内容やカテゴリー構成はそのまま残るけど、吹き出しやボックス装飾などCocoon独自の装飾は崩れる可能性がある。SWELLにはCocoonからの移行サポートプラグインが用意されているから、乗り換えを検討するならSWELLが最もスムーズだよ。