※当記事内には、商品プロモーションを含む場合があります
読んでほしい記事
Cocoon(コクーン)をインストール・ブログを公開する方法【WordPressテーマ】

今回は、WordPrssの人気無料テーマ「Cocoon(コクーン)」を使ってブログを公開する方法を紹介します。

こちらの記事は以下のような方に向けて書いています。

  • WordPress初心者の方
  • フリーのテーマでブログを公開予定の方
  • Cocoon(コクーン)を初めて利用される方

Cocoonを使ってアフィリエイトやブログで収益化を検討されている方は、ぜひチェックしてください。

ただ、Cocoonはデザインがとてもシンプルです。
もし、おしゃれなデザインにしたい方やあっかりと収益化に取り組みたい方には、有料テーマの購入もおすすめします。

当記事を書いている人
サイト運営者
こちらの記事は、プログラミング・WEB制作歴15年以上、ブログ歴10年以上のプログラマーが書いています。
プライベートでも仕事でも多くのレンタルサーバーを利用してきた経験から、サーバーに関する豊富な知識をもとに書いています。
>> プロフィール

Cocoon(コクーン)をインストールしてサイト(ブログ)を公開する方法

WordPressにCocoon(コクーン)をインストールしてサイト(ブログ)公開するまでの方法を紹介します。

ただ、エックスサーバーでは、サーバーパネル上から簡単にCocoonをインストールすることができます。
もしエックスサーバーを利用されている方はこちらをお読みください。

Cocoonのテーマファイルを取得

Cocoonのテーマファイルは、公式サイトより入手できます。
親テーマ子テーマの2つ用意されているので、必ず両方とも入手しておきましょう。

まずは、公式サイトへ移動してください。
以下のような画面が開くので、「ダウンロード」ボタンをクリックしてください。
Cocoonのホームページ

Cocoonテーマのダウンロードページへ移動します。

ページ下へスクロールしていくと、まずは親テーマのダウンロードボタンがあります。
Cocoonの親テーマダウンロードボタン
ボタンをクリックするとダウンロードが始まるので、親テーマをお使いの端末のローカルに保存してください。
ダウンロードされるファイルはZIP形式で、「cocoon-master-xx.xx.xx.zip」のようなファイル名になっています。

 

次に、同じページをさらに下にスクロールしていくと、子テーマのダウンロードボタンが見つかります。
Cocoonの子テーマダウンロードボタン
こちらも同様にボタンをクリックして、端末のローカルに保存しておきましょう。
ダウンロードされるファイルはZIP形式で、「cocoon-child-master-xx.xx.xx.zip」のようなファイル名になっています。

これで、Cocoonのテーマファイルの取得が完了しました。

 

Cocoonには、親テーマと子テーマの2つがあります。
親テーマだけでも動作はしますが、子テーマもインストールしておいた方がいいので必ずダウンロードしておきましょう。

Cocoonをインストールする方法

テーマのダウンロードが完了したら、次はそのテーマをWordPressの外観画面からインストールします。
インストールの手順としては以下になります。

■親テーマをインストール

■子テーマをインストール

■子テーマを有効化

 

まずは、親テーマのインストールから行います。

WordPress管理画面の左側に表示されている「外観」の中に「テーマ」があるのでクリックしてください。
こちらの画面が開くので、画面左上にある「新規追加」をクリックしてください。
Cocoon子テーマのインストール

画面左上にある「テーマのアップロード」をクリックしてください。
Cocoon子テーマのインストール

「参照」をクリックして、上記でダウンロードしておいた親テーマ「cocoon-master-xx.xx.xx.zip」を選択します。
Cocoon子テーマのインストール

「今すぐインストール」をクリックすると、選択した親テーマのインストールが開始します。
Cocoon子テーマのインストール

インストールが完了したら、このような画面に遷移します。
Cocoon子テーマのインストール
ここで親テーマを有効化しておいてもいいのですが、この後に子テーマのインストールを行います。
その為、この画面はこのまま放置でもいいです。

 

次に、子テーマのインストールから行います。

と言っても、手順は親テーマと一緒です。

管理画面の「外観」→「テーマ」と画面遷移して、テーマ画面へ移動してください。
画面左上の「新規追加」をクリックします。
Cocoon子テーマのインストール

画面左上の「テーマのアップロード」をクリックします。
Cocoon子テーマのインストール

「参照」をクリックして、上記でダウンロードしておいた子テーマ「cocoon-child-master-xx.xx.xx.zip」を選択します。
Cocoon子テーマのインストール

「今すぐインストール」をクリックすると、選択した子テーマのインストールが開始します。
Cocoon子テーマのインストール

インストールが完了すると以下のような画面に遷移するので、「有効化」をクリックして子テーマを有効化します。
Cocoon子テーマのインストール

これで、Cocoonテーマのインストールがすべて完了しました。
Cocoon子テーマのインストール

これで、ブログも公開された状態になります。
この後は、ブログの基本的な設定内容も紹介しておきます。

 

Cocoonを使ってサイト(ブログ)を公開する方法

テーマのインストールが完了したら、まずはユーザー側の公開が画面確認してみましょう。
このように表示されていれば、インストールしたテーマが正常に動作していることになります。
Cocoonのユーザー画面の確認

ただ、このままだとなんだか寂しいサイトですね。
その為、WordPressの管理画面上で様々な設定を行う必要があります。

今回は、ユーザーへの表示画面をカスタマイズする方法を説明していきます。

【パーマリンクの設定】

まずは、とても重要なパーマリンクの設定を行います。

パーマリンクとは、記事URLの一番後ろに表示されるディレクトリ名になり、あとから変更するとアクセス数が激減することもあります。
その為、初期の段階でしっかりと設計を行っておくことが重要です。

パーマリンクの設定は、管理画面の「設定」→「パーマリンク」から行います。
一般的には、「カスタム構造」を選択して「%postname%」を設定される方が多いです。
パーマリンクの設定
「%postname%」にすることで、記事毎に自由にパーマリンクを設定することができます。

 

ただ、記事毎に設定するのが面倒という方は「%post_id%」をにするのもおすすめです。

「%post_id%」にすること、記事投稿時に自動で「記事ID(数字)」を設定されるので、楽です。

【記事の新規追加】

それでは、実際に記事を一つ投稿してみましょう。

記事の投稿は管理画面の「記事」→「新規追加」から行います。

このような画面が開くので、「タイトル」「記事本文」「パーマリンク」を入力します。
※パーマリンクは日本語のままでもOKですが、できれば英語の文字列に変更しましょう。
記事の投稿

次に、「アイキャッチ画像」「SEOタイトル」「メタディスクリプション」も入力します。
記事の投稿

「SEOタイトル」はタイトルタグに設定されて、Googleの検索結果に表示されます。
記事タイトルと同じでもよければ入力しなくてもOKです。

ただ、メタディスクリプションは記事の説明文として検索結果に表示されるので、しっかりと入力しておきましょう。
この説明文次第では、ユーザーのクリック率に大きく影響します。


入力が完了したら画面右側にある「公開」をクリックして、記事を公開します。

 

これで新規記事の公開が完了です。
ユーザー側の公開画面をチェックしてこのように表示されていればOKです!
記事の投稿

【カテゴリーの設定】

次は、カテゴリーの設定についてです。

カテゴリーは適当に設定するのではなく、事前にしっかりと決めておきましょう。

後から適当に追加していくとまとまりのないサイトにもなりかねないので気を付けてください。

カテゴリーの設定は、管理画面の「記事」→「カテゴリー」から行います。

設定画面に移動すると、デフォルトで「Uncategorized(未分類)」というカテゴリーが追加されています。
このままユーザー側に公開されるのも良くないので、名称を変更しておきましょう。
カテゴリーの設定

カテゴリーの設定

次に、必要に応じてカテゴリーを新規に追加していきます。
新しいカテゴリーの追加は、設定画面の左側から行います。
カテゴリーの新規追加

このような感じで、必要なカテゴリーを追加していきます。
カテゴリーの新規追加

【ウィジェットの設定】

ウィジェットの設定画面から、ユーザー公開画面のサイドカラムの設定も行っておきましょう。

「外観」→「ウィジェット」の画面から設定を行います。

画面右側に「サイドバー」という項目があるので、左側にあるウィジェットを選択して、その中にマウスでドラッグして移動するだけです。
ウィジェットの設定

サイドカラムに何を表示させるかは人それぞれなので、必要だと思うものを追加してください。
今回は、試しに「人気記事」というウィジェットを追加してみます。
ウィジェットの設定
これだけでユーザー公開画面のサイドカラムに「人気記事」が追加されます。

同様にして、他のウィジェットもいくつか追加してみます。
ウィジェットの設定

ウィジェットの追加が完了したら、実際にユーザー公開画面のサイドカラムをチェックしてみます。
このようにウィジェットの設定画面から追加したメニューが表示されていればOKです。
ウィジェットの設定

【サイトのタイトル・説明文の設定】

管理画面の「設定」→「一般」から設定します。
サイトの設定画面
「サイトのタイトル」と「キャッチフレーズ」という項目があるので、この2項目は必ず設定しておきましょう。
サイト全体のタイトルやキャッチコピーなどに利用されます。

設定が完了すると、ユーザー側の画面にはこのように表示されます。
サイトタイトルとキャッチコピーの表示

ヘッダー画像の設定

最後に、ヘッダー画像の設定について説明します。

ヘッダー画像は、管理画面の「Cocoon 設定」→「ヘッダー」タブから行います。
画面の中に「ヘッダー背景画像」という項目があるので、そこの項目からヘッダー画像に使用したい写真をアップロードします。
ヘッダー画像の設定

ヘッダー画像の設定

ヘッダー画像をアップロードしたら、その下に表示されている「ヘッダー背景画像の固定」にチェックを入れます。
ヘッダー画像の設定

これでヘッダー画像の設定は完了です。
この後は、実際にユーザー側の表示をチェックしてみます。

このように表示されていればOKです。
ヘッダー画像の設定

ただ、これだとヘッダー部分が狭いと思われる方もいます。

その場合には、同じ画面の中にある「高さ」という項目にヘッダー部分の高さを入力します。
ヘッダー画像の設定
試しに「400」を設定してみます。

このようにヘッダーの高さが変わっていればOKです。
ヘッダー画像の設定

Cocoon(コクーン)のインストール・サイト公開についてのまとめ

こちらの記事では、人気の無料テーマ「Cocoon(コクーン)」を使ったサイト(ブログ)の公開設定について紹介しました。

インストールから公開方法まで詳しく説明しています。
Cocoonの利用を考えられている方は、こちらの記事を参考にして頂ければ幸いです。

Cocoonは無料のWordPressテーマですが、高機能で人気なので利用者も非常に多いです。

その為、デザインが他者と被りやすいというデメリットもありますが、その辺はメイン写真を工夫したり、色味を変えることでオリジナリティを出すことも可能です。

 

ぜひ、Cocoonを使ったサイト公開に一度挑戦してみて下さい!

Cocoonに関するよくある質問

Cocoonとは何ですか?

無料で利用できるWordPressテーマです。

Cocoonは本当に無料で利用できますか?

はい。誰でも無料で利用することができす。

Cocoonの開発・運用を行っているのは誰ですか?

Cocoonは、元々は「わいひら氏」により開発が行われていました。現在は、エックスサーバー株式会社と業務提携を行われ開発事業を譲渡されたため、エックスサーバー株式会社が開発・運用を行っています。

Cocoonはどこからダウンロードできますか?

公式サイトからダウンロードできます。
https://wp-cocoon.com/

この記事を書いた人
userimg
ダッチ
    当サイトは丹波のホームページ屋さんの代表「ダッチ」が運営しています。

    プログラミング・WEB制作歴15年以上になります。

    ブログ・WordPress・レンタルサーバーに関して分からないことがあればご質問ください!
    ご質問・ご相談は無料で受け付けています。

    https://dacchi.hp.peraichi.com/

    WEB制作に関するお仕事の依頼は、こちらのホームページからお願いします。

    丹波のホームページ屋さん

    Twitterでフォローしよう

    おすすめの記事