Cocoonをおしゃれにカスタマイズする方法【初心者推奨】

Cocoonでブログを作ったものの、「なんか垢抜けないな…」「他の人のサイトみたいにおしゃれにならない」と感じていませんか。

このページでは、Cocoonをおしゃれにカスタマイズしたい人向けに、初心者でも実践しやすい考え方と手順をまとめていきます。

先に結論を一言でいうと、難しいコードが書けなくても、順番を決めて少しずつ設定していけば、Cocoonでも十分おしゃれなブログに育てていけます。

Cocoonをおしゃれにカスタマイズする前に知っておきたい基本

どんなブログにしたいかをざっくり決めよう

最初にやっておきたいのは、「このブログをどんな雰囲気にしたいか」をざっくり決めておくことです。ここが決まっていると、スキンや色を選ぶときに迷いにくくなります。

イメージしやすいように、代表的なテイストを表にまとめてみました。

テイスト	全体のイメージ	向いているジャンルの例
大人シンプル系	余白多めで落ち着いた色味、スッキリとした印象	ビジネス、ライフハック、勉強系
女性向けかわいい系	パステルカラー、丸みのあるパーツ、やわらかい雰囲気	コスメ、美容、ハンドメイド
モノトーン系	白・黒・グレー中心でクール、写真が映える	デザイン、ガジェット、ポートフォリオ
ポップ・カラフル系	明るい色をしっかり使う、にぎやかな印象	子育て、趣味、雑記ブログ

「女性向けかわいい系だけど、やりすぎずスッキリ見せたい」のように、複数のテイストを混ぜても大丈夫です。まずは自分のブログの雰囲気を一言で言うと何か、紙やメモアプリに書き出してみてください。

おしゃれと見やすさのバランスを意識しよう

見た目を良くしようとして、装飾を増やしすぎてしまうのはよくあるパターンです。私も以前、見出しもボックスもカラフルにしてしまい、「どこが大事なのか全然分からない」と友人に指摘されたことがあります。

例えば、こんな状態は要注意です。

• 見出しに色・背景・アイコンなどを全部盛りにしている
• リンクの色が派手すぎて本文より目立っている
• ボックスや吹き出しが多すぎて、本文がかすんでいる

読者にとっていちばん大切なのは「読みやすさ」です。迷ったときは、「この装飾は読みやすさを上げるか、下げるか」を一度立ち止まって考えてみると、余計なものを減らしやすくなります。

cocoonカスタマイズでできること・できないこと

Cocoonは無料テーマの中でも機能が充実していて、管理画面だけでかなりの範囲をカスタマイズできます。ただ、何でもボタンひとつで変えられるわけではなく、細かい見た目を調整するにはCSSが必要になる場面もあります。

ざっくり分けると、次のようなイメージです。

• 管理画面から設定できる主なこと
  • スキンの変更
  • 背景色やリンク色など、基本的な配色
  • フォントの種類やサイズ
  • 1カラムか2カラムかといったレイアウト
  • サイドバーの位置や、表示・非表示の切り替え
• CSSを使うと調整しやすいこと
  • 見出しのデザインを細かく変えること
  • ボックスや吹き出しの見た目を整えること
  • 段落ごとの余白や行間の微調整
  • ボタンの角丸やホバー時の変化など

この記事では、まずは管理画面でできる範囲を中心におさえつつ、「ここだけCSSを少し足すと一気におしゃれに見える」というポイントも最後に紹介していきます。

スキン・配色・フォントでCocoonブログの雰囲気を一気におしゃれにする

スキン選びで「それっぽさ」を出す

Cocoonには、あらかじめ見た目がセットになったスキンが多数用意されています。スキンを切り替えると、背景色やリンク色、ボタンの雰囲気などが一括で変わるので、まずはここから手を入れるのが手早いです。

テイスト別に、スキンを選ぶときの考え方を整理すると次のような感じです。

テイスト	スキン選びの目安	ポイント
大人シンプル系	白やグレーをベースにしたシンプルなスキン	余白がしっかりあるものを選ぶと読みやすい
女性向けかわいい系	ピンクやベージュなどの淡い色を使ったスキン	アイキャッチや写真もやわらかい色で揃えると◎
モノトーン系	白黒のコントラストがはっきりしたスキン	写真やイラストをカラフルにすると映える
ポップ・カラフル系	原色系のアクセントカラーを使ったスキン	文字装飾を増やしすぎないようバランスに注意

ある程度候補を絞ったら、実際に切り替えて、スマホとPCの両方で確認してみましょう。「なんか違うな」と感じたら、遠慮なく別のスキンを試して大丈夫です。ただし、読者が慣れてきた頃に何度も大きく変えると驚かれるので、最終的には一つに落ち着かせてあげると安心感が出ます。

配色の基本ルール（ベース・メイン・アクセント）

色で迷ったときは、「3色までに絞る」と決めてしまうと一気に整います。ここでは、次の3つの役割を意識して色を決めていきます。

• ベースカラー：背景など、もっとも面積が広い色
• メインカラー：ヘッダーや見出しなど、サイトの雰囲気を決める色
• アクセントカラー：ボタンやリンクなど、少量だけ使う目立つ色

テイスト別の配色例を挙げると、次のようになります。

テイスト	ベースカラー例	メインカラー例	アクセントカラー例
大人シンプル系	#ffffff	#333333	#f2a100
女性向けかわいい系	#fffaf5	#ff8fab	#ffb7c5
モノトーン系	#f5f5f5	#111111	#00bcd4
ポップ・カラフル系	#ffffff	#ff5722	#ffeb3b

色コードはあくまで一例ですが、このくらいに絞っておくと、Cocoonの色設定をいじるときに迷いにくくなります。リンク色やボタン色も、この3色の中から選んでおくと、全体に統一感が出て「ちゃんとデザインされたサイト」という印象に近づきます。

フォント選びで世界観を整える

読者が記事を読むあいだ、ずっと目にしているのがフォントです。フォントを変えるだけでも、ブログの空気がガラッと変わることがあります。

よく使うフォントのイメージを、ざっくり整理してみます。

フォントの種類	印象	向いているブログの例
標準のゴシック体	クセが少なく読みやすい	ほとんどすべてのジャンル
丸みのあるゴシック体	やわらかく親しみやすい	女性向け、美容、子育て
明朝体	落ち着きがあり、文章をしっかり読ませたいとき向き	エッセイ、コラム、読書感想

私の感覚では、本文は標準的なゴシック体にしておき、タイトルや見出しだけ少し雰囲気の違うフォントにするくらいが、読みやすさと個性のバランスが良いと感じます。フォントを変えたときは、必ずスマホ表示でも確認して、「小さすぎないか」「にじんで見えないか」をチェックしておきましょう。

レイアウトと余白のcocoonカスタマイズでプロっぽさを出す

1カラム・2カラムの選び方

Cocoonでは、1カラム（サイドバーなし）と2カラム（サイドバーあり）を選ぶことができます。どちらが正解というわけではなく、ブログの目的によって向き不向きが変わります。

それぞれの特徴をまとめると、次のとおりです。

レイアウト	特徴	向いているケース
1カラム	記事に集中しやすく、スマホ表示と相性が良い	ストーリー重視の記事、読み物メインのブログ
2カラム	サイドバーから他記事への導線を作りやすい	雑記ブログ、収益化を意識したブログ

個人的には、記事数が少ないうちは1カラムでスッキリ見せて、記事が増えてきたら2カラムにして回遊を増やす、という使い方もおすすめです。トップページだけ1カラムにして、記事ページは2カラムにする、といった組み合わせもできるので、ブログの成長に合わせて調整してみてください。

ヘッダーとグローバルナビをおしゃれに整える

ヘッダーとグローバルナビ（メニュー）は、ブログの第一印象を決める部分です。ここがゴチャゴチャしていると、「情報が整理されていないサイト」という印象になってしまいます。

ヘッダー周りで意識したいポイントは次の3つです。

• メニューの数は5〜7個くらいまでに絞る
• 読者に絶対見てほしいページ（プロフィール、人気カテゴリーなど）を優先して並べる
• スマホ表示でメニューが折り返していないかを必ず確認する

ロゴ画像を作るのが難しければ、シンプルなテキストロゴでも構いません。読みやすいフォントでサイト名を配置するだけでも、「きちんとデザインされている」感じは出ます。無理に凝ったロゴを作ろうとして時間をかけるより、まずは整ったナビゲーションを作るほうが効果的です。

トップページと記事ページの見せ方

Cocoonでは、ブログ型のトップページ（新着記事が並ぶ形式）と、固定ページをトップにするサイト型のレイアウトのどちらも選べます。それぞれにメリットがあるので、ブログの用途に合わせて選びましょう。

ざっくりとした目安は次のようになります。

• ブログ型トップページが向いているケース
  • 日記・雑記ブログのように、更新順に記事を見せたい場合
  • 複数ジャンルの記事をそのまま並べたい場合
• サイト型トップページが向いているケース
  • 優先的に読んでほしい記事が決まっている場合
  • 店舗やサービスサイトを兼ねている場合
  • 「プロフィール」「サービス案内」「ブログ」など導線を整理したい場合

どちらの形式でも、トップページの最初に伝えたいのは、「どんなブログか」「誰のためのブログか」「ここに来ると何が分かるか」という3点です。短いキャッチコピーと簡単な説明文、それに続くボタンやリンクをセットで考えると、分かりやすくておしゃれなファーストビューになります。

パーツ別cocoonカスタマイズでおしゃれに見せる具体テク

見出しデザインを整える

見出しは、記事の流れを区切る大事なパーツです。Cocoonには標準でいくつかの見出しスタイルが用意されており、CSSを使わなくてもある程度のカスタマイズができます。

代表的なパターンをまとめると、次のようなイメージです。

見出しパターン	見た目のイメージ	向いている記事
シンプルな下線のみ	スッキリしていて主張控えめ	解説記事、ノウハウ記事
左側に太いライン	メリハリが出て見出しがはっきりする	レビュー記事、比較記事
背景に薄い色がつく見出し	やわらかい雰囲気でかわいい印象	美容、子育て、女性向けブログ
枠線で囲った見出し	区切りがはっきりして長文に向く	まとめ記事、情報量の多い記事

ポイントは、H2とH3の見た目を変えて、階層の違いを目で見ても分かるようにしておくことです。例えば、H2は背景色ありでしっかり目立たせ、H3は下線だけにして軽く見せる、といった組み合わせにすると、読者が今どこを読んでいるのか迷いにくくなります。

ボックス・吹き出し・マーカーの使い方

Cocoonは、ボックスや吹き出しなどの装飾も標準で豊富に用意されています。便利だからといって何でもかんでも使ってしまうと、画面がうるさくなるので、役割を決めて使うのがおすすめです。

使い分けの例を挙げてみます。

私は「1スクロールに1つまで」をなんとなくの目安にしていて、同じ画面に装飾が重なりすぎないように意識しています。マーカーも同じで、本当に強調したい部分だけに使い、「全部が重要」にはしないようにしています。

サイドバーとフッターをスッキリさせる

サイドバーは、あれもこれも詰め込みたくなる場所ですが、情報が多すぎると逆に何もクリックされなくなってしまいます。おしゃれなブログほど、サイドバーは意外とシンプルです。

まずは、次のような項目を優先的に置いてみてください。

• プロフィール（顔写真やアイコンがあると安心感が増す）
• 検索ボックス
• 人気記事、またはカテゴリ一覧
• お問い合わせやSNSへのリンク

逆に、次のようなものは、必要なければ思い切って外してしまって構いません。

• 使っていないランキングサービスのバナー
• 古いキャンペーンのバナー画像
• 意味が分かりにくい外部リンクの集まり

フッターは、「コピーライト表記＋簡単なメニュー」くらいのシンプルさで十分です。濃いめのグレー背景に白い文字など、本文と少しトーンを変えておくと、画面が自然に締まって見えます。

CSSを少し足してCocoonのデザインを「自分だけのブログ」にする

まずは子テーマと追加CSSを使いこなす

CSSを触る前に、必ずCocoonの子テーマを有効にしておきましょう。親テーマ側を直接いじってしまうと、テーマ更新のタイミングで自分の変更が消えてしまうことがあります。

CSSを書く場所としては、「外観 → カスタマイズ → 追加CSS」にまとめておくと管理しやすいです。私は、どこをいじっているか分かりやすいように、コメントでブロック分けをしています。

イメージとしては、次のような感じで整理すると便利です。

ブロック名の例	内容のイメージ
見出しデザイン	h2、h3など、見出しまわりの装飾
ボックス・吹き出し	ボックスや会話風パーツのスタイル
余白・行間調整	段落のmarginやline-heightの調整
ボタン・リンク	aタグやボタンの色、ホバー時の動き

このように分類しておくと、後から「見出しだけ少し変えたい」と思ったときに、どこを触ればいいかすぐ分かります。少し手間はかかりますが、長くブログを続けるほど効いてくる作業です。

ありがちな失敗例と直し方

CSSに慣れてくると、「せっかくだからあちこち変えてみたい」という気持ちが出てきます。私もそうだったのですが、やりすぎるとたいてい見づらくなります。

よくある失敗と、その直し方を表にまとめてみました。

失敗パターン	よくある見た目	改善の方向性
文字を小さくしすぎる	スマホで読むと目が疲れる	本文はおおよそ16px前後を目安にする
行間を詰めすぎる	文字がびっしりで圧迫感がある	line-heightを少し広げて読みやすくする
色を使いすぎる	赤・青・黄などが入り乱れて落ち着かない	ベース・メイン・アクセントの3色に絞る
ボーダーや影を何にでも付ける	ゴテゴテして安っぽく見える	本当に目立たせたい部分だけに装飾を絞る
アニメーションを多用しすぎる	カーソルを動かすたびに画面が落ち着かない	ボタンの色がふわっと変わる程度にとどめる

おしゃれなCocoonカスタマイズを目指すときこそ、「足し算より引き算」を意識すると失敗しにくくなります。何か新しい装飾を入れたときは、そのぶんどこかを減らせないかも一緒に考えてみてください。

おしゃれなCocoonサイト事例から学ぶポイント

収益ブログ系から学べること

広告収入やアフィリエイトを意識したブログは、「デザイン」と「導線」が両立していることが多いです。ただ見た目がきれいなだけでなく、読者にどのように記事を読んでほしいかがはっきりしています。

具体的には、次のような特徴があります。

• トップページに「おすすめ記事」や「ランキング」などを配置して、流れを作っている
• 見出しやボックスが控えめで、広告やボタンの場所が分かりやすい
• ボタンの色がサイト内で統一されていて、「押すべき場所」がひと目で分かる

収益を狙う場合は、装飾よりも「どこを読めば何が分かるか」をはっきりさせることのほうが重要です。Cocoonのシンプルな見出しとボックスをベースに、アクセントカラーをボタンや重要なリンクにだけ使うだけでも、完成度の高いデザインになります。

女性向けブログ・ポートフォリオ系から学べること

女性向けのブログや、イラストレーター・デザイナーのポートフォリオでは、「写真」と「余白」の使い方がとても上手です。テキストよりも、まず視覚的な世界観で惹きつけているイメージです。

真似しやすいポイントは次のとおりです。

• アイキャッチ画像のテイストを揃えて、サイト全体の世界観を統一している
• プロフィール写真やアイコンが、サイトの雰囲気とマッチしている
• 行間や余白を多めにとり、1行や1段落を短めにして読みやすくしている

フリー素材を使う場合でも、同じサービスの中から似た雰囲気の写真を選ぶだけで印象はガラッと変わります。「この色味やタッチが、このブログらしいな」と思える写真を決めておくと、デザインに一貫性が出ておしゃれに見えます。

企業・店舗サイトっぽく見せたい場合

Cocoonでも、設定次第で落ち着いた企業サイトや店舗サイトのような雰囲気を作ることができます。難しいことをしなくても、「見せ方」の方向性を少し変えるだけでOKです。

ポイントは次の3つです。

色に関しても、白・グレー・紺など落ち着いたトーンをベースにすると、安心感や信頼感が出やすくなります。Cocoonのカラム設定と固定ページを組み合わせれば、HTMLやPHPをがっつり書かなくても、しっかりした印象のサイトに仕上げることができます。

よくある質問

Q1. CSSがまったく分からなくても、おしゃれにできますか？

A. できます。Cocoonはスキンや色、フォント、レイアウトなど、管理画面だけで変えられる範囲がかなり広いので、まずはそこを整えるだけでも印象はかなり変わります。

いきなり高度なcocoonカスタマイズに挑戦しようとせず、「管理画面でできることをやり切る → それでも気になるところだけCSSで微調整する」という順番で進めると、挫折しにくいです。

Q2. Cocoonのスキンが多すぎて、どれを選べばいいか分かりません

A. スキンを機能で選ぶというより、ブログのテイストに合うかどうかで選ぶと決めてしまうと楽になります。

例えば、大人シンプル系なら白やグレー中心のスキン、女性向けならピンクやベージュ寄りのスキン、モノトーン系なら白黒のコントラストがはっきりしたスキンを中心に、候補を2〜3個に絞って試してみてください。

あれこれ頻繁に変えるより、「このスキンでいく」と決めて微調整を重ねるほうが、結果的におしゃれな仕上がりになりやすいです。

Q3. 有料テーマに変えないと、おしゃれなデザインにはならない？

A. Cocoonでも十分おしゃれなブログは作れます。有料テーマは、最初からおしゃれなパーツが多く用意されているので、時間を買うイメージに近いです。

ただ、Cocoonももともと高機能なテーマなので、この記事の内容を一通り試していくだけでも、「無料テーマっぽさ」はかなり薄れていきます。まずは手持ちのCocoonを生かし切ってから、それでも物足りないと感じたときに、有料テーマを検討してみるくらいで十分です。

まとめ：Cocoonをおしゃれにカスタマイズするための最初の一歩

この記事の内容を整理します

今日からできる最初の一歩は、「自分のブログをどんなテイストにしたいか」を一言で書き出すことです。そのうえで、Cocoonのスキンと色、フォントを見直し、このページの順番どおりに少しずつ設定を変えてみてください。

一日で完璧なデザインを作ろうとしなくて大丈夫です。ときどき振り返りながら、あなたらしいおしゃれなCocoonブログを、一緒に育てていきましょう。