ブログ初心者向け

【cocoonの使い方と設定方法】WordPressでブログサイトを作ったらまずこれをカスタマイズしよう!![初心者向け]

こんにちはふーまです!

今日は僕も使っていた無料テーマ【cocoon】の使い方と設定方法を分かりやすく説明していきます!

この記事を見ると

  • 初心者でも簡単に自分のブログをカスタマイズできるようになる!
  • 【cocoon】の大まかな設定方法がわかる!
  • おしゃれなサイトに自分好みに変えられる!

それでは早速いってみましょう!!

WordPress無料テーマ【cocoon】とは

【cocoon】とはWordPressの無料テーマで

有料テーマ並みの機能やデザイン性があり、無料テーマの中で圧倒的に使われている人気テーマです!

初心者の人でもとても扱いやすいので、ブログ始めたての人にはとてもおすすめできるテーマとなっています!!

【cocoon】の注意点

初めに、cocoonには親テーマ子テーマという物があって

皆さんが使うのは 「cocoon child(子テーマ)です!

ですが親テーマ・子テーマどちらもダウンロード・インストールします!

理由は親テーマでも中身のカスタマイズができるんですが、cocoonのアップデートが来たときに親テーマをいじってしまうと、今までカスタマイズしたサイトの中身がアップデートをきっかけに不具合を起こしてしまう可能性があります!

その点、子テーマだとそれがないので サイトのカスタマイズは子テーマで行ってください!

簡単に言うと

親テーマ→アップデート用
子テーマ→カスタマイズ用

と覚えておくと良いでしょう!

【cocoon】のダウンロード方法

(もうすでに【cocoon】を持ってる方は飛ばしてください!)

https://wp-cocoon.com/downloads/

こちらのページから飛んでもらって

まず【cocoon】(親テーマ)をダウンロードしてください!

その後に【cocoon child】(子テーマ)も同じようにダウンロードしてください!

WordPressの管理画面に移って

「外観」「テーマ」を開き

「新規追加」「テーマアップロード」を選択

「ファイルを選択」を押し、先ほどダウンロードした「親テーマ」「子テーマ」の順にアップロード。

インストール後、外観からテーマを開くと

cocoonの親テーマと子テーマがインストールされてると思うので

cocoon child(青い方)を選択して有効化を押します!

サイトを更新するとWordPressの左側、ダッシュボードに「cocoon設定」の欄が出てくるのでここからサイトをカスタマイズすることが可能になります!

サイトのカスタマイズをしよう!

ここからはサイトの大まかなカスタマイズをしていきましょう!

スキンの変え方

まずはサイトの全体的なスキンを変えましょう!

スキンを変えるとサイトカスタマイズの半分は終わったような物です!

まずcocoon child(子テーマ)が有効化になってるのを確認して

WordPress左側、ダッシュボードの「cocoon設定」から「スキン」を選択します

すると「スキン一覧」が出てきます!

写真マークを押すとイメージが出てくるので

自分のイメージカラーや、サイトの見やすさなんかを自分で選んでみましょう!(写真横の青文字をタップすると大きな画面に移れます)

自分好みのスキンが決まったら、そのスキンの左側の丸にチェックをつけ

下の「表示スキン」「全てのスキン表示」にチェックを入れます!

忘れずに「変更をまとめて保存」を押します!

これで自分のページを開くと、さっきよりおしゃれに見やすくなってると思います!

ヘッダー画像の変え方

次にヘッダー画像を変えましょう

先ほど同様、「cocoon設定」「ヘッダー」を選んで

「ヘッダーロゴ」を「選択」

自分のヘッダーにしたい写真を、写真フォルダーから選びアップロード!

ヘッダーやロゴを作るのが苦手な人は最近CMでやってるココナラ

お金あまりかけたくない人は無料の「CANVA」なんかをおすすめします!

ヘッダー背景画像の変え方

次に「ヘッダー背景画像」を変えましょう!

先ほど同様、「選択」を押して写真フォルダーから画像をアップロードしましょう!!

僕は自分で撮った川の写真を使ってますが、そのような写真がない場合は

フリー画像サイトの【O-DAN】オーダンをおすすめします!

ヘッダーロゴヘッダー背景が決まったら

一度自分のブログサイトを見てみましょう!

さっきよりブログサイト感が出てきたと思います!

最後に「サイドバー」の設定をしましょう!

サイドバーの設定

サイドバーとは僕のサイトの右側にあるプロフィールや最近のブログ記事が載っている場所です!

僕がおすめするサイドバーに入れた方がいいと思うものは

  • プロフィール
  • 検索
  • カテゴリー
  • 人気記事

です!

まずダッシュボードの外観から「ウィジェット」を選択

画面右側のサイドバーの項目から「検索」はそのままで

「最近の投稿」と「最近のコメント」を削除してください!

残しておきたい場合はそのままでも構いません!

次にその下にある「サイドバースクロール追従」を開いて

「カテゴリー」はそのままで、残りの「アーカイブ」と「メタ情報」は要らないので消してください!

次にプロフィールです!

左の「利用できるウィジェット」から「プロフィール」を開き「サイドバー」にチェックを入れて「ウィジェットを追加」を押します!

プロフィールが移動できたらその下の「人気記事」もサイドバーに追加してください!

2つとも追加したら「サイドバー追従」

残った「カテゴリー」を選択して、長押ししたまま動かすと上「サイドバー項目」まで移動できるので、サイドバーの中にカテゴリーを入れます!

後はカテゴリーの中の順番を、選択&ドラッグで変えられるので、好きな順番に変えてください!

僕はちなみに上から

  1. 検索
  2. プロフィール
  3. カテゴリー
  4. 人気記事

の順番です!

最後にプロフィール変更

プロフィールの変更の仕方は

プロフィール横の三角ボタン押して

「あなたのプロフィール」を選択

すると「プロフィール情報」「プロフィール写真」の設定画面が出てくるので

設定したらサイドバーに反映されます!

まとめ

ここまできたら少しサイトっぽくなってきたんじゃないでしょうか?

今後またブログにアップするので、その際はまた見てくださいね!

何か分からないことがあれば僕のTwitterにDMください!!

最後まで読んでくださりありがとうございました!!

ABOUT ME
ふーま
ふーま
ふーまといいます! ブログ?アフィリエイト?という方や ブログ初心者には向けた記事を書いています!北海道に住んでいて将来はブログで生計を立てたい25歳です!分からないことがあればTwitterから気軽に聞いてください