有料テーマ「JIN：R」を使ってブログをカスタマイズする方法をわかりやすく解説
もりじゅん
もりじゅんブログ
無料テーマ「Cocoon」を使ってブログをカスタマイズする方法をわかりやすく解説！
もりじゅん
こんにちは、もりじゅんです！
この記事で解決できるお悩み
無料のWordPressテーマ「Cocoon」を使ってブログをおしゃれにカスタマイズする方法を
画像を用いてわかりやすく丁寧に解説していきます。
Contents
Cocoonとは？
Cocoonは無料でありながら
・サイトの表示スピードの高速化
・スマホでも見やすい
・SEO対策
などに最適化されていて、ブログを運営していく上で欠かせない機能を多く兼ね備えているWordPressテーマです。
デザインがとてもシンプルなため、WordPress初心者でも扱いやすいのも魅力ですね。
Cocoonを使うメリット６つ
ここでは「Cocoon」を使うメリットを解説していきます。
1つずつ解説していきます
１．初心者でも使いやすいシンプルなデザイン
Cocoonは全体的に白でデザインされたテーマで、シンプルであることが特徴です。
デザインにクセがないため、初心者の方でも見やすい記事を作れます。
・ボックス
・吹き出し
など、ブログ運営で重宝する機能も多い点も良いですね。
２．ページ表示の高速化の設定が可能
サイトの表示スピードの速さは、ブログ運営において重要です。
サイトを訪れた読者にストレスを与えないだけでなく、Googleが重要視している項目の一つでもあります。
Cocoonはプラグインを導入しなくても、高速化の設定が可能です。
記事作成に便利な機能が多いだけでなく、サイトの表示スピードの速さもCocoonの強みです。
無料のテーマでこれほどの表示スピードの速さは驚きです！
３．収益化に必要な機能が多い
Cocoonには、ブログを収益化する上で必要な機能が多く備わっています。
特に、簡単に広告を貼れる仕組みに注目です。
例を上げると、クリック型報酬の「Googleアドセンス」では、コードを貼り付けるだけで記事にアドセンス広告を付けられます。
詳しいことは、下記のリンクから「広告（AdSense）を手っ取り早く設定する方法」を参考にしてください。
また、楽天やAmazonの商品リンクの作成も簡単にできます。
有料テーマでもデフォルトでこの機能を備えているものはほとんどない中で、無料テーマで備えているのは驚きですね。
これだけでなく、読者の目に留まりやすくアフィリエイトでは欠かせない「ボタン」リンクや、記事の装飾をする際に重宝する「吹き出し」などの機能も備えています。
以上のように、ブログを収益化していく上で必要な機能を多く備えているのがCocoonなのです。
４．カスタマイズが簡単
Cocoonには「スキン」という機能があります。
スキンとは？
色やレイアウトのパターンがテンプレート化されていることで、選択するだけで一瞬にして反映できる機能です。
例えば、初期は白を基調としたデザインでしたが、黒や青を基調としたデザインに変更することでサイトの雰囲気をガラッと変えることができます。
スキンは100種類以上あるので、自分のサイトに合うデザインが見つかると思います！
サイトのカスタマイズが苦手な方でも、簡単におしゃれなサイトを作れるのは良いですね！
５．PCとスマホ関係なく見やすいサイトが作れる
Cocoonはレスポンシブ対応をしているため、パソコンで見られる画面とスマートフォンで見られる画面が一致するように作られています。
これによって、パソコンとスマートフォン関係なく見やすいサイトを作成できます。
以前はパソコンで見るユーザーが主流でしたが、現在は8割近くのユーザーがスマートフォンから見ているため、どちらにも対応できるこの機能は重要ですね。
６．これだけ機能がありながら無料で使える
ここまで多くの魅力をお伝えしてきましたが、これだけの機能が備わっているにも関わらず無料で使用できます。
有料テーマに匹敵するほど機能が揃っているため、ブログ中級者の方でもCocoonを使い続けている方も多いです。
ブログを始めたが有料テーマを買うのは躊躇っている方や、費用をかけたくない方には最適なWordPressテーマです。
Cocoonはどんな人におすすめ？
ここでは、Cocoonはどんな人におすすめかを解説していきます。
Cocoonをおすすめしたい人
1つずつ解説していきます。
ブログを始めたばかりの初心者
ブログを始めたばかりの初心者の方にCocoonはおすすめです。
有料テーマの値段は1万円以上します。
ブログを始めたてで継続していけるかわからない段階で買うのは勇気が必要ですよね。
しかし、Cocoonは無料なので仮にブログを継続できずに辞めてしまったとしても、金銭的なダメージはゼロです。
多くの機能も備わっているため、ブログ初心者の方でも安心して使えます。
今後有料テーマを購入するか悩んでいる方も、とりあえず今はCocoonにしておけば間違いありません。
ブログに費用をかけたくない人
Cocoonは「本気でサイトを運営したいけど、費用をかけたくない」という方にもおすすめです。
有料テーマ級の機能性、100種類以上のスキンを使ってカスタマイズすることで、本格的なサイトを作成できます。
Cocoonのインストール方法
Cocoonのインストール方法を解説していきます。
すでにインストールしている方は、読み飛ばして次の「Cocoonのデザインをカスタマイズする」を見てください。
「Cocoonの公式サイト」にアクセス
Cocoon公式サイトのトップにある「ダウンロードはこちら」をクリック
下にスクロールしていき「”Cocoonテーマ”をダウンロード」をクリックして、親テーマをダウンロードする
下にスクロールしていき「”Cocoon子テーマ”をダウンロード」をクリックして、子テーマをダウンロードする
WordPressにログイン
WordPress左メニューの「外観のアイコン」をクリックし「テーマ」をクリック
「新しいテーマを追加」をクリック
「テーマのアップロード」をクリック
「ファイルを選択」をクリック
先ほどダウンロードした「Cocoon親テーマ」をアップロードする
親テーマは「cocoon-master.zip」と書かれたファイルのことです。
「今すぐインストール」をクリック
「有効化」をクリック
再度テーマのページから「新しいテーマを追加」をクリック
「テーマのアップロード」をクリック
「ファイル選択」をクリック
今回は「Cocoon子テーマ」をアップロードする
子テーマは「cocoon-child-master.zip」と書かれたファイルです。
「今すぐインストール」をクリック
「有効化」をクリック
以上でCocoonのテーマのインストールは完了です。
Cocoonに限らず、他のテーマを使用する時も子テーマを利用することをおすすめします。
Cocoonのデザインをカスタマイズする
ここからは、Cocoonのデザインをカスタマイズする方法を解説していきます。
スキンの設定
スキンの設定方法を解説していきます。
WordPressにログイン
WordPress左メニューの「Cocoon設定」をクリックし「スキン」をクリック
下にスクロールすると、下の画像のようにスキン一覧が表示されます。
下の画像のように写真マークにカーソルを合わせると、デザインのサンプルを見ることができます。
気に入ったスキンを選択する
下までスクロールして「変更して保存」をクリック
自分のサイトを表示して適用されているか確認してみる
以上でスキンの設定は完了です。
ヘッダー画像を入れる
お気に入りのスキンを設定できたら、次はヘッダー画像を設定します。
ヘッダー画像を設定することで、自分のサイトを一気にオシャレにすることができます。
ここから、ヘッダー画像を設定する方法を解説していきます。
「ODAN」にアクセス
検索ワードを入力
試しに「春 緑」と検索してみました。
気に入った画像を選択
画面の右側にある「V」をクリック
画像のサイズは「中間」を選択
最適なサイズはテーマによって異なりますが、Cocoonの場合は中間の「1920×1280」が良いでしょう。
サイズを決めると、自動的にダウンロードが開始されます。
ダウンロードができたら、画像をヘッダーに反映する方法を解説していきます。
WordPressにログイン
WordPress左メニューの「Cocoon設定」をクリックし「ヘッダー」をクリック
「ヘッダー背景画像」の「選択」をクリック
「ファイルを選択」をクリック
「メディアライブラリ」→「ヘッダーにする画像」→「画像の選択」の順番でクリック
すると、下の画像のような画面になると思います。
下にスクロールしていき「変更をまとめて保存」をクリック
自分のサイトを表示してヘッダー画像が反映されているか確認
以上でヘッダー画像の設定は完了です。
ここから、ヘッダー画像の調整方法を解説していきます。
WordPressにログイン
WordPress左メニューの「Cocoon設定」をクリックし「ヘッダー」をクリック
ヘッダー画像の高さを調整したい場合は、「高さ」に数字を入力する
下の画像のように、試しに「400」と入力してみました。
サイトを表示して高さを確認
先ほどと比較してみると、画像の範囲が多くなりましたね。
このようにして、好みの高さに調節してみてください。
他の項目も調整する
スマホで見る読者のためにも、「高さ（モバイル）」にも数字を入力して調整することをおすすめします。
サイトのキャッチフレーズを消したい場合は「キャッチフレーズの配置」で「表示しない」を選択することで消すことができます。
ヘッダー画像はサイトを訪れた読者が一番最初に目に留まるものでもあります。
そのため、デザインにもこだわっていきましょう。
具体的には「Canva」を使ってヘッダー画像に文字を入れたりして、オリジナルの画像を作ると良いですね。
「オシャレな画像を作るのは苦手…」という方は、クラウドワークスやランサーズ、ココナラなどのサービスを使うのもおすすめです。
プロの方にお金を払ってサクッと作ってもらいましょう。
グローバルメニューを作る
続いて、グローバルメニューを作成していきます。
グローバルメニュー用のカテゴリーを作成していないという方のために、カテゴリーの作成方法から解説していきます。
WordPressにログイン
WordPress左メニューから「投稿アイコン」をクリックし「カテゴリー」をクリック
「カテゴリー名」を入力し「新規カテゴリーを追加」をクリック
カテゴリー名は後から変更できるため、とりあえず適当に決めちゃってOKです！
WordPress左メニューから「外観アイコン」をクリックし「メニュー」をクリック
「メニュー名」を入力し「メニューを保存」をクリックします。
画面左にある「メニュー項目を追加」からメニューに入れたいものにチェックマークを入れ「メニューに追加」をクリック
メニューの項目は、
・固定ページ
・投稿
・カスタムリンク
・カテゴリー
から追加することができます。
カスタムリンクを使えば、 好きなページとリンク文字列を、個別で指定できます
メニュー項目は下の画像のように、ドラッグ移動で順番の変更が可能です。
（一番上がメニューの左側に、一番下がメニューの右側になります）
順番を決めたら「ヘッダーメニュー」にチェックを入れて「メニューの保存」をクリック
自分のサイトを表示して確認
メニューは下の画像のように少し右側にずらしてメニューを保存することで
下の画像のように階層構造のメニューを作成することもできます。
ピックアップコンテンツを作る
続いては「ピックアップコンテンツ」を作成していきます。
ピックアップコンテンツは、デザインやバランスを考えると４つがおすすめです。
事前にどのようなコンテンツにするか考えておきましょう
ここから、ピックアップコンテンツの作成方法を解説していきます。
WordPressにログイン
WordPress左メニューから「外観のアイコン」をクリックし「メニュー」をクリック
「新しいメニューを作成しましょう」をクリック
「メニュー名」を入力し「メニューを保存」をクリック
今回は「ピックアップコンテンツ」という名前にしました。
ピックアップコンテンツに追加したい項目にチェックマークを入れ「メニューに追加」をクリック
選択したメニューが反映されたら、好きな順番に並び替えて「メニューの保存」をクリック
WordPress左メニューの「Cocoon設定」をクリック後「おすすめカード」をクリック
「おすすめカードの表示」部分で全ページで表示を選択
「メニュー選択」で「ピックアップコンテンツ」を選択し、他は自由に設定してOK
最後に「変更をまとめて保存」をクリックして完了です。
自分のサイトを表示して確認する
まとめ
今回の記事では「Cocoon」の魅力から、どんな人におすすめか、インストール方法からデザインのカスタマイズまで、幅広く解説していきました。
この記事をしっかり見ていただけたら、簡単にサイトを作ることができると思います！
WordPressブログの始め方の記事に戻る方はこちらから戻れます
あわせて読みたい
【初心者でもできる】WordPressブログの始め方を徹底解説！
ABOUT ME
