CocoonテーマをWordPressに設定して30分でデザインを整える手順
WordPressで会社ブログやオウンドメディアを立ち上げるなら、テーマ選びが最初の関門になります。デザインの質がそのまま読者の第一印象を決めるため、見た目の完成度は早めに整えておきたいところです。
そこでおすすめしたいのが、国内トップシェアを誇る無料WordPressテーマ「Cocoon」です。直感的な設定画面と豊富なカスタマイズ機能を持ちながら完全無料で使えるため、コーディングの知識がなくても本格的なデザインに仕上げられます。
この記事では、CocoonをWordPressに導入して、30分以内にデザインを整える具体的な手順をステップごとに解説します。
紹介する内容はすべて無料版Cocoonを前提にしています。その理由は次の通りです。
このブログ自体もCocoon無料版で運営しています。長く使い続けられる安定感があって、本当に重宝しています。
目次
ステップ1：Cocoon（無料版）をWordPressにインストールする
最初にCocoonをWordPressへ導入する手順を説明します。
準備の流れは以下の3段階です。
Cocoon導入の全体像
- 必要ファイルのダウンロード
Cocoon公式サイトから親テーマと子テーマの両方を入手します。 - 親テーマのインストール
Cocoonの核となるファイルです。直接編集はせず、アップデートのみ行います。 - 子テーマのインストール
デザインや機能のカスタマイズはすべてこの子テーマ側で行います
順番に確認していきましょう。
1-A.必要ファイルのダウンロード
Cocoonの公式サイトにアクセスして、必要なファイルを2つ入手します。
必要ファイルのダウンロード手順
- Cocoon公式サイト (https://wp-cocoon.com/) を開きます。
- ページ下部に表示されている「ダウンロード」ボタンをクリックします。
- 親テーマと子テーマをそれぞれダウンロードします。
- 親テーマのファイル名は「cocoon-master.zip」です。
- 子テーマのファイル名は「cocoon-child.zip」です。
1-B. 親テーマのインストール
続いて、ダウンロードした親テーマをWordPressに追加します。親テーマはCocoonの動作基盤となるファイルなので、インストール後は編集せず、アップデートのみ行う運用が基本です。
親テーマのインストール手順
- WordPress管理画面の左メニューから「外観」→「テーマ」を開き、「新しいテーマを追加」をクリックします。
- 「テーマをアップロード」をクリックし、「ファイルを選択」ボタンを押します。
- 先ほどダウンロードした「cocoon-master.zip」を選択し、「今すぐインストール」をクリックします。
1-C. 子テーマのインストール
最後に子テーマを追加します。フォントサイズの変更や背景色の調整といったデザインのカスタマイズ作業は、この子テーマに対して行います。
子テーマのインストール手順
- 再び「外観」→「テーマ」→「新しいテーマを追加」の順に進みます。
- 「テーマをアップロード」→「ファイルを選択」の順にクリックします。
- 「cocoon-child.zip」を選択して「今すぐインストール」をクリックします。
- インストール完了後、「外観」→「テーマ」から子テーマの「有効化」をクリックします。
有効化するのは必ず子テーマ側にしてください。親テーマを有効化してしまうと、テーマのアップデート時にカスタマイズした内容がすべてリセットされてしまいます。
ここまで完了すれば、Cocoonのインストールは終了です。ブログのURLにアクセスすると、Cocoonのデザインが適用されていることを確認できます。
ステップ2：Cocoonのスキン（デザイン）を設定する
インストール直後のCocoonは、まだデフォルトの外観のままです。「思っていたデザインと違う」と感じた方も多いはず。
洗練された見た目に整えるためには、いくつかの設定が必要になります。まずはスキンを選ぶ基本設定から始めましょう。
スキンとは、Cocoonに用意されたデザインテンプレートのことです。数十種類の中から好みのものを選ぶだけで、ブログ全体の雰囲気が大きく変わります。
Cocoonのスキン設定手順
- 設定画面に移動
WordPress管理画面から「Cocoon設定」→「スキン」を開きます。 - スキン一覧を確認
ページを下にスクロールすると、さまざまなデザインのスキンが一覧で表示されます。スキン名をクリックすると詳細情報が確認できます。 - プレビューで確認
スキン名の横にある画像マークをクリックすると、実際の見た目を確認できます。イメージに合うものを探しましょう。 - スキンを適用
使用するスキンを選択状態にしてから、ページ下部の「変更をまとめて保存」をクリックすると反映されます。 - 表示を確認
ブログを実際に開いて、選んだスキンが適用されているか確認します。
ステップ3：Cocoonをカスタマイズして使いやすくする
スキンを設定すると、グッと見栄えが良くなります。次は読者にとっての使いやすさ（ユーザビリティ）を高めるカスタマイズに取り組みましょう。
ユーザビリティが高いサイトは、読者が目的のコンテンツにたどり着きやすく、回遊率の向上やSEOへのプラス効果も期待できます。
せっかくオウンドメディアを運営するなら、より多くの方に継続して訪問してもらえるよう、ここは丁寧に設定しましょう。
やりすぎると手が止まってしまうので、まずは最低限おさえておきたい4つのポイントに絞って説明します。
優先して設定したいカスタマイズ項目
- ヘッダー画像
ブログの第一印象を決める顔。ここが整うとサイト全体の完成度が一気に高まります。 - サイドバー
読者の回遊を促す補助ナビゲーション。ユーザビリティに直結する重要エリアです。 - グローバルメニュー
サイト全体の道案内役。訪問者が迷わずコンテンツを探せるようにします。 - ピックアップコンテンツ
特に読んでほしい記事を目立つ形で訴求できる機能です。
それぞれの設定方法を見ていきます。
3-A：ヘッダー画像でブログの印象を決める
ヘッダー画像は、訪問者が最初に目にするビジュアルです。ここの完成度がブログ全体の印象を左右します。
無料素材サイトを活用したヘッダー画像の設置方法と、さらにクオリティを上げるためのアプローチを紹介します。
ヘッダー画像の設定手順
- 素材を選ぶ
写真ACなどのフリー素材サイトで、ブログのテーマや雰囲気に合った画像を探しましょう。 - 画像をダウンロード
気に入った画像が見つかったら「Free Download」→「Download」の順にクリックして保存します。 - Cocoon設定のヘッダーを開く
WordPress管理画面から「Cocoon設定」→「ヘッダー」へ進みます。 - 画像をアップロード
「ヘッダー背景画像」欄の「選択」をクリックし、先ほど保存した画像をアップロードします。 - 保存して反映を確認
ページ下部の「変更をまとめて保存」をクリックして完了です。
ヘッダーはオウンドメディアの看板です。他のパーツより優先して時間をかけたい場所。思い切ってオリジナルデザインを制作するのも一つの選択肢です。
オウンドメディアのデザインをさらに個性的にするなら、オリジナルヘッダーの作成を検討してみてください。
PhotoshopやIllustratorを使う方法もありますが、ハードルが高いと感じる方も多いでしょう。
そのような場合は、ブラウザで無料使える画像デザインツールCanvaがおすすめです。プロクオリティのテンプレートを無料で活用でき、オリジナルのヘッダーを手軽に作れます。
自分で作るのが難しい場合は、ココナラでデザイナーに依頼する方法もあります。ビジネス向けのデザイン発注が個人間でできるプラットフォームで、費用も比較的手ごろに収まることが多いです。
3-B：サイドバーの構成を整える
会社ブログにおいて、サイドバーはユーザビリティを直接左右するエリアです。本文の補足情報や関連コンテンツを配置するのに最適な場所として、積極的に活用しましょう。
本文を読みながら自然と目に入る位置にあるため、読者の行動を誘導する効果が高いです。
何を配置するかはブログの目的や対象読者によって変わりますが、一般的に効果的とされる要素は以下の通りです。
サイドバーに設置したいおすすめ項目
すべてを一度に設置する必要はありません。優先度の高いものから順に追加し、運用しながら調整していく方法が現実的です。
3-C：グローバルメニューを設定する
訪問者がサイト内を迷わず移動できるようにするには、分かりやすいナビゲーション設計が欠かせません。
ヘッダー部分に配置するグローバルメニューは、サイト全体の構造を伝える案内板の役割を果たします。サイドバーとは異なり、すべてのページから常に見える位置にあるため、優先度が高い項目を配置すると効果的です。
特に読んでほしいコンテンツや問い合わせページなど、重要な導線はグローバルメニューで訴求しましょう。
以下の手順でWordPressのメニューを作成・設定します。
メニューを設定する前に、カテゴリーを作成しておく必要があります。まだ作成していない場合は、「仮カテゴリー」など仮の名称で作成しておき、後から変更する方法で進めてください。
グローバルナビゲーションの設定手順
- 管理画面の左メニューから「投稿」→「カテゴリー」を選択します。
- 必要な情報を入力して「新規カテゴリーを追加」をクリックします。
- 「外観」→「メニュー」へ進み、「新しいメニューを作成しましょう」をクリックします。
- 「グローバルナビゲーション」など分かりやすいメニュー名を入力します。
- 「メニューを作成」をクリックします。
- 左側の「メニュー項目を追加」エリアから、表示したい項目を選択します。
- 追加したい項目にチェックを入れ「メニューに追加」をクリックします。
- ドラッグ＆ドロップで項目の表示順を調整できます。
- 「メニューの位置」で表示箇所を選択し、「メニューを保存」をクリックして完了です。
3-D：ピックアップコンテンツで読者の目を引く
Cocoonに搭載されているピックアップコンテンツ機能を使うと、ブログのトップページなどに注目記事を視覚的に目立つ形で表示できます。
ピックアップコンテンツを設定しておくと、一番見てほしい記事を訪問直後に自然な形でアピールできます
アイキャッチ画像・タイトル・本文の抜粋が整理された形で表示されるため、訪問者の興味を引きつける効果があります。
クリック率を高め、ページ閲覧数の増加にもつながるので、サイトの導線設計として積極的に活用することをおすすめします。
ピックアップしたい記事がまだ決まっていない場合は、仮の記事で作業を進めてください。後から差し替えることができます。
ピックアップコンテンツの設定手順
- 「外観」→「メニュー」から「新しいメニューを作成しましょう」をクリックします。
- メニュー名（例：おすすめカード）を入力して「メニューを作成」をクリックします。
- ピックアップしたい記事やページを選択し、「メニューに追加」→「メニューの保存」をクリックします。
- 「Cocoon設定」→「おすすめカード」へ移動します。
- 「おすすめカードの表示」を「全ページで表示」に設定し、作成したメニューを選択します。表示スタイルやカード余白なども好みに合わせて調整してください。
- 最後に「変更をまとめて保存」をクリックして完了です。
設定後はブログのトップページを開いて、ピックアップコンテンツが正しく表示されていることを確認しましょう。
まとめ：Cocoonで素早くデザインを整えよう
WordPressの無料テーマ「Cocoon」は、専門的な知識がなくても30分程度でデザインを形にできる頼もしいテーマです。
オウンドメディアをこれから始めたい方や、Webデザインに詳しくない方にとって、最初の選択肢として最適だといえます。
この記事で紹介した手順を一つひとつ丁寧に進めれば、難しいと感じる場面はほとんどないはずです。
まずは実際に手を動かしてみることが大切です。ぜひ今日から取り組んでみてください。
