本記事はWordPressテーマCocoonのガイドマップとして、WordPressブログを開設したばかりの人が
ところまでを体系的に作っていけるようにまとめた記事です。目指したのは「Cocoonの参考書」マニュアル本です。
そのため、すべてのページをきちんとやり終えるまでには少なくとも1ヶ月はかかるでしょう。のんびりやれば半年以上かかる内容です。
一気にやろうとすると息切れします。あなたのペースで一息つきながら進めてください
何度もここに戻ってくると思いますので、ぜひブックマークすることをおすすめします。
また、本記事は大きな木の幹として存在しており、各種詳細の説明はそれぞれ枝葉の役割を持つ記事にリンクを張っています。
枝葉記事に行って、ひとつの項目をやり終えたらこちらに戻って次の項目へ進むようにしてください。
WordPressブログを開設したばかりの初心者さんを想定して執筆しています。よって始まりはWordPress自体の初期設定からです。
「0.WordPressの初期設定」から「2.Cocoonの初期設定」までは順番に進めていくことをおすすめします。
それ以降「3.記事を書く」から「6.収益化」までは順番はあまり関係ありません。順番にやるというよりかは、全部を並行して同時にちょっとずつ進めることをおすすめします。
目次から気になったところへいってみてください
0.WordPressの初期設定
さぁ、まずはワードプレス自体の初期設定から。一緒に設定していきますので、あなたのワードプレスの管理画面を開きましょう。
WordPressの編集画面から設定をクリックしましょう。そしたら１項目ずつ設定していきます。詳しくは下記の外部リンクを確認ください。
プラグインの導入
プラグインはワードプレスには入っていない機能を補うための追加機能です。スパム対策やセキュリティ対策など必要になりますので、入れておきましょう。
基本的にはプラグイン→新規追加→プラグイン検索→今すぐインストール→有効化の流れでインストールします。
以下の記事でおすすめプラグインをまとめています。最初は最低限入れておきたいプラグインだけで良いのでインストールしておきましょう。
1.Cocoonのダウンロードとインストール
それではCocoonのダウンロードとインストールに入ります。
Cocoonのダウンロード
下のリンクから公式のダウンロードページにいって、必ず親テーマと子テーマをダウンロードしてください。
ダウンロード先はあなたのパソコンの好きなところで良いです。ブログ用のフォルダを作って保存するのがいいでしょう。
公式ページにはダウンロードボタン以外にもいろいろ本文がありますが、とりあえずはダウンロードできれば読み飛ばしてOKです。
Cocoonのインストール
次にワードプレスにCocoon親テーマと子テーマをインストールし、子テーマを有効化します。
公式にインストール方法を説明しているページがあるので、そちらを確認ください。
親テーマと子テーマの関係は子テーマが親テーマの分身みたいなものです。
親テーマを有効化してカスタマイズを行った場合、テーマ更新時にカスタマイズが吹き飛ぶ可能性があるため、必ず子テーマを有効化してください。
レンタルサーバーのConoHa WING を使用している場合、テーマ更新すると親テーマが２つになることがあります。
これは不具合のため解消しないとまずいです。下の記事で解決法が書かれていますので、参考にしてください。
Cocoonのインストールお疲れさまでした
2.Cocoonの初期設定
本項目ではCocoonの初期設定を「コンテンツを作成する以前にやるべき設定」としています。
つまり、記事投稿する前に必要な設定です。Cocoon設定にはびっくりするくらい設定できる箇所がありますが最初にやるべきことはそこまで多くないです。
最低限上の４つだけやっとけば記事を書けるところまではいけます。あとは記事を書きながら整えていけばOKです。
メニューの作成とかヘッダーフッター周りの見た目はやりたくなりますが、メニューにのせるためのページが無ければ作れませんのでとりあえず後回しです。
本項目で説明してないCocoon設定も以下の項目で必要なときに説明していきます。また、そもそも設定をいじらなくで良いところもあるため、説明しない項目もあります。
ここまで理解いただけたらWordPressの管理画面よりCocoon設定を選択してください。
ちなみにCocoonマニュアルはCocoon設定を開いたときのタブがバーッと出てるとこの上にマニュアルへのリンクがあります。
スキン
スキン機能は”洋服を着替える感覚でサイトの外観を変更できるように”という目的で作られたデザイン変更機能です。
これにより、カスタマイズがよくわからない人やブログデザインに飽きてしまった時も簡単にデザインを変更ができるようになりました。
Cocoon設定→スキンから好きなスキンを選んで変更をまとめて保存するだけでスキンの変更が完了します。
数十種類のスキンから気に入ったものを選んでみましょう。迷ってしまいますが、後からいくらでも変更できるのでとりあえずでOKです。
私のおすすめスキンは下記記事から確認できます。
全てのスキンを見たい人は下記記事から確認ください。
スキンを使わずにブログ運営する人もいます。お気に入りが無かったらそのままでも良いと思います。
タイトル
タイトルタブでは、フロントページ（トップページ）ほか各種ページのタイトル、メタディスクリプション※、メタキーワード※の設定ができます。
グーグル等の検索エンジンで検索した結果に表示される部分ですので、記入していきましょう。
メタディスクリプション…ページの概要を説明する文章のこと。検索結果に出る。120字くらいがちょうど良い
メタキーワード…そのページがどんなキーワードと関連したページなのかを検索エンジンに伝えるためのキーワード。現在はほぼ意味がない
上記以外はいじらなくてOK、終わったら変更をまとめて保存です
アクセス解析・認証
アクセス解析・認証タブはグーグルサーチコンソール※（通称サチコ）やグーグルアナリティクス※といった分析ツールと紐づけるための設定です。
ここを設定しておかないとうまく情報がサチコやアナリティクスに行きません。設定しておかないとデータがとれないため、最初に設定する必要があります。
Google Search Console（グーグルサーチコンソール）…グーグル公式の分析ツール。サイトの順位の確認や検索語（クエリ）を確認できる
Google Analytics（グーグルアナリティクス）…グーグル公式のアクセス解析ツール。サイトに訪問した人の数、行動、滞在時間などを確認できる
上記以外はいじらなくてOK、終わったら変更をまとめて保存です
グーグルサーチコンソールに登録をしたら、もう一つの検索エンジン「Bing」にもサーチコンソールと似たようなツールがあります。
それがBing Webmaster Tools です。Bingにも登録しておくとBingからもあとになって流入が見込めたり、解析ができるようになるので登録しておきましょう。
公式サイトBing Webmaster Tools
登録はサーチコンソールのデータをインポートするを選べばすぐに終わるので簡単です。
高速化
サイトスピードは速ければ速いほど良いので、設定しておきましょう。高速化設定はCocoon設定のタブではなく別項目であります。
開いたらチェックできるところをすべてチェックしてください。
最後に変更を保存です。
お疲れさまでした！これでようやく記事が書けます‼
3.記事を書く
記事を書くにはGutenbergという名前の「ブロックエディター」という編集画面を使いこなす必要があります。慣れるまでちょっと大変です。
クラシックエディタという書き方もありますがサポートが近々終了するのと、Cocoonではブロックエディタの方が表現が豊かなためブロックエディタを使った方が良いです。
記事の書き方についてはしっかり書いた記事がありますので、そちらを確認しながら執筆してください。
詳細はこちら【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
Cocoonで使えるブロックの一覧表は下記記事で確認できます。
ブロックエディタのツールバーの使い方は下記記事で確認できます。
4.カテゴリー・タグ・固定ページの作成
サイトに必要なページを作成していきましょう。
カテゴリー・タグ
投稿→カテゴリーまたはタグよりページの作成する画面へいけます。次の項目を記入しましょう。
記入ができたら新規カテゴリーを追加または新規タグを追加です。作成したカテゴリーやタグは一覧で表示されています。編集することもできます。
お問い合わせ
企業からの案件やサイトの運営者から相互リンク依頼などが来るようになります。作成方法は下記記事を確認ください。
サイトマップ（記事一覧）
サイトの全体像が分かるようにサイトマップ（記事一覧）ページを作成しましょう。作成方法は下の記事を確認ください。
プライバシーポリシー
個人情報を取り扱いますので、プライバシーポリシーの設置が必要です。詳しくは下記外部リンクを確認ください。
プロフィール
固定ページに詳しく書いたプロフィールとサイドバーや記事下に設置する短めのプロフィールがあります。
サイトバー等に設置するプロフィールは次の記事で確認ください。
固定ページでプロフィールを作成の際は固定ページ→新規追加より記事を書くのと同様にあなたのプロフィールを作成していただければOKです。
5.外観・デザインを整える
あなたのブログらしさが出るところです。たくさん紹介しますが、全部やる必要はありません。あなたがやりたいと思うところをチョイスして作業を進めてください。
基本的にはCocoon設定とウィジェットとメニューを使って設定していきます。中級者以上はCSSという言語を使って設定することもありますが、基本コピペだけなので難しくありません。
詳細は下の記事から確認ください。
次のリストから直接見たい項目に飛ぶこともできます。
- 吹き出し
- フォント・文字サイズ
- サイドバー
- ファビコン（サイトアイコン）
- ヘッダー
- グローバルナビメニュー（ヘッダーメニュー）
- Twitterシェア時に表示する画像の設定
- 本文の幅・サイドバーの幅
- トップページの表示形式
- パンくずリスト
- 行間と段落の間隔
- 表（テーブル）
- 目次
- SNSシェアボタン・フォローボタン
- Twitterの設置・連携
- アイキャッチ画像
- ブログカード
- ヘッダー周りのアピール設定
- フッター
- モバイル（スマホ）表示メニュー
- ボックスメニュー
- 見出し
- オリジナル画像の設定
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に関連する記事を一覧表示します。
記事の書き方
記事を書くときに使える記事です。
外観・デザイン
ブログの見た目をカスタマイズするのに使える記事です。
収益化
ブログで収益化するのに使える記事です。
SNS
ブログと並行してSNS運用するときに使える記事です。
固定ページ
固定ページを作成するのに使える記事です。
コメント