今回は【完全無料のブログ講座】4回めとなります。
今回は、そのワードプレスにテーマ「Cocoon(コクーン)」と言うものを入れて、見栄えをよくしていきます。
WordPressテーマとは何?
少し前置きになりますが、テーマを入れる前にWordPressテーマとはどんなものか、先に簡単に触れておきますね。
WordPressテーマとは、ブログの外観(デザイン)を決めるためのテンプレートです。
WordPressテーマのことを『テンプレート』と呼ぶこともあります。
まずは、現在どのようになっているのか、確認してみましょう!
ワードプレスをインストールした直後の現状の確認
現時点で有効化(適用)されているテーマを見て見ましょう。
ワードプレスにログインして、ダッシュボードの左メニューの「外観」「テーマ」でをクリック。

すでにWordPressにはWordPressテーマがいくつか用意されています。(ワードプレスを入れるタイミングで入っているものが変わります)

これらのテーマがあらかじめWordPressにインストールされているので、別途追加することなくWordPressを使うことができるのです。
が、より高機能で使い勝手のよいWordPressテーマに入れ替えることによって、ブログを整えることができ、記事が読みやすくなります。
テーマは有料で販売されているものと、無料で提供されているものがあります。
WordPressテーマには、『親テーマ』と『子テーマ』という2つのテーマがある場合と
『親テーマ』の1つだけのテーマの場合があります。
なぜ、テーマで親と子がわかれているかと言うと、アップデートがあるからです。
テーマはその時その時で、こまめにアップデートが繰り返されています。(中にはアップデートがされないものもありますが、そういったテーマは避けましょう。
※アップデートをすることで、ユーザーからの要望を取り入れたり不具合を解消しています。
アップデートがあると、新しいテーマを入れ直すことになります。
その時、親テーマのみの場合は、あなたがカスタマイズや設定した中身がリセット(初期の状態)されてしまいます。
それを防ぐために、親テーマはアップデート専用、子テーマでカスタマイズや設定をしておけば、親テーマをアップデートしても、子テーマのカスタマイズや設定情報はリセットされません。
図で表すと、このようになります。

最初のうちはわかりずらいと思いますが、とりあえず、
「親テーマと子テーマのあるテーマは、両方をインストールする。有効化するのは子テーマ。」
「親テーマ」の1つだけで「子テーマ」がないテーマは、親テーマだけをインストールし、そのテーマを有効化する。」
と覚えておけば大丈夫です。
WordPressテーマ『Cocoon(コクーン)』をお勧めする理由
今回、『Cocoon(コクーン)』をおすすめる理由としては、
- SEO(検索エンジンへの最適化)対策済み。
- デザインがいろいろ選べる。
- 公式サイトで質問ができる。個人ブログで多数使われてるので、ネットで使い方、やりたいことなどが探しやすい。
- レスポンシブ対応(パソコン、タブレット、スマートフォンなどに対応)。
- 無料テーマなのに、有料テーマ並み(有料テーマ以上)に機能が豊富。
など、無料テーマなのに有料テーマ並み、どこか有料テーマにはない機能も付いていて、とても便利で使いやすいです。
Cocoon(コクーン)のダウンロードとインストール
cocoonをインストールする流れは以下のとおりです。
- 『親テーマ』のダウンロード
- 『子テーマ』のダウンロード
- 『親テーマ』のインストール
- 『子テーマ』のインストール
それでは順番に説明します。
1.Cocoonの親テーマをダウンロードする
まずは、Cocoon公式サイトのダウンロードサイトにアクセスします。
↓
https://wp-cocoon.com/downloads/
Cocoonのダウンロードサイトが表示されます。

ダウンロードページを「親テーマのダウンロード」のところまで下方向にスクロールしていきます。
【”Cocoonテーマ”をダウンロード】をクリックします。

親テーマを適当なフォルダに保存します。

2.Cocoonの子テーマをダウンロードする
次に、子テーマをダウンロードします。
先ほどのダウンロードサイトの画面の下にある、【”Cocoon子テーマをダウンロード】をクリックします。

子テーマを適当なフォルダに保存します。

次に、ダウンロードしたZIPファイルを使ってワードプレスにインストールしていきます。
親テーマからインストールします。
3.Cocoonの親テーマをインストールする
WordPressで先ほどダウンロードした親テーマをインストールします。
WordPress管理画面にログインし、左メニューの【外観】⇒【テーマ】をクリックします。

画面上部にある【新規追加】をクリックします。

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

②【ファイルを選択】をクリック

③ 先ほどダウンロードした親テーマ”cocoon-master-〇.〇.〇.zip”を選択

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

⑤【有効化】をクリック

Cocoonが有効化されました。

4.Cocoonの子テーマをインストールする
つぎに子テーマをインストールします。
操作は、親テーマと同じです。(フォルダは解凍しないでね。)
WordPress管理画面にログインしていない場合はログインし、左メニューの【外観】⇒【テーマ】をクリックします。
画面上部にある【新規追加】をクリックします。

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

②【ファイルを選択】をクリック

③ 先ほどダウンロードした子テーマ”cocoon-child-master-〇.〇.〇.zip”を選択

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

⑤【有効化】をクリック

『Cocoon Child』が有効化されました。

これで、ワードプレスにCocoonがインストールされました!
お疲れ様でした。
今回は【完全無料のブログ講座】4回め
「無料テーマcocoonを入れる方法(無料サーバー使用)」でした。
【完全無料のブログ講座】5回め
おわりに
今回は、WordPressテーマ『Cocoon』のインストール方法を説明しました。
インストールの流れのまとめ
インストールの流れをまとめると
- 『親テーマ』のダウンロード
- 『子テーマ』のダウンロード
- 『親テーマ』のインストール
- 『子テーマ』のインストール
ここでは、『Cocoon』をインストールしましたが、基本的には、Cocoon以外のWordPressテーマのインストール方法も同じです。
WordPressテーマによっては子テーマがない場合もあります。
その際は、親テーマのみのインストールで問題ありません。
Cocoonの魅力をあえてお伝えしたい!
「Cocoon」はシンプルなデザインで好感が持てるイメージのデザインです。
そんなCocoonの魅力を簡単に解説しますね!
●カスタマイザー設定を使う必要がない
「Cocoon設定」という専用の設定項目があるため、1つの画面で主要な設定が済んでしまうので劇的に楽することが可能です。
●標準装備の機能が充実しているため、プラグインを減らせる
目次設定でおなじみの「Table of contents Plus」すら不要です。
その他にも「最新記事」や「人気記事」の表示も標準装備されています。
●超高速!!
「Cocoon」はテーマ側で高速化できるようになっています。
サイト高速化でブラウザキャッシュの有効化にチェックを入れることで可能です。
●ワンクリックでAMP対応!!
投稿ページをモバイル上で高速表示させるための仕組みがAMPなのですが、有効化のチェックを入れるだけで高速表示が可能になります。
●豊富なショートコードで記事作成が超簡単!!
通常はAddquicktagにあらかじめコードを入れておく形になりますが「Cocoon」はビジュアルエディター上である程度の記事の装飾が簡単にできてしまいます。
吹き出しやボタン、ボックスなど、記事の装飾を行う時によく使うものが手軽に使えるので超便利です。
●100%レスポンシブ
Cocoonのレスポンシブデザインは、PCで見てもスマホで見ても、同じページを見た場合は100%同じソースコードが出力されるます。
だから、Googleのクロールも「1ページあたり1度」で済むような作りになっています。スマホからの見た目もシンプルですが本当にきれいです。
●アドセンスの広告を記事中に手軽に入れることができ、収益化が期待できる!
「Cocoon」はショートコードで記事の中のどこでも簡単にアドセンスの広告を表示させることができます。
この「Cocoon」は、完全な初心者でも扱えるくらいユーザー目線のテーマだと思います。
もちろん有料テーマには有料テーマの良さがあるのでどっちが良いとかは一概には言えません。
が、表示速度が速かったり見た目がシンプルなことは読者目線のテーマであるとも言え、初心者の方に本当におすすめできるテーマです。