ブログ初心者に徹底的に寄り添うやさしいサイト

【ブックマーク必須】ブログで年間270万円収益化した方法総まとめ

Cocoonサイト例公開!サイト型にカスタマイズする方法とデメリット

 
Cocoonサイト例公開!サイト型にカスタマイズする方法とデメリット
この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

Cocoonをサイトっぽくするにはどうなの?どんな感じか見てみたい。

タケ

そんな疑問を2017年からブログを運営しているタケが解決します。

実際にどんなサイトができあがるかを公開した上で、サイト型に作り替える方法を画像付きでわかりやすく解説。

ブログで収益化したい方は必ず知っておかないといけない内容になっていますので、ぜひ参考にしてみてください。

【記事執筆者たけのブログ実績】

トレンド系ブログで 月29万PV
その後、トレンド系を卒業し、 
副収入サイトや投資ブログ、野球ブログ(趣味系ブログ)も運営。

最高月収42万円
2019年ブログ年収270万円

文字入力しかできない状態からスタートしたブロガー。
ブログ初心者向けの少人数制ブログゼミも運営中。

Cocoonのサイト例〜トップページをサイト型にした場合〜

Cocoonのサイト例〜トップページをサイト型にした場合〜

Cocooonのサイト例とその他の有料テーマを使ったサイト例を紹介します。

デモサイトを実際に作ってみましたので、そちらを参考にしてみてください。

Cocoonのサイト例

Cocoonのサイト例

Cocoonでデモサイトを作っています。

無料テーマで本格的なブログ運営をしてないので、デモサイトを用意しました。

Ccoonでサイトを作ってみて、感じることは以下の3つです。

  1. 有料テーマに比べるとデザイン性で劣る
  2. サイト型にすること自体は可能
  3. 趣味ブログにはおすすめで、収益化目的にはおすすめではない

記事はまだありませんが、Cocoonで作ったデモサイトもありますので、ぜひ参考にしてみてください。

有料テーマのサイト例(おすすめ)

有料テーマTHE・THORサイト例(おすすめ)

当ブログがおすすめしているテーマTHE・THORのサイト例が上記の画像です。

こちらもデモサイトですが、無料テーマと比較すると一段上のデザインになっていることがわかります。

サイトデザインは綺麗なことに越したことはありません。

収益化目的でブログをやる場合、無料テーマだとかなり不利な戦いになるということを抑えておきましょう。

当ブログ「タケの手紙」のサイト例

当ブログではやや高めのWordPressテーマ「ELEPHANT3」を使用しています。

値段が他の有料テーマよりも高いので、初心者ブロガー向きのテーマとは言い難く、アフィリエイトより集客メインの方向けテーマです。

デザインはアクセス数に大きく影響するので、こだわりを持ってデザインしていきましょう。

トップページのデザインは下記から確認できます。

Cocoonのトップページをサイト型に変更する方法

Cocoonのトップページをサイト型に変更する方法

Cocoonのトップページをサイト型に変更する方法を紹介します。

初期設定だと最新記事はズラリと並んでいる状態になっていて、誘導したい記事に誘導できません。

なので、記事が30記事程度まで増えてきたら、サイト型に変更しておくのがおすすめです。

固定ページでトップページを作る

トップページは固定ページで記事を作るように追加していきます。

  1. 固定ページ
  2. 新規追加

このような順番で作っていきます。

タイトルにはブログタイトルを入力しておくのがおすすめです。

トップページを作る際はブロックエディターを使った方が操作しやすいので、クラシックエディターにしている方はブロックエディターに切り替えておきましょう。

プラグイン「classic editor」を無効化するだけで、ブロックエディターに切り替えられます。

2カラムでサイトの骨格を整える

サイト型のトップページは2カラム仕様にした方が見栄えがいいです。

なので、2カラムに設定しましょう。

2カラムに設定する方法は以下のとおりです。

  1. 記事執筆画面の「+」の部分を押す
  2. 「全てを表示」をクリック
  3. 「2カラム」をクリック
  4. 「50/50」を選択

画像による操作方法解説は以下のとおりです。

【投稿画面で2カラムにする方法】

見出しをつける

2カラムの設定ができたら、まずは見出しをつけていきましょう。

自由に入力できますが、今回は「新着記事」「おすすめ記事」で作ってみました。

2カラムにすることさえできれば、あとは入力していくだけです。

【2カラムの入力画面】

新着記事一覧を表示する

今は簡単に新着記事一覧を表示することができるようになりました。

新着記事一覧を表示する方法は以下のとおりです。

順番に作業していってくださいね。

【記事編集画面からクラシックを選択する】

記事編集画面からクラシックを選択します。

赤枠を順番にクリックしていってください。

【ショートコードを選択する】

【新着記事一覧を選択する】

【数字を変更すると表示する記事数を変更できる】

人気記事一覧を表示する

先ほどの新着記事一覧と基本的なやり方は一緒です。

  1. クラシックを選択する
  2. ショートコードを選択する

ここまでは新着記事を作る時と変わらず、「人気記事一覧」を選択します。

【人気記事一覧を選択】

【表示記事数を変更する】

カテゴリー記事一覧を表示する

カテゴリー一覧を表示する方法は新着記事一覧を表示する方法から一手間加えます。

  1. 記事編集画面の「+」ボタンをクリック
  2. クラシックを選択
  3. 新着記事一覧を選択

新着記事一覧を表示させる方法で、新着記事一覧を表示。

そこに以下の方法で、変更を加えます。

【管理画面→カテゴリーで移動】

これでカテゴリー記事が一覧になって表示されます。

新着記事一覧から少し工夫するだけなので、それほど難しくありませんよ。

固定ページをトップページに設定する

記事が完成したら、パーマリンクを「toppage」として、記事を公開しましょう。

そして、もう1つ「新着記事」というタイトルの固定ページを作って、「本文未入力」「パーマリンク:pastpopst」で公開します。

その後の手順は以下のとおりです。

  1. WordPress管理画面から「設定」をクリック
  2. 「表示設定」をクリック
  3. ホームページの表示を「固定ページ」にチェック
  4. ホームページを「トップページ」に設定
  5. 最新記事を「新着記事」に設定
  6. 変更を保存をクリック

【表示設定の設定手順】

スタイルシートを編集する

トップページが切り替わりましたが、まだ不要な表示が残っています。

記事更新日などの表示はトップページに必要ないので、それらの表示を消去していきましょう。

  1. 外観
  2. テーマエディター

と進んでいき、スタイルシートを編集します。

この作業が完了すれば、サイト型へのカスタマイズ完了です。

以下のコードをコピーして、画像の位置に貼り付けてください。

.page .sns-share,
.page .sns-follow {
display: none;
}
.page-id-59 .date-tags,
.page-id-59 .author-info {
display: none;
}

/* トップページのタイトルを消す */
#post-59 h1.entry-title {
display: none;
}

まとめ:Cocoonのサイト例公開!有料テーマと差があるので注意!

Cocoonのサイト例とCocoonをサイト型に切り替える方法を解説しました。

ある程度記事数がないとサイト型にはできないので、最低でも30記事〜50記事ぐらい記事を積み重ねてから、サイトを変更していきましょう。

サイト型に変更すると特定の記事への誘導が簡単になりますので、変更しておくことをおすすめします。

本記事のポイント
  • サイト型の方が読者誘導がしやすい
  • 有料テーマの方がデザインがいい
  • 月1万円以上収益化を目指すなら、有料テーマを導入

この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

★オープンチャット開始★

初心者ブロガーさんと楽しく成長するLINEオープンチャットです!

質問、記事添削、ZOOM勉強会などでブログを向上できます。

★少人数制の初心者ブログサポート★

4時間超えの限定動画コンテンツ、ZOOMによる個別相談可能。

有料コンテンツの無料閲覧も可能です。

Twitterでブログ情報を発信中

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA