超初心者のゼロから始めるブログ作りは動画とも連動していますので、そちらもあわせて参考にしていただくと分かりやすいと思います。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
WordPressのテーマ選択
WordPressのテーマてなに?て思いますよね。自分のブログの内容が旅行だとか登山がテーマだからそれで選ぶの?というものではありません。
WordPressでのブログ作りは、すべてを自分で作り上げていくものではなく、様々なテーマというブログのひな形(スタイル)が用意されています。
その中にはWordPressの中に最初からインストールされているものや個人が作った無料のテーマや有料テーマなど様々あります。下は最初から入っているテーマです。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_2-1-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_2-1-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h18_13-1-300x213.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h18_13-1-300x213.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h26_56-300x216.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h26_56-300x216.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h33_20-300x220.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h33_20-300x220.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h38_56-300x215.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-23_15h38_56-300x215.jpg)
Cocoonインストールの事前確認
インストール前の注意点として必ずPHP7、WordPress5.3以上でご利用ください。とありますので念のため確認します。《超初心者のゼロから始めるブログ作り》の通りに進んできた人は勿論条件は満たしていますが、こういうものも、あることを覚えておいてください。
PHPはエックスサーバーのサーバーパネルから確認します。
サーバーパネルのPHP Ver切替をクリックします。
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h20_44-300x237.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h20_44-300x237.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h20_44-300x237.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h20_44-300x237.png)
ドメイン名選択画面になりますので、独自ドメイン(自分で取得したURL)の《選択する》をクリックします。
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h25_53-300x228.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h25_53-300x228.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h25_53-300x228.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h25_53-300x228.png)
PHP7.3.14(推奨)になっていれば大丈夫です。
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h29_25.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h29_25.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_16h29_25.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h29_25.png)
WordPressのバージョン確認は管理画面(ダッシュボード)の更新ボタンをクリックします。《最新バージョンのWordPressをお使いです》となっていれば大丈夫です。更新のお知らせはメールでも来ますので、確認してください。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h40_22-1-300x134.png)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_16h40_22-1-300x134.png)
テーマ Cocoonのダウンロード
Cocoonは作者(わいひらさん)のサイトからダウンロードしてください。
ダウンロードサイトにもインストール方法は、載っていますがここでは順を追って詳しく紹介していきます。
サイトに行くと下記のようなダウンロードボタンがありますので、両方ダウンロードしてください。
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_15h43_16.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_15h43_16.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_15h43_16.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_15h43_16.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_15h45_14.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_15h45_14.png)
![画像に alt 属性が指定されていません。ファイル名: 02-04-17_15h45_14.png](https://hoshino-blog.com/wp-content/uploads/2020/04/02-04-17_15h45_14.png)
ダウンロードしたファイルはどこにあるか分かりますか?
通常ですとPC/ダウンロードの中にあると思いますが、画面左側下にダウンロードファイルを開くが、あると思いますのでそれを開いてください。
cocoon-master-2.1.4.1とcocoon-child-master-1.1.1が見つかりましたか。
末尾の数字はバージョンによって違いはありますが、masterとchildの二つあればOKです。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_1-300x152.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_1-300x152.jpg)
テーマ Cocoonのインストール
ダッシュボード画面の外観/テーマをクリックします。
すでに、いくつかのテーマが入っていますが、新規追加ボタンをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_3-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_3-300x149.jpg)
次にテーマのアップロードをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_4-300x150.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_4-300x150.jpg)
次の画面でファイルの選択ボタンをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_5-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_5-300x149.jpg)
ダウンロードしたCocoonファイルを選択します、ファイルは圧縮ファイルですが解凍はしないでそのまま選択します。最初はmaster(親)をインストールします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_6-300x163.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_6-300x163.jpg)
master(親)のインストールが完了しました。
テーマのページに戻るボタンをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_9-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_9-300x149.jpg)
Cocoonの親テーマが追加されています。
次は子テーマを追加します。
新規追加をクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_10-1-300x147.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_10-1-300x147.jpg)
childを選択します。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_7-1-300x163.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_7-1-300x163.jpg)
childが選択されていますので、インストールをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_12-300x149.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_12-300x149.jpg)
childのインストールが完了しました。
テーマのページに戻るをクリックします。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_13-300x147.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_13-300x147.jpg)
CocoonのChild(子)テーマも追加されました。
Childにカーソルを持って行くと有効化というボタンが、表示されますのでクリックして有効化します。有効化するのは親ではなく子テーマですので注意してください。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_14-1-300x150.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_14-1-300x150.jpg)
有効化されるとサイドバーにもCocoon設定が追加されます。
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_15-300x148.jpg)
![](https://hoshino-blog.com/wp-content/uploads/2020/04/2020-04-17_15-300x148.jpg)
次回の超初心者のゼロから始めるブログ作り 4 ではCocoonの基本設定を行います。
当ブログはエックスサーバーとWordPressで作成しています。
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)
![](https://www16.a8.net/0.gif?a8mat=3B9SLB+AOM1KI+CO4+6D4GH)