Cocoon使い方ガイドマップ|超初心者がブログ収入を得るまで

Cocoon使い方 Cocoon

本記事はWordPressテーマCocoonのガイドマップとして、WordPressブログを開設したばかりの人が

  • Cocoonのダウンロードから初期設定を終えて
  • 記事を書き始めて
  • お問い合わせなど必要なページを取りそろえて
  • デザインを整えて
  • アフィリエイトで収益化ができる

ところまでを体系的に作っていけるようにまとめた記事です。目指したのは「Cocoonの参考書」マニュアル本です。

そのため、すべてのページをきちんとやり終えるまでには少なくとも1ヶ月はかかるでしょう。のんびりやれば半年以上かかる内容です。

一気にやろうとすると息切れします。あなたのペースで一息つきながら進めてください

何度もここに戻ってくると思いますので、ぜひブックマークすることをおすすめします。

また、本記事は大きな木の幹として存在しており、各種詳細の説明はそれぞれ枝葉の役割を持つ記事にリンクを張っています。

枝葉記事に行って、ひとつの項目をやり終えたらこちらに戻って次の項目へ進むようにしてください。

WordPressブログを開設したばかりの初心者さんを想定して執筆しています。よって始まりはWordPress自体の初期設定からです。

「0.WordPressの初期設定」から「2.Cocoonの初期設定」までは順番に進めていくことをおすすめします。

それ以降「3.記事を書く」から「6.収益化」までは順番はあまり関係ありません。順番にやるというよりかは、全部を並行して同時にちょっとずつ進めることをおすすめします。

目次から気になったところへいってみてください

0.WordPressの初期設定

さぁ、まずはワードプレス自体の初期設定から。一緒に設定していきますので、あなたのワードプレスの管理画面を開きましょう。

WordPressの編集画面から設定をクリックしましょう。そしたら1項目ずつ設定していきます。詳しくは下記の外部リンクを確認ください。

プラグインの導入

プラグインはワードプレスには入っていない機能を補うための追加機能です。スパム対策やセキュリティ対策など必要になりますので、入れておきましょう。

基本的にはプラグイン新規追加プラグイン検索今すぐインストール有効化の流れでインストールします。

以下の記事でおすすめプラグインをまとめています。最初は最低限入れておきたいプラグインだけで良いのでインストールしておきましょう。

1.Cocoonのダウンロードとインストール

それではCocoonのダウンロードとインストールに入ります。

Cocoonのダウンロード

下のリンクから公式のダウンロードページにいって、必ず親テーマと子テーマをダウンロードしてください

ダウンロード先はあなたのパソコンの好きなところで良いです。ブログ用のフォルダを作って保存するのがいいでしょう。

公式ページにはダウンロードボタン以外にもいろいろ本文がありますが、とりあえずはダウンロードできれば読み飛ばしてOKです。

Cocoonのインストール

次にワードプレスにCocoon親テーマと子テーマをインストールし、子テーマを有効化します。

公式にインストール方法を説明しているページがあるので、そちらを確認ください。

親テーマと子テーマの関係は子テーマが親テーマの分身みたいなものです。

親テーマを有効化してカスタマイズを行った場合、テーマ更新時にカスタマイズが吹き飛ぶ可能性があるため、必ず子テーマを有効化してください。

レンタルサーバーのConoHa WING を使用している場合、テーマ更新すると親テーマが2つになることがあります。

これは不具合のため解消しないとまずいです。下の記事で解決法が書かれていますので、参考にしてください。

Cocoonのインストールお疲れさまでした

2.Cocoonの初期設定

本項目ではCocoonの初期設定を「コンテンツを作成する以前にやるべき設定」としています。

つまり、記事投稿する前に必要な設定です。Cocoon設定にはびっくりするくらい設定できる箇所がありますが最初にやるべきことはそこまで多くないです。

  • スキン
  • タイトル
  • アクセス解析・認証
  • 高速化

最低限上の4つだけやっとけば記事を書けるところまではいけます。あとは記事を書きながら整えていけばOKです。

メニューの作成とかヘッダーフッター周りの見た目はやりたくなりますが、メニューにのせるためのページが無ければ作れませんのでとりあえず後回しです。

本項目で説明してないCocoon設定も以下の項目で必要なときに説明していきます。また、そもそも設定をいじらなくで良いところもあるため、説明しない項目もあります。

ここまで理解いただけたらWordPressの管理画面よりCocoon設定を選択してください。

ちなみにCocoonマニュアルはCocoon設定を開いたときのタブがバーッと出てるとこの上にマニュアルへのリンクがあります。

Cocoon公式マニュアルへのリンクはここ
Cocoon公式マニュアル

スキン

スキン機能は”洋服を着替える感覚でサイトの外観を変更できるように”という目的で作られたデザイン変更機能です。

これにより、カスタマイズがよくわからない人やブログデザインに飽きてしまった時も簡単にデザインを変更ができるようになりました。

Cocoon設定スキンから好きなスキンを選んで変更をまとめて保存するだけでスキンの変更が完了します。

数十種類のスキンから気に入ったものを選んでみましょう。迷ってしまいますが、後からいくらでも変更できるのでとりあえずでOKです。

私のおすすめスキンは下記記事から確認できます。

全てのスキンを見たい人は下記記事から確認ください。

スキンを使わずにブログ運営する人もいます。お気に入りが無かったらそのままでも良いと思います。

タイトル

タイトルタブでは、フロントページ(トップページ)ほか各種ページのタイトル、メタディスクリプション※、メタキーワード※の設定ができます。

グーグル等の検索エンジンで検索した結果に表示される部分ですので、記入していきましょう。

メタディスクリプション…ページの概要を説明する文章のこと。検索結果に出る。120字くらいがちょうど良い

メタキーワード…そのページがどんなキーワードと関連したページなのかを検索エンジンに伝えるためのキーワード。現在はほぼ意味がない

設定するところ
  • フロントページ設定の
    • フロントページタイトル(お好みで)
    • サイトの説明(120字くらい書きたい)
    • メタキーワード(ほぼ意味ないけど一応)
  • 投稿・ページ設定の
    • 投稿・固定ページタイトル(お好みで)
  • カテゴリー・タグページ設定の
    • ページタイトル(お好みで)
  • タイトル共通設定の
    • 簡略化したサイト名(略称がある場合)
    • セパレーター(お好みで)

上記以外はいじらなくてOK、終わったら変更をまとめて保存です

アクセス解析・認証

アクセス解析・認証タブはグーグルサーチコンソール※(通称サチコ)やグーグルアナリティクス※といった分析ツールと紐づけるための設定です。

ここを設定しておかないとうまく情報がサチコやアナリティクスに行きません。設定しておかないとデータがとれないため、最初に設定する必要があります。

Google Search Console(グーグルサーチコンソール)…グーグル公式の分析ツール。サイトの順位の確認や検索語(クエリ)を確認できる

Google Analytics(グーグルアナリティクス)…グーグル公式のアクセス解析ツール。サイトに訪問した人の数、行動、滞在時間などを確認できる

設定するところ

上記以外はいじらなくてOK、終わったら変更をまとめて保存です

グーグルサーチコンソールに登録をしたら、もう一つの検索エンジン「Bing」にもサーチコンソールと似たようなツールがあります。

それがBing Webmaster Tools です。Bingにも登録しておくとBingからもあとになって流入が見込めたり、解析ができるようになるので登録しておきましょう。
公式サイトBing Webmaster Tools

登録はサーチコンソールのデータをインポートするを選べばすぐに終わるので簡単です。

高速化

サイトスピードは速ければ速いほど良いので、設定しておきましょう。高速化設定はCocoon設定のタブではなく別項目であります。

高速化の位置
Cocoon設定の高速化

開いたらチェックできるところをすべてチェックしてください。

全ての項目をチェック☑しましょう
  • ブラウザキャッシュの有効化
  • HTMLを縮小化する
  • CSSを縮小化する
  • JavaScriptを縮小化する
  • Lazy Loadを有効にする
  • Googleフォントの非同期読み込みを有効にする
  • アイコンフォントの非同期読み込みを有効にする

最後に変更を保存です。

お疲れさまでした!これでようやく記事が書けます‼

3.記事を書く

記事を書くにはGutenbergグーテンベルクという名前の「ブロックエディター」という編集画面を使いこなす必要があります。慣れるまでちょっと大変です。

クラシックエディタという書き方もありますがサポートが近々終了するのと、Cocoonではブロックエディタの方が表現が豊かなためブロックエディタを使った方が良いです。

記事の書き方についてはしっかり書いた記事がありますので、そちらを確認しながら執筆してください。
詳細はこちら【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

上記記事でまとめています
  • 記事作成の一連の流れ
  • 具体的な記事の書き方
  • リスト(箇条書き)の使い方
  • 吹き出しの使い方
  • ブログカードの使い方
  • テーブル(表)の使い方
  • 各種ボタンの使い方
  • ショートコードの使い方
  • しっておきたい投稿画面でよく使う機能

Cocoonで使えるブロックの一覧表は下記記事で確認できます。

ブロックエディタのツールバーの使い方は下記記事で確認できます。

4.カテゴリー・タグ・固定ページの作成

サイトに必要なページを作成していきましょう。

カテゴリー・タグ

投稿カテゴリーまたはタグよりページの作成する画面へいけます。次の項目を記入しましょう。

  • 名前
  • スラッグ
  • 親子関係
  • 説明

記入ができたら新規カテゴリーを追加または新規タグを追加です。作成したカテゴリーやタグは一覧で表示されています。編集することもできます。

お問い合わせ

企業からの案件やサイトの運営者から相互リンク依頼などが来るようになります。作成方法は下記記事を確認ください。

サイトマップ(記事一覧)

サイトの全体像が分かるようにサイトマップ(記事一覧)ページを作成しましょう。作成方法は下の記事を確認ください。

プライバシーポリシー

個人情報を取り扱いますので、プライバシーポリシーの設置が必要です。詳しくは下記外部リンクを確認ください。

プロフィール

固定ページに詳しく書いたプロフィールとサイドバーや記事下に設置する短めのプロフィールがあります。

サイトバー等に設置するプロフィールは次の記事で確認ください。

固定ページでプロフィールを作成の際は固定ページ新規追加より記事を書くのと同様にあなたのプロフィールを作成していただければOKです。

5.外観・デザインを整える

あなたのブログらしさが出るところです。たくさん紹介しますが、全部やる必要はありません。あなたがやりたいと思うところをチョイスして作業を進めてください。

基本的にはCocoon設定ウィジェットメニューを使って設定していきます。中級者以上はCSSという言語を使って設定することもありますが、基本コピペだけなので難しくありません。

詳細は下の記事から確認ください。

次のリストから直接見たい項目に飛ぶこともできます。

6.収益化する

収益化するためには、基本的にはあなたのブログに広告を張ってあなたのブログ経由で商品やサービスをお客さんに買ってもらうことになります。

そのために、まずは広告を張る準備をします。

まだブログで稼ぐ仕組みがいまいちわからない、ASPって何?という方は下の記事で説明しています。確認ください。

ASPなどに登録・申請

まずは ASPなどに登録し、いろんな案件を見てよさそうなものに提携申請をしてみましょう。

ASPは調べるとめっちゃたくさんでてきますが、メインとするASPは3社~5社くらいに絞りましょう。

そうしないと管理しきれないし、収益が分散してなかなか振り込み額まで到達しないことになります。

私が主に使っているASPなどは下記になります。

名称特徴
A8.net 業界最大手、案件がとても多い、みんな登録している
もしもアフィリエイトAmazonや楽天の商品を売るならココを登録
バリューコマースYahoo!ショッピングの商品を売るならココを登録
グーグルアドセンスクリック型のアフィリエイトするならココを登録

グーグルアドセンスに申請するときに、Cocoon設定アクセス解析・認証ヘッド用コードにGoogle AdSenseの認証(審査)用コードというものを張り付けることになります。

やり方は下の公式ページを確認ください。

広告をブログに貼り付ける

ASPに登録・申請が終了したら、広告をブログに貼り付けましょう。

グーグルアドセンスの設定方法は下の記事を確認ください。

A8やもしも、バリューコマースなどASPの広告の貼り方は下の記事を確認ください。

Amazonや楽天、Yahooショッピングの商品リンクの貼り方は下の記事を確認ください。

あとがき

当ブログでCocoon記事を雑多に書き始めてからだいぶ月日が経ちました。

いつしかCocoon記事がブログの中でかなりのウェイトを占めるようになって、記事にお礼コメントなんかいただけるようになりました。

Cocoonの使い方に困っている人がまだまだいるんだなという印象を受け、いつかそんな人のためにまとまった記事を作りたいと思うようになりました。

本記事がCocoonの困ったを少しでも解消する助けになれればとても嬉しく思います。

ブログは記事を書いてなんぼです。使い方がわからなくて記事が書けないなんて悲しいですからね。

ご意見・要望等ありましたら、遠慮なくコメントください。ツイッターのDMでも構いません。リライトはいくらでもします。

最後までお読みいただきありがとうございました。

Cocoon関連記事一覧

Cocoonに関連する記事を一覧表示します。

記事の書き方

記事を書くときに使える記事です。

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
Cocoonブロック一覧!全機能まとめ【gutenberg(ブロックエディター】
【Cocoon】表を作成する方法を丁寧に解説【テーブルデザイン】
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか
【Cocoon】吹き出しの基本的な使い方/右に変更など【設定方法】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!

外観・デザイン

ブログの見た目をカスタマイズするのに使える記事です。

【Cocoon】商品リンクの貼り方を始めから丁寧に【解説】
【Cocoon】標準の楽天アフィリエイトリンクを使わないたった1つの理由
【Cocoon】使ってよかったおすすめプラグイン15選
【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【gutenberg(ブロックエディター】
【Cocoon】行間と段落の間隔を調整して記事を読みやすくする方法
【Cocoon】トップページがボタン1つでサイト型にできるようになった【カスタマイズ】
【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【設定方法】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】
【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしよう
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
PCでスマホ表示の確認ができる!超簡単な画面切り替え方法
ブログに画像を使用していい無料素材サイトを紹介します
ブログの画像はどこから選べばいいのか?おすすめのフリー画像素材サイト8選
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう
画像にモザイク加工をペイントで超楽にかける方法!簡単3分
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる
カッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしよう
カッテネの使い方を誰でもできるように画像60枚以上使って超詳しく説明します

収益化

ブログで収益化するのに使える記事です。

【Cocoon】商品リンクの貼り方を始めから丁寧に【解説】
【Cocoon】標準の楽天アフィリエイトリンクを使わないたった1つの理由
WordPressブログの始め方を0から丁寧に解説【誰でもできる!】
副業ブログの始め方を解説!あなたもやれば必ず稼げるようになる
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
アフィリエイトはやめとけ!月5万も稼げない理由をデータ分析した
ヤフーショッピングをブログでアフィリエイトしよう!商品リンクのやり方から料率まで詳しく解説します
Amazonアソシエイト:リンク動作確認でエラー!勘違いしてあせった話
カッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしよう
カッテネの使い方を誰でもできるように画像60枚以上使って超詳しく説明します

SNS

ブログと並行してSNS運用するときに使える記事です。

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】Twitter(ツイッター)ツイートの埋め込みはあなたも簡単にできます
プロフィールサイトがおしゃれに無料で作れる‼twitterやインスタに活用しよう【作り方解説】

固定ページ

固定ページを作成するのに使える記事です。

【Cocoon】サイトマップ(記事一覧)の超簡単な作り方
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する

コメント