【初心者にもわかる】WordPressの無料テーマ「Cocoon」のインストール方法について、わかりやすく解説!

こんにちは、やまかず(@yamakazu001)です。

「Cocoon」というWordPressの無料テーマについてです。無料テーマを選ぶのであれば、Cocoon一択でしょう。

30代会社員/木村さん
無料テーマだと、おすすめなものは何かな!?

やまむら
それなら、「Cocoon」がおすすめだよ!
WordPressブログ構築のこれまでの流れ!

ムームードメインにて、ドメインを取得する作業
取得したドメインを「エックスサーバー」に設定する作業
「エックスサーバー」に「WordPress」をインストールする作業
「SSL化」する作業
パーマリンクの設定作業
タイトル・キャッチフレーズの設定作業
今日やること!
「テーマ(Cocoon)のインストール」作業をしていきます。

今回の記事では、無料テーマの「Cocoon」のインストール方法についてお伝えしていきます。ですので、「Diver」を使う予定の方や、すでに使っている方は、スルーして大丈夫です。

「Diver」を使う方はコチラをご覧ください。

 無料テーマ「Cocoon」を選択する方に向けての記事です。

WordPressの無料テーマ「Cocoon」とは

WordPressの無料テーマの中で、特におすすめなのが「Cocoon」というテーマです。「無料テーマ」って、一昔前だと、何か物足りなさを感じたりしてたんですよね。

でも、このCocoonは「無料テーマ」だけど...、他と違っていて、デザイン面もさることながら、機能面も豊富なんですよね。

「無料テーマ・有料テーマって何!?」については、こちらでご確認いただけます。

例えば、Cocoonには、下記のような魅力があります。

Cocoonの魅力を一部紹介♪
  • レスポンシブ対応
  • ランキング作成機能
  • 吹き出し機能
  • 定型文のテンプレート機能

レスポンシブ対応

レスポンシブとは、サイトの表示を、パソコンの画面だけじゃなく、スマホやタブレット画面などに合わせて、サイトの幅を見やすく調整してくれるものなんです。

少し古いテーマだと、レスポンシブ対応になっていないものもありますが、Cocoonは対応済みです。

ランキング作成機能

ランキング作成機能というのは、下記でも説明していますが、当サイトの右側にある「人気記事一覧」を表示できる機能ということです。

「ランキング作成できるプラグインとは?」ついては、こちらでご確認いただけます。

この機能は、通常プラグインを使わないと表示できませんが、Cocoonにはその機能が備わっています。

吹き出し機能

吹き出し機能というのは、下記のようなものです。

↓ ↓ ↓

30代会社員/木村さん
これが吹き出しだよ!

使うテーマによっては、プラグインを使わないと表示できません。Cocoonにはその「吹き出し」機能が備わっています。

定型文のテンプレート機能

定型文のテンプレート機能というのは、使い方によっては便利な機能です。よく使う文章って、記事を書いていくとでてくるんですよね。

よく使う文章を定型文として、保存しておいて、記事に簡単に反映させることができるんです。Cocoonにはその「テンプレート」機能も備わっています。

やまむら
無料テーマだけど、機能が良いんだよね!

Cocoonの魅力を一部ご紹介しました。また、Cocoonのデザインは、できるだけ「シンプル」を追求して作成されたのだと思います。

シンプル

余計なものを省いて、それでもって機能面も優れている感じです。僕としては、「無料テーマ」ならCocoon一択でいいのでは...と思っています。

それでも僕が「有料テーマ」のDiverを使っているには、理由があります。それも含めて、別記事でDiverとCocoonの比較について書いていく予定です。

Diverについては、下記からご覧いただけます。

\こちらからアクセス♪/

Cocoonのインストール方法

ここからは、さっそくCocoonのインストール方法について、順を追って説明していきます。

1「Cocoonのテーマ」をダウンロード

こちらをクリックして、Cocoonテーマをダウンロードを開きましょう。

Cocoonテーマのダウンロードページを開きましたら、スクロールして、「親テーマ」と「子テーマ」の両方をダウンロードしてください。

「親テーマ」と「子テーマ」とは何か!?については、こちらからご確認いただけます。

親テーマをダウンロード
「Cocoonテーマをダウンロード」をクリック

すると、自動的にファイルがダウンロードされます。

Cocoonダウンロード

 

「親テーマ」をダウンロードしたら、つぎに「子テーマ」をダウンロードしてください。

子テーマをダウンロード
「Cocoon子テーマをダウンロード」をクリック

すると、自動的にファイルがダウンロードされます。

Cocoonダウンロード

 

ダウンロードすると、下記のようなファイルがダウンロードされます。

ファイル 

つぎの項目から、インストール作業をしていきましょう。

2 WordPress管理画面を開く

WordPress管理画面にログイン後の状態から、作業をしていきます。もしログイン方法がわからない場合は、「WordPress管理画面のログイン方法」よりご確認ください。

ログインしましたら、左メニューから、下記の通り操作をしてください。

「外観」にカーソルを合わせる
「テーマ」をクリック

テーマをクリック

3 Cocoonの「親テーマ」をインストール

まず、Cocoonの「親テーマ」をインストールしていきましょう。

新規追加をクリック

上部の「新規追加」をクリックしてください。

新規追加をクリック

 

テーマのアップロードをクリック

画面が変わりましたら、「テーマのアップロード」をクリックしてください。

手順インストール手順

ファイルを選択して、アップロード

アップロードするファイルを選択していきます。「ファイルを選択」をクリックしてください。

diver_install02-0

 

Cocoon「親テーマ」フォルダと「子テーマ」フォルダ の解説!
Cocoonには、下記のようにインストールすべきフォルダが2つ存在します。
「cocoon-master-...」フォルダ・・・『親テーマ』
「cocoon-child-master-...」フォルダ・・・『子テーマ』
となります。
cocoon親テーマと子テーマ

 

はじめに『親テーマ』をインストールしていきます。cocoon-master-...」フォルダを選択しましょう。

「cocoon-master-...」フォルダをクリック後
②下部の「開く」をクリックしてください
(※もしくは、「cocoon-master-...」フォルダをダブルクリックでもOK)

親テーマを選択

 

インストールをしましょう

下記のように画面上に表示されましたら、下記手順で、インストールしていきましょう。

「cocoon-master-...」が表示されていることを確認してください
「今すぐインストール」をクリックしてください

今すぐインストールをクリック

 

インストール完了

すると、画面が切り替わりまして、下記のようにインストールが完了となります。

「テーマのインストールが完了しました。」という表示がでていれば、OKです
「テーマのページに戻る」をクリックしてください

インストールが完了

つぎの項目からは、『子テーマ』をインストールしていく作業をしていきます。

 

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

親テーマのインストールが完了しましたら、同じ要領で「子テーマ」をインストールしていきます。

新規追加をクリック

上部の「新規追加」をクリックしてください。

新規追加をクリック

 

テーマのアップロードをクリック

画面が切り替わりましたら、「テーマのアップロード」をクリックしてください。

手順インストール手順

 

ファイルを選択して、アップロード

アップロードするファイルを選択していきましょう。「ファイルを選択」をクリックしてください。

diver_install02-0

 

ここでは、『子テーマ』をインストールしていきます。「cocoon-child-master-...」フォルダを選択しましょう。

「cocoon-child-master-...」フォルダをクリック後
②下部の「開く」をクリックしてください
(※もしくは、「cocoon-child-master-...」フォルダをダブルクリックでもOK)

子テーマを選択

 

インストールをしましょう

下記画面のように、選択したファイルが表示されましたら、下記手順で、インストールしていきましょう。

「cocoon-child-master-...」が表示されていることを確認してください
「今すぐインストール」をクリックしてください

今すぐインストールをクリック

 

インストール完了

すると、画面が切り替わります。下記のようにインストールが完了となります。

「テーマのインストールが完了しました。」という表示がでていれば、OKです
「テーマのページに戻る」をクリックしてください

インストールが完了

 

5「cocoon-child-master-...」の「子テーマ」を有効化

上記の続きの作業となります。現在、「親テーマ」と「子テーマ」の両方とも、インストールが完了している状態だと思います。

チェックポイント
「親テーマ」と「子テーマ」両方とも、インストールされているかご確認ください。

注意点をお伝えします!
ここでは、「親テーマ」と「子テーマ」両方とも、インストールされている状態ですが、『有効化』にするのは、「子テーマ」だけです。

どうして「子テーマ」を『有効化』にするのか?については、こちらからご確認いただけます。

親テーマと子テーマ  

 

「子テーマ」を有効化

「子テーマ」のみ、有効化にしていく作業をしていきます。

「子テーマ」の上部にカーソルを合わせる
「cocoon-child-master-...」の表示を確認
「有効化」をクリック

この順番で、有効化にしてください。

子テーマを有効化

 

「有効化」の設定完了

「有効化」の設定が完了となりました。下記のように「有効」の表示がでていれば、大丈夫です。

有効を確認

Cocoonのテーマが反映されているかチェック

Cocoonをインストールして、有効化の設定が完了したと思います。念の為、テーマがどう変わったのか、チェックしていきましょう。

①左上の「ブログタイトル」部分にカーソルを合わせる
「サイトを表示」部分が現れたら、クリック

サイト表示操作

 

下記のように、テーマの反映を確認できました。このようになっていれば、大丈夫です。

cocoonテーマデザイン

30代会社員/木村さん
これがCocconだね!シンプルなデザインが良いね!

まだ、インストールしたての状態ですが、シンプルで見やすいデザインだと思います。記事を書いたり、細かな設定をしていくことで、よりよいものになっていくでしょう。

まとめ

Cocoonという無料テーマのインストール方法、そして有効化の設定方法について、お伝えしてきました。Diverと同じですが、有効化する時に「子テーマ」を必ず選択するように、ご注意ください。

あの人のようなブログが「迷わず作れる教科書」をプレゼント

WordPressでブログを作ってみたい…でも、難しそうだし、どうやるかわからない。一度作ってみたけど失敗してしまった。なぜか『あの人のようなブログにならない…』。

そんなあなたでも、スムーズにブログが作れるようになる
『あの人のようなブログが「迷わず作れる教科書」』
を期間限定特典としてプレゼントしています。

さらに・・・
今回プレゼントを受け取った方には、「ブログを使ってお金を稼ぐ方法」も教えています。

期間限定でお渡しておりますので、ぜひこの機会に手にいれてください。
※特典を手に入れられた方は、メルマガへ登録されます。

.

Twitterでフォローしよう

おすすめの記事