Cocoonにおける記事の書き方完全解説【初心者はまず見るべき】
cocoonで記事をどう書いたらいいのかわからない・・・
タケ
そんなあなたの悩みを2017年からブログ運営しているタケが解決します。
Cocoonにはいろんな機能がありますので、その全てを網羅的に解説。
操作方法で迷っている人はブックマークなどで何度も見直していただければ、操作で迷うことがなくなります。
Cocoonで良質な記事を量産していきましょう。
目次
Cocoonにおける記事の書き方を順番に解説
上記の記事編集画面で、Cocoonでは②の部分が表示されます。
この②の部分がCocoon特有の部分で、この部分を中心に記事の書き方を紹介します。
また、赤枠以外の部分はどのテーマでも共通の部分になるので、WordPressブロックエディターの使い方！クラシックは卒業すべき理由で解説中です。
「投稿」→「新規追加」で記事を作成する
「投稿」から「新規追加」で記事作成することができます。
上の赤枠のボタンどちらでも記事作成することできますので、どちらかを押して記事作成していきましょう。
タイトルと見出しを設定する
記事はまずタイトルと見出しを設定します。
本文を書く前に見出しを設定した方が記事の内容がブレずに済みますので、必ず見出しを最初に設定しておきましょう。
タイトルと見出しで記事の大枠を決めて、そこから本文を執筆していきます。
【見出しの構造について】
見出しは基本的にH2、H3を使い、H3はH2に挟み込むのが基本です。
H2 Cocoonにおける記事の書き方を具体的に解説
H3 投稿→新規追加で記事を作成する
H3 タイトルと見出しを設定する
H2 Cocoonで記事を書く時の注意点
H3は単独ではなく、複数になるようにします。
本文を書き、Cocoon設定で記事装飾する
Cocoonには「Cocoon設定」と呼ばれる部分があり、その部分が他のテーマと違うところです。
いろんな記事装飾ができるので、記事後半でまとめて記事装飾を紹介しています。
また、より本格的にデザインしたい場合は有料テーマを使うのがおすすめです。
SEOタイトル、メタディスクリプション、メタキーワードを入力
SEOタイトルはタイトルをそのままコピー＆ペーストでOKです。
メタディスクリプションはGoogle検索した時に、タイトルの下に表示される文章のこと。
このメタディスクリプションで興味を引くことができれば、クリック率アップにつながります。
メタキーワードは狙っているキーワードを入力しておきましょう。（効果はほぼなし）
パーマリンク、カテゴリー設定
パーマリンクやカテゴリーの設定は絶対必要なので、必ず設定しましょう。
パーマリンクにある「URLスラッグ」は半角英語とハイフンで記入し、カテゴリーでは未分類を使わないようにしましょう。
上記画像から編集したものが下記画像です。
アイキャッチ画像の設定
アイキャッチ画像は必ず設定しておきましょう。
上記画像の「アイキャッチ画像」から設定することができ、ファイルを選択するかドラッグ＆ドロップで画像を選択することができます。
アイキャッチ画像も記事の質を大きく左右しますので、アイキャッチ画像をしっかり作っておくことも大事です。
【アイキャッチ画像に使えるサイト一覧】
Cocoonにおける記事の書き方〜Cocoon設定による記事装飾をマスターしよう〜
Cocoonでは様々な記事装飾ができます。
全部の記事装飾を知る必要はないですが、主要なものはしっかり押さえておきましょう。
記事装飾の方法について1つ1つまとめましたので、参考にしてみてください。
アイコンボックスで記事の見やすさアップ
「Cocoonブロック」→「アイコンボックス」を選択します。
色枠の左側にアイコンがついているボックスを作ることができ、細かい設定は以下の画像の赤枠で設定できます。
アイコンボックスだけでも、かなりバリエーションがあるので、装飾の第一歩としたぜひ使ってみてください。
色合いが豊かな記事が完成しますよ。
案内ボックスはシンプルなボックス
案内ボックスは色だけがついたボックスです。
アイコンがないシンプルなボックスで、こちらもよく使用します。
操作方法は「Cocoonブロック」→「案内ボックス」を選択して、下記画像赤枠にある色を選択。
これで完成です。
白抜きボックスはよく使うので、要チェック
白抜きボックスは外枠だけ色がついているボックスです。
操作は「Cocoonブロック」→「白抜きボックス」を選択し、色を以下の画像の通りに選択します。
背景色も選択できるので、枠の内側に色をつけることも可能。
設定の自由度が高いのが白抜きボックスの特徴です。
付箋風ボックスは適度に使おう
付箋風ボックスは左に少し濃い色がついている上記画像のようなボックスです。
デザイン的な好みの問題にありますが、適宜使用してください。
色は「灰色」「黄色」「赤」「青」「緑」の5色から選ぶことができます。
「Cocoonブロック」→「付箋風ボックス」を選択し、以下の画像の赤枠部分から色を選択していきましょう。
タブボックスは目立つので、ここぞの時に
「Cocoonブロック」→「付箋風ボックス」で作ることができます。
タブボックスは上記画像のように、左上の部分に文字を入れることができるボックスです。
色も自由に変更することができるので、目立たせたい時に使いやすいのが特徴。
下記画像の赤枠で、色やラベルを変更することができます。
吹き出しの作り方
「Cocoonブロック」→「付箋風ボックス」で作ることができます。
また、バリエーションも豊富で、
- 画像の変更
- 吹き出しのパターン変更
- 色変更
などが自由度が高いです。
吹き出しのバリエーションは下記画像の内容で設定することができます。
ボタンの作り方（アフィリエイトリンクの貼り方）
ボタン型リンクはブログ記事には必須です。
「Cocoon設定」を見てみると、ボタンには大きく2種類あることがわかります。
- ボタン：URLを貼る時に使う
- 囲みボタン：アフィリエイトリンクを貼る時に使う
こう分類すると使いやすいです。
ボタン・囲みボタンともに画面右側からサイズや色などを編集することができます。
【ボタンの設定】
【囲みボタンの設定】
アイコンリストは自由にカスタマイズできて便利
アイコンリストはリストの表示を細かく編集できたり、リストの色や外枠の色を自由に選択することができます。
なので、カスタマイズの自由度が大きく、操作に慣れてくれば、「アイコンリスト」を中心に使うことになるでしょう。
サイドバーで細かい設定ができますので、最初はどんどんいじってみてください。
ブログで稼ぎたい人はCocoonより有料テーマがおすすめです。
上記画像の上半分がCocoonで、下半分が有料テーマで作った当ブログのデザインです。
やはり、有料テーマの方がデザイン面で勝ります。
無料テーマCocoonのデメリットをまとめました。
- 見出しのカスタマイズする時に、コードをいじらないといけない
- 色で差別化はできるものの、全体的なデザインが同じようになってしまう
カスタマイズをいじる作業は初心者の方には結構大変な作業で、CodeCampなどで経験を積んだりする必要があります。
網羅的にデザインできるテーマではありますが、収益化を目指す場合はもう少し細かいところに手が行き届く有料テーマがおすすめです。
当ブログはELEPHANT3という2万円を超える有料テーマを使っています。
ただ、ELEPHANT3は少し値段が高いです。
初心者向けの有料テーマはTHE THOR（ザ・トール）で、おしゃれなデザイン性と初心者が扱いやすい操作感を兼ね備えています。
詳細記事もあるので、参考にしてみてください。
まとめ：Cocoonでの記事の書き方！収益化するには有料テーマも検討
Cocoonでの記事の書き方をまとめました。
記事内の装飾がかなり幅広くできるテーマではありますが、行き届かない点もあります。
本格的にブログで収益化したいなら、有料テーマに移行して、細かい部分までデザインするのがおすすめです。
