タケのブログゼミ〜ブログ収入を初心者でも本気で稼ぐサイト〜

ブログ×ライターで2ヶ月目に3万円稼ぐ方法

パスワード付限定コンテンツが見れる2大サポート

ゼミ

ZOOMでブログ相談ができる!ブログ個別サポートWEBインカム構築ゼミ

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

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

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

タケ

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

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

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

【記事執筆者タケのブログ実績】

トレンド系ブログで27万PV(Googleアドセンス13万円)が最初の大きな収益。

2020年ブログ年収275万円
2020年在宅年収423万円

副収入サイトや投資ブログ、野球ブログ(趣味系ブログ)も運営

公式LINEで質問OK!
ブログ初心者向け個別ブログサポートでサポート中

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

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

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

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

Cocoonのサイト例

Cocoonのサイト例

Cocoonでのサイト例は上記のとおりです。

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

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

ある程度のところまではデザインできるんですが、文字や全体的なデザインが有料テーマほどにはなりません。

正直、無料テーマで戦うのはかなり不利です。

武器を持っている相手に、武器なしで戦うようなものなので、ブログで毎月収益を上げたい方は必ず有料テーマを導入しましょう。

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

有料テーマ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万円のフリーターでした。趣味は野球観戦。

★5年のブログ経験をあなたに。★

あなたのブログの相談に乗る個別サポート実施中。

1人1人に合った戦略を提案し、ブログを改善します。

ブログ開設前の方でもOKです。

★絶対損しない3ヶ月収入構築プログラム★

全額返金保証ありのブログ×ライター収入構築プログラムです。

たった3ヶ月の作業で、在宅収入を作ります。

本気で人生変えたい人向けの本気プログラムです。

【重要事項が一覧に】

初心者ブロガーが収入を得るまでの基本チェックリスト

Twitterでブログ情報を発信中

- Comments -

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

CAPTCHA