無料WordPressテーマ「Cocoon」の使い方と設定方法を解説
これからWordPressでブログやホームページを始めようと考えている方の中には、テーマ選びで迷っている方も少なくないかもしれません。
WordPressのテーマには、有料・無料問わず多彩な選択肢がありますが、「最初から有料テーマを購入するのは予算的に厳しい…」と感じる方も少なくありません。
そこで注目したいのが、無料で使えるWordPressテーマ「Cocoon（コクーン）」です。
本記事では、無料WordPressテーマ「Cocoon（コクーン）」の使い方と設定方法を初心者向けにわかりやすく解説していきます。
あわせて、Cocoonを導入するメリットやインストールの方法についても紹介していますので、導入を検討している方はぜひご覧ください。
Cocoon（コクーン）とは
Cocoon（コクーン）は、完全無料で使える人気の国産WordPressテーマです。
開発者の「わいひら」氏によって設計されており、WordPress初心者から中級者まで、幅広い層のユーザーに利用されています。
2022年には、エックスサーバー株式会社へ事業が譲渡されましたが、現在も「わいひら」氏が開発・運営・サポートを継続しています。
シンプルなデザインと、直感的に使える多機能性が大きな特徴で、「費用をかけずに高機能なテーマを使いたい方」にとって、おすすめできるテーマです。
初心者がCocoonテーマを使うべき7つの理由
初心者にCocoonをおすすめする理由は、以下の7つです。
- 無料で利用できる
- デザインがシンプル
- 収益化のための機能が豊富
- SEOに最適化されている
- レスポンシブ対応している
- カスタマイズが簡単にできる
- ページの表示スピードが高速
ここから、それぞれの理由を1つずつ詳しく解説していきます。
無料で利用できる
Cocoon（コクーン）は、完全無料で使えるにもかかわらず、有料テーマに匹敵するほど高機能なWordPressテーマです。
SEO対策やデザインのカスタマイズ性、広告管理機能など、本来は有料テーマで提供されることが多い機能がすべて無料で利用できます。
また、開発者である「わいひら」氏による継続的なアップデートに加えて、エックスサーバーとの連携により、公式サイトやフォーラムを通じた安定したサポート体制も整っています。
そのため、初期費用をかけずにブログやホームページを始めたい方や、長く安心して使えるテーマを探している方にとって、Cocoonは非常に信頼できる選択肢といえます。
デザインがシンプル
Cocoon（コクーン）は、その名の通り「繭（まゆ）」のように、白を基調とした清潔感あるデザインが魅力のWordPressテーマです。
シンプルで落ち着いた構成は、読者に安心感を与えるだけでなく、可読性にも優れているため、多くのユーザーから支持されています。
さらに、「スキン機能」を使えば、配色やレイアウトのデザインをワンクリックで切り替えることができます。
コードの知識がなくても、簡単に見た目を自分好みに調整できるのは、初心者にとって非常に大きなメリットです。
「洗練されたシンプルなテーマを使いたい」「カスタマイズに悩まずブログを始めたい」という方は、ぜひCocoonを一度試してみてください。
収益化のための機能が豊富
Cocoonには、Webサイトやブログの収益をサポートするための機能が、最初から標準で搭載されています。
とくに収益を意識してブログを運営する方にとって、収益化のための便利な機能が豊富に用意されている点は大きな魅力です。
主な機能としては、以下のようなものがあります。
- Googleアドセンスの自動設置設定
- アフィリエイトリンクの一元管理
- オリジナルのランキング作成機能
これらのツールを活用すれば、専門的な知識がなくても、見た目の整った収益化しやすいサイトを構築できます。
広告やアフィリエイトを活用して収益化を目指している方には、Cocoonの導入をおすすめします。
広告やアフィリエイトで収益を目指す方は、以下の記事も参考にしてください。
https://www.value-domain.com/media/affiliate/SEOに最適化されている
Cocoonが優れている点の一つに、検索エンジン対策（SEO）への最適化が挙げられます。
テーマ自体に内部SEO対策がしっかり施されており、専門的な知識がなくても導入するだけで検索結果の上位に表示されやすい環境が整います。
Cocoonに搭載されている主なSEO関連機能は以下のとおりです。
- HTML5エラーの排除による構文の安定性
- 構造化データの整備でリッチリザルトにも対応
- アウトライン（論理構造）の最適化による読みやすさ向上
- メタタグのカスタマイズ機能で柔軟な情報設定が可能
これらの機能は、検索流入を拡大するうえで非常に重要です。
逆に、SEOが最適化されていないテーマを使ってしまうと、検索結果での露出が不利になり、アクセス数の伸び悩みに直結するリスクもあります。
「検索経由でより多くの訪問者を集めたい」という方は、ぜひCocoonのSEO機能を確認してみてください。
ホームページのSEO対策について知りたい方は、以下もあわせてご覧ください。
https://www.value-domain.com/media/seo/レスポンシブ対応している
初心者にCocoonをすすめる理由の一つが、レスポンシブ対応に優れている点です。
PC・スマートフォン・タブレットといった各種デバイスにおいて、ソースコードを共通化し、画面サイズに応じてレイアウトが自動で最適化されます。
さらに、Cocoon設定ではモバイル向けにフォントサイズや行間の調整が可能で、スマホ専用メニューの表示にも対応しています。
技術的な知識がなくても、あらゆる端末で快適に閲覧できるサイトを構築できる点は、Cocoonの大きな特徴といえます。
カスタマイズが簡単にできる
Cocoonが初心者に適している理由の一つに、カスタマイズのしやすさが挙げられます。
「スキン」と呼ばれるデザインテンプレートが100種類以上用意されており、配色や構成をクリック操作だけで切り替えられます。
さらに、管理画面ではヘッダー設定やフォント選択、ウィジェットの調整、表示レイアウトの変更なども直感的に操作できます。
Webデザインに関する知識がなくても扱いやすく、初めてサイトを作る方でも使いやすいテーマです。
ページの表示スピードが高速
Cocoonが初心者に適している理由の一つに、ページ表示の高速性があります。
サイトの読み込み速度は、Googleの検索順位にも影響を与える重要な指標です。表示が遅いページは、検索結果での評価が下がる可能性があり、SEOを重視したブログ運営を目指すなら高速化は不可欠です。
実際に、Googleは2018年7月から、モバイル検索においてページの読み込み速度をランキング要素として正式に採用しています。
そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
Google検索セントラル
Cocoonでは、以下の機能を管理画面から簡単に設定できます。
- ブラウザキャッシュの活用
- CSSやJavaScriptの軽量化
- 画像などの遅延読み込み（Lazy Load）
- Googleフォントの非同期読み込み
これらの項目がテーマに標準搭載されているため、特別な知識がなくてもワンクリックで表示速度の最適化が可能です。
複雑な設定なしでサイトを軽く・速くしたい方にとって、Cocoonは非常に有力なテーマです。
また、より本格的にWordPress高速化対策を強化したい方には、以下の記事もおすすめです。
https://www.value-domain.com/media/litespeed-cache/Cocoonのインストール方法【始め方を2ステップで解説】
Cocoonのインストール方法は、以下の2ステップです。
- 公式サイトから「親テーマ」「子テーマ」をダウンロードする
- WordPressの管理画面から「親テーマ」「子テーマ」をアップロードする
上記の手順に沿って操作を行えば、Cocoonをインストールできます。
「費用は抑えたいけど、クオリティには妥協したくない」
そんな方は、コアサーバー＋Cocoonの組み合わせからスタートしてみましょう。
無料で使える高機能テーマ「Cocoon」と、ドメインも無料で手に入る高コスパサーバー「コアサーバーV2プラン」を併用すれば、
コストを抑えつつも、本格的なホームページやブログ運営が可能になります。
ここから、それぞれのインストール手順について解説します。
公式サイトから「親テーマ」「子テーマ」をダウンロードする
WordPressの管理画面から「親テーマ」「子テーマ」をアップロードする
ダウンロードが完了したら、WordPressの管理画面から「外観」→「テーマ」をクリックします。
続いて、「新規追加」→「テーマをアップロード」をクリックしてください。
「ファイルを選択」をクリックし、「親テーマ」→「子テーマ」の順番にアップロードします。
このような形で反映されるため、子テーマの方を有効化します。
これで、WordPressテーマのCocoonを実装できました。
Cocoonの使い方・設定方法8つ
Cocoonの主な使い方・設定方法は、以下の8つです。
まずは最低限これらの設定を理解し、Cocoonを使いこなしましょう。
ここからそれぞれの設定・やり方について、詳しく解説していきます。
スキンを設定する
Cocoonには、「スキン」と呼ばれる機能が備わっており、ワンクリックでブログ全体のデザインを切り替えられます。
最初に、WordPressの管理画面から「Cocoon設定」を開きます。
次に、「スキン」タブを選択してください。
一覧が表示されたら、好みに合ったデザインを選び、「変更をまとめて保存」ボタンを押します。
選択内容は即時プレビューに反映され、その場で仕上がりを確認できます。
HTMLやCSSなどの複雑な操作を必要とせず、見た目を手軽に変更できる点もCocoonの大きな特徴です。
ヘッダーを設定する
続いて、Webサイトやブログの顔ともいえるヘッダーの設定を行いましょう。
ヘッダーとは、Webサイトやブログの上部に表示される部分のことで、ロゴやメニューを表示できます。
- ヘッダー画像を設定する
- ヘッダーメニューを設定する
ヘッダー画像を設定する
Cocoon設定をクリックし、「ヘッダー」タブを選択するとメニューが表示されます。
「ヘッダー固定・モバイルロゴ」の「選択」をクリックすると、画像のアップロード画面が表示されます。
アップロードした画像を確認後、「変更をまとめて保存」をクリックすればロゴ画像の設定完了です。
ヘッダーメニューを設定する
ロゴ画像の下に表示される、ヘッダーメニューを設定していきます。
まずはWordPressの管理画面から、「外観」→「カスタマイズ」をクリックしてください。
続いて、「メニュー」をクリックします。
「メニューを新規作成」をクリックします。
メニュー名に「ヘッダーメニュー」と入力し、メニューの位置で「ヘッダーメニュー」にチェックを入れ「次」をクリックしてください。
「項目を追加」をクリックすると、メニュー項目が一覧で表示されます。今回はカスタムリンクの「ホーム」を追加してみましょう。
さらに、「カテゴリー」をクリックすればカテゴリーページへのリンクをメニューに追加できます。
「公開」をクリックすれば、ヘッダーメニューの設定完了です。
フッターを設定する
Webサイトやブログの最下部に表示されるフッターエリアでは、メニューやクレジット表記を設定できます。
このエリアは全ページに共通表示されるため、ナビゲーションや著作権表示などに便利です。
- フッターメニューを設定する
- クレジット表記を設定する
フッターメニューを設定する
まずはWordPressの管理画面より、「外観」→「カスタマイズ」をクリックします。
続いて、「メニュー」→「メニューを新規作成」をクリックしてください。
メニュー名に「フッターメニュー」と入力し、メニューの位置から「フッターメニュー」にチェックを入れたら「次」をクリックします。
「項目を追加」をクリックするとメニュー項目一覧が表示されるため、カスタムリンクの「ホーム」をクリックして「公開」をクリックすれば設定完了です。
クレジット表記を設定する
WordPress管理画面から「Cocoon設定」をクリックしてください。
続いて、「フッター」タブをクリックします。
フッター表示タイプを選択します。今回は「メニュー＆クレジット（中央揃え）」を選択しました。
「クレジット表記」にある「サイト開設年」を設定します。
次に「独自表記」を選択し、以下のテキストをコピーして入力欄に貼り付けてください。
© [date format="Y"] Example Blog Guide All Rights Reserved.
ブログ名は運営するブログに合わせて変更します。
これでサイト開設年がフッターメニューに反映されるようになります。
サイドバーを設定する
サイドバーは、Webサイトやブログの右側や左側に表示されるエリアで、ナビゲーションや情報補足に役立つ重要なスペースです。
WordPress管理画面より、「外観」→「ウィジェット」をクリックすると、サイドバーの設定を行うことが可能です。
画面左側からサイドバーに追加したいパーツを選んだら、選択して「サイドバー」にチェックを入れて、「ウィジェットを追加」をクリックすればサイドバーにパーツを追加・編集できます。
サイドバーには以下のようなウィジェットを設定するのがおすすめです。
| ウィジェット | 説明 |
|---|---|
| 検索 | キーワードを入力して該当する記事を検索できる |
| プロフィール | サイト・ブログ運営者の簡単なプロフィールを掲載する |
| カテゴリー | カテゴリーごとに記事を整理し、訪問者が情報を探しやすくする |
| 最新記事 | サイト・ブログの訪問者が他の記事も読めるようにする |
他にも多くのウィジェットが用意されており、目的に応じて自由にカスタマイズすることができます。
ご自身のブログに合わせて、最適なサイドバー構成を考えてみましょう。
メインコンテンツの設定をする
Cocoonのメインコンテンツ設定を行います。
Cocoonにはメインコンテンツ上部にカテゴリーを3つまで表示させられる機能があるため、こちらの設定方法を解説します。
まずはWordPress管理画面より「Cocoon設定」をクリックしてください。
続いて、「インデックス」タブをクリックします。
フロントページタイプの中の「タブ一覧」を選択し、表示したいカテゴリーを3つまで選択してください。
※4つ以上を選択しても、反映されるのは先頭の3つまでです。
最後に「変更をまとめて保存」を押して設定を確定します。
トップページのメインコンテンツ上部にカテゴリーの一覧が表示されていれば、設定は完了です。
目次を設定する
Cocoonには、記事に自動で目次を設定・挿入してくれる機能があります。
まずは「Cocoon設定」をクリックしてください。
続いて、「目次」タブを選択します。
「目次を表示する」にチェックを入れます。基本的に目次が必要なのは投稿ページなので、「固定ページ」「カテゴリーページ」「タグページ」のチェックは外しましょう。
目次の階層が深いと見にくくなるため、「目次表示の深さ」は「H3見出しまで」にするのがおすすめです。
設定が完了したら、「変更をまとめて保存」ボタンをクリックしてください。
設定すると、このような目次が自動的に表示されるようになります。
メタディスクリプションを設定する
Cocoonには、トップページのメタディスクリプション（キャッチフレーズ）を設定する項目があります。
メタディスクリプションとは、検索結果でサイトタイトルの下に表示される説明文のことです。
設定しておくとブログの内容を読者に伝えやすくなるため、こちらも忘れずに設定しておきましょう。
まずは「Cocoon設定」をクリックします。
続いて、「タイトル」をクリックします。
「サイトの説明」欄に入力した内容がメタディスクリプションに反映されます。
どんな内容のブログかが一目で分かるような、魅力的なメタディスクリプションを設定するようにしてください。
サイトアイコン（ファビコン）を設定する
サイトアイコン（ファビコン）の設定方法を説明します。
ファビコンとは、ブラウザのタブや検索結果のタイトル左側に表示される小さな画像で、視認性の向上やブランドの印象付けに役立ちます。
一目でブログを判別しやすくなるため、読者の記憶に残りやすくなります。
- 「外観」→「カスタマイズ」をクリックします。
- 「サイト基本情報」をクリックします。
- 「サイトアイコンを選択」をクリックします。
- 画像をアップロードして、「選択」をクリックします。
- アイコンが設定されているのを確認し、「公開」をクリックします。
※ファビコンに使用する画像の推奨サイズは 512px × 512px です。
Cocoonの使い方に関するQ＆A
Cocoonの使い方に関する、よくある疑問は以下の通りです。
- Cocoonをおしゃれにカスタマイズする方法は？
- Cocoonのスキン一覧は？
- Cocoonでブログを始める方法は？
- おすすめのWordPressテーマは？
ここからそれぞれの疑問を、1つずつ詳しく解説していきます。
Cocoonをおしゃれにカスタマイズする方法は？
Cocoonをおしゃれに仕上げるためのカスタマイズ方法の例を以下に紹介します。
- スキン機能でデザインの印象を整える
- サイドバーからメタ情報を非表示にする
- グローバルナビゲーション（ヘッダーメニュー）を構成する
- メインコンテンツ上部にカテゴリーを配置する
- アイキャッチ（サムネイル）画像のサイズを「横1,280px × 縦720px」で統一する
Cocoonでは多彩な調整が可能ですが、上記の基本的な要素を見直すだけでも、デザイン全体の印象が洗練されます。
また、Cocoonを活用したサイトデザインの事例を紹介するページも用意されていますので、そちらも参考にしながら、自分らしいスタイルを構築してみてください。
Cocoonのスキン一覧は？
Cocoonのスキン種類一覧を、以下の表にまとめました。
| スキン名 外観 | ||
|---|---|---|
メイド・イン・ヘブン | grayish | SILK（シルク） |
みるらいと | イノセンス | COLORS（イエロー） |
COLORS（グリーン） | COLORS（ピンク） | COLORS（ブラック） |
COLORS（ブルー） | COLORS（レッド） | Like Simplicity |
てがきノート(ブルーコーラル)  | てがきノート(グリーンオレンジ)  | てがきノート(ピンクレモン)  |
てがきノート(ホワイトバナナ)  | てがきノート(ダークスカイ)  | Season (Spring) |
Season（Summer） | Season (Autumn) | Season (Winter) |
モダンブラック | Fuwari -御召茶（おめしちゃ）- | Fuwari -海松茶(みるちゃ)- |
Fuwari -海老茶(えびちゃ)- | Fuwari -褐色(かちいろ)- | Simple‐Darkmode |
| Simple‐Darkmode Always （常時ダークモード）  | NAGI | one |
Hygiene | Natural（ブルー） | Natural（グリーン） |
Simple Blue | Simple Green | Simple Navy |
Simple Pink | Simple red | モノクロ |
アリス（無印） | アリス（チェシャ猫） | アリス（白ウサギ） |
アリス（ユニコーン） | アリス（ローズ） | アリス（ビタミン） |
カラフルライン | ダークエンジ | ダークカモノハ |
ダークルリ | ミックスグリーン | ミックスブルー |
ミックスレッド | サムライブルー（勝色） | サムライブルー（無印） |
Veilnui Simplog (amber) | Veilnui Simplog (blue) | Veilnui Simplog (brown) |
Veilnui Simplog (cyan) | Veilnui Simplog (deep orange) | Veilnui Simplog (deep purple) |
Veilnui Simplog (green) | Veilnui Simplog (indigo) | Veilnui Simplog (light blue) |
Veilnui Simplog (light green) | Veilnui Simplog (lime) | Veilnui Simplog (orange) |
Veilnui Simplog (pink) | Veilnui Simplog (purple) | Veilnui Simplog (red) |
Veilnui Simplog (teal) | Veilnui Simplog (yellow) | Momoon（アクア） |
Momoon（グリーン） | Momoon（オレンジ） | Momoon（ピンク） |
Momoon（パープル） | tecurio earth | tecurio grape |
tecurio lime | tecurio mango | tecurio moon |
tecurio peach | tecurio sky | tecurio soil |
tecurio sunset | Bizarre-food（グリーンソバ） | Bizarre-food（ピンクワイン） |
Bizarre-food（ブラックバーガー） | Bizarre-food（ブルーカレー） | Bizarre-food（ホワイトラーメン） |
旅カメラ | おでかけピンク | おでかけブルー |
おでかけレモン | いつものコーヒー | いつものローズ |
いつもの深海 | m-sora | m-tomato |
ドット・レイニーブルー | ドット・ワインレッド | ほんわかライトニング |
Metal Styles | 凸凹 | |
Cocoonのスキンでデザインを設定したい人は、上記のスキン一覧を参考にしてください。
Cocoonでブログを始める方法は？
Cocoonを使ってブログを開設する手順は、以下のとおりです。
- 使用するドメインを決定し、取得する
- レンタルサーバーと契約する
- ドメインとサーバーを連携させる
- WordPressをサーバーにインストールする
- Cocoon公式サイトからテーマをダウンロードする
- WordPressの管理画面からCocoonをアップロードする
これらの手順を順に進めれば、Cocoonを利用したブログの立ち上げが完了します。
これからドメインやサーバーの準備を進める方には、コアサーバーの活用をおすすめします。
コアサーバーとドメインを同時に申し込むことで、ドメインの更新費用が永久無料となる特典が適用されます。
初期費用を抑えてブログを始めたい方にとって、有力な選択肢となるでしょう。
おすすめのWordPressテーマは？
WordPressのテーマは、有料・無料それぞれにおすすめがあります。
ここでは、代表的なテーマを紹介します。
どのテーマも実績があり、多くのユーザーから支持されています。
初めての導入で迷っている場合でも、上記から選択すれば安心して利用を始められるでしょう。
WordPress人気おすすめテーマは、以下の記事でも詳しく解説しています。
https://www.value-domain.com/media/wordpress-theme-recommend...まとめ：Cocoonの使い方・設定方法を実践しましょう
ここまで、Cocoonの使い方や設定手順について詳しくご紹介しました。
Cocoon（コクーン）は、シンプルで洗練されたデザインと高い機能性を兼ね備えた、人気の無料WordPressテーマです。
有料テーマに匹敵する機能を無料で使えるため、初期コストをかけずに本格的なブログを始めたい方にぴったりです。
特に、これからWordPressブログを始める初心者の方には、導入しやすく扱いやすいテーマとしておすすめできます。
コアサーバーでCocoonをもっと快適に！
WordPressブログを始めるには、ドメインとレンタルサーバーの契約が必要です。
その中でもおすすめは、高コスパで高性能な「コアサーバーV2プラン」です。
- 月額390円から利用可能
- ドメインを同時申込で、更新費用が永久無料に！
- WordPress自動インストール機能で、最短90秒でブログを開設可能
コアサーバーは、Cocoonのようなテーマも快適に動作する高スペック環境を提供しており、コストを抑えつつ本格的にブログ運営をしたい方に最適です。
これからブログを始めるなら、「Cocoon × コアサーバー」の組み合わせで、理想のスタートを切りましょう！
目次へ