ブログのノウハウ

【コピペでOK】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】

こんにちは、yujiです。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

ブログ初心者なりに、WordPressブログをおしゃれにカスタマイズしたいです。

以上のような、ブログデザインについての要望に丁寧にお答えします。

このブログではWordPressテーマの『Cocoon』を使っています。

Cocoonを利用する最大のメリットは、細かくカスタマイズできることと、デザインのポテンシャルが高いことです。

WordPressCocoonのカスタマイズ

WordPressCocoonのカスタマイズ

このように、ブログ全体のデザインが整っていると、記事読者からの印象は大幅に改善されます。

そこでこの記事では、以上のようなCocoonのカスタマイズを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。(WordPress無料テーマ『Cocoon』の設定方法はこちら

※後半ではこの記事をSEO上位に表示できた理由も解説しています。参考までにどうぞ。

Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。
最新の攻略法を、以下の記事でまとめています。
【審査承認されたので解説】最新Amazonアソシエイトの審査合格方法

【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説
【SEO】ブログのアクセス数を増やす9個の方法

【実証済み】未経験者から独学でプログラミングを習得できた勉強法

まずはCocoonを利用するうえで、事前に設定しておくことをまとめておきます。

sponser link

Cocoonの事前設定

Cocoonの事前設定

まずは文字の大きさやスタイルなど、Cocoonの全体的な初期設定をします。

WordPressブログのCocoon導入方法は、以下の記事をご覧ください。
【重要】WordPressブログで最初にするべき3つのこと【おすすめの初期設定】

CocoonChildの有効化を確認

Cocoonヘッダーロゴデザイン

WordPressメニュー「外観」の「テーマ」から『CocoonChild』が有効化されていることを確認してください。

Cocoonヘッダーロゴデザイン

ブログを表示すると、以上のようなデフォルトのデザインになっています。

スキンの設定

Cocoonでは「スキン」機能があり、洗練されたデザインを1クリックで実装することができます。

yujiblogではスキンの「ホワイトラーメン」を実装し、そこから若干の変更を加えています。

Cocoonヘッダーロゴデザイン

WordPressメニューから「Cocoon設定」を開きます。

Cocoonスキン

表示されたページの「スキン」タブから、好みのデザインを選ぶことができます。

Cocoonのスキン設定

スキン一覧の中から「ホワイトラーメン」を選択します。

Cocoonのスキン設定

スキンを選択出来たら「変更をまとめて保存」をクリックします。

その他SEO対策と、おすすめのCocoon設定

「Cocoon設定」では、その他の細かい調整が可能です。

SEOに強く機能性の高いブログにするために、おすすめのCocoon設定を以下の記事で詳しく紹介しています。

【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介

全体の見た目のバランスを整える

Cocoonヘッダーロゴデザイン

「外観」から「テーマエディター」に進み「style.css」を開きます。

Cocoonヘッダーロゴデザイン

スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。

スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る。
・編集するテーマが「CocoonChild」になっていることを確かめる。
・「@charset “UTF-8”;」から始まる1~7行目部分は消さない。
Cocoonスタイルシート編集時の注意点

スタイルシートにコピペするコードはこちらです。

コード
/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

Cocoonヘッダーロゴデザイン

コピペができたら「ファイルを更新」をクリックします。
以上でCocoonの事前設定は完了です。

ここからはブログデザインを紹介します。ブログの上部から順に解説していきます。

sponser link

ヘッダーとインデックスカードのカスタマイズ

まず、Cocoonのヘッダー部分と、インデックスカードのカスタマイズをします。
ヘッダー周辺のデザインは、以下のようになっています。

WordPressCocoonのカスタマイズ

こちらのブログデザインを、細分化して解説していきます。

ヘッダー周辺のカスタマイズ
①ヘッダーロゴ
②ヘッダーメニュー
③アピールエリア
④おすすめカード
⑤モバイル表示版ヘッダーメニュー
⑥インデックスカード
⑦お問い合わせフォーム

この6つを以下で詳しく解説していきます。

①ヘッダーロゴ

Cocoonのヘッダーのカスタマイズ

このようにブログの最上部に表示され、全体の印象に大きく影響するのがヘッダーロゴです。ロゴ部分には画像を挿入するので、好きなデザインを当てはめることができます。
『ヘッダーロゴ』のカスタマイズはこちら

②ヘッダーメニュー

WordPressCocoonのヘッダーメニューのカスタマイズ

このようにページ上部に表示され、ブログ内のアクセスをなめらかにするのがヘッダーメニューです。ブログ上部に常に表示されることになるので、サイトにあったデザインにカスタマイズしておくことをおすすめします。
『ヘッダーメニュー』のカスタマイズはこちら

③アピールエリア

cocoonのアピールエリアのカスタマイズ

アピールエリアでは、このように読者の目に留まりやすい位置にリンクを張ることができます。
例えばアクセスを集めたいページを目立たせることができ、PVを伸ばすことができます。
『アピールエリア』のカスタマイズはこちら

④おすすめカード

Cocoonのヘッダーのカスタマイズ

このようにおすすめしたい記事やカテゴリーの画像リンクを、ヘッダー下の目立つ部分に表示させることができます。こちらもブログ読者に対し画像付きの訴求ができるので、設定をおすすめします。
『おすすめカード』のカスタマイズはこちら

⑤モバイル表示版ヘッダーメニュー

Cocoonのモバイル表示版のトップメニュー

このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。
『モバイル表示版ヘッダーメニュー』のカスタマイズはこちら

⑥インデックスカード

この記事にまとめた方法で、以上のようなCocoonのインデックスカードを再現できるので、是非参考にしていただけたらと思います。
『インデックスカード』のカスタマイズはこちら

⑦お問い合わせフォーム

お問い合わせフォームの作り方

アフィリエイトをするなら、お問い合わせフォームは必須です。5分程度で完了するのですぐに作りましょう。
『お問い合わせフォーム』のカスタマイズはこちら

続いて、ブログ右側のサイドバーのカスタマイズをまとめていきます。

sponser link

サイドバーのカスタマイズ

ここからは、Cocoonのサイドバー部分のカスタマイズを紹介していきます。

サイドバーのカスタマイズ
①プロフィール
②カテゴリー/タグクラウド/アーカイブ/検索
③人気記事ランキング

この3つを以下で詳しく解説していきます。

①プロフィール

Cocoonプロフィールのカスタマイズ

このようにできるだけシンプルにまとめることで、圧迫感のない自己紹介ができます。ブログ上部に表示されるので、個性のあるオリジナルカスタマイズがおすすめです。
『プロフィール』のカスタマイズはこちら

②カテゴリー/タグクラウド/アーカイブ/検索

COCOONサイドバーのカスタマイズ

このようにカテゴリーやタグ、アーカイブをまとめることで、読者は興味のある記事を探しやすくなり、ブログ内のアクセスが良くなります。すべてのページに表示されるので、シンプルなデザインであることが必要です。
『カテゴリー/タグクラウド/アーカイブ/検索』のカスタマイズはこちら

③人気記事ランキング

Cocoon人気記事ランキングカスタマイズ

このように人気記事は読者が興味を持ちやすく、クリックしてくれる確率が高まります。
『人気記事ランキング』のカスタマイズはこちら

次に、ブログの記事内で使える様々なカスタマイズをまとめていきます。

投稿記事内で使えるカスタマイズ

ここからは、Cocoonの投稿記事内で使えるカスタマイズを紹介していきます。

投稿記事で使えるカスタマイズ
①記事タイトル(H1)
②見出し(H2~H5)
③目次
④吹き出し
⑤ブログカード

この5つを以下で詳しく解説していきます。

①記事タイトル(H1)

cocoonカスタマイズ、H1

このように記事タイトルは必ず読者の目に付く場所なので、デザインを整えておくとブログの印象が良くなります。記事タイトル周りの投稿・更新日や、カテゴリー・タブのデザインも含めてのカスタマイズです。
『記事タイトル(H1)』のカスタマイズはこちら

②見出し(H2~H5)

Cocoon見出しのカスタマイズ

文中に以上のような装飾を入れることで、読者にとってまず見た目でわかりやすく、そして読みやすいブログになります。段落構成に必須なので、是非カスタマイズしてみてください。
『見出し(H2~H5)』のカスタマイズはこちら

③目次

Cocoon目次のカスタマイズ

このように段落ごとの内容が一目でわかるようになっているので、読者が読みたい部分を探しやすくなります。基本は非表示で、必要な時だけ表示できる設定にしています。
『目次』のカスタマイズはこちら

④吹き出し

吹き出しのサンプル①

吹き出しのサンプル②

このように吹き出しをカスタマイズして使い分けることで、記事の導入や話の展開をスムーズにすることができます。画像も自由に設定できるので、ブログのイメージキャラクターを定着させましょう。
『吹き出し』のカスタマイズはこちら

⑤ブログカード

このようにオリジナルデザインのブログカードでおすすめ記事を提示することで、内部SEOの効果を高めることができます。記事概要欄が省略されずに、すべて表示されるように設定しています。
『ブログカード』のカスタマイズはこちら

以下では、投稿記事の本文下のエリアのカスタマイズをまとめていきます。

投稿記事下エリアのカスタマイズ

ここからは、Cocoonの投稿記事下のエリアで使えるカスタマイズを紹介していきます。

記事下エリアのカスタマイズ
①SNSシェアボタン
②関連記事

この2つを以下で詳しく解説していきます。

①SNSシェアボタン

このように最小限シンプルなデザインにすることで、限られたスペースで、邪魔にならずにボタンを配置できます。配置するボタンの種類は、自由に変更可能です。
『SNSシェアボタン』のカスタマイズはこちら

②関連記事

Cocoon本文下関連記事カスタマイズ

このようにサムネイルとタイトルをバランスよく配置することで、記事を読んだ読者からのクリックが期待できます。限られたスペースで、しっかり記事を訴求するデザインです。
『関連記事』のカスタマイズはこちら

最後に、フッターやその他の細かいカスタマイズをまとめていきます。

フッター・その他のカスタマイズ

ここからは、Cocoonのフッターやその他の細かい部分のカスタマイズを紹介していきます。

フッター・その他のカスタマイズ
①フッター
②ツイッターの埋め込み
③フッターメニュー・各種ボタンなど

この3つを以下で詳しく解説していきます。

①フッター

Cocoonフッターのカスタマイズ

このようにサイドバーと同様のコンテンツを配置することで、ブログ全体の構図が読者に伝わりやすくなります。コードはすでにほぼ入力済みなので、少しだけ編集します。
『フッター』のカスタマイズはこちら

②ツイッターの埋め込み

Cocoonフッターのカスタマイズ

このようにツイッターのタイムラインを埋め込むことで、ブログとの連携が柔軟にできます。ツイッターアカウントを持っている方にはおすすめです。
『ツイッターの埋め込み』のカスタマイズはこちら

③フッターメニュー・各種ボタンなど

続いて、フッターメニュー・各種ボタンなどのカスタマイズを紹介していきます。

この記事で紹介するカスタマイズ
・フッターメニュー
・トップへ戻るボタン
・コメントを書き込むボタン
・次のページボタン

以上の4つのCocoonのデザインを再現できるので、参考にしていただけたらと思います。
『フッターメニュー・各種ボタンなど』のカスタマイズはこちら

以上が、初心者向けのおすすめカスタマイズです。

プログラミング未経験の僕は、以上のようなWEB制作を独学で習得しました。
1か月ほどでWEB制作ができるようになるので、興味のある方は参考にしていただければと思います。

【実証済み】未経験者の僕が、独学でプログラミングを習得できた勉強法

「やっぱりカスタマイズ難しい…」と感じる方は有料テーマがおすすめ

ブログをすぐに収益化したい方は、有料テーマの利用がおすすめ。
ブログの初期設定にかかる時間を圧倒的に短縮でき、記事執筆に専念できます。

※SEOの効果は3~6ヶ月かかるので、できるだけ早く記事作成を始めた方が結果につながります。

こちらの記事でおすすめテーマを紹介しているので、1日でも早く記事を書いてアフィリエイト成果に繋げてください!

【最新版】SEOに強いおすすめWordPressテーマ16選

Googleアドセンスに登録

ブログを始めたら、Googleアドセンスに登録しておくのがおすすめです。

Googleアドセンスとは、自分のWebサイトに広告を貼り、その広告がクリックされた分だけ広告収入が得られる仕組みのことです。

こちらの記事で審査申し込み方法をまとめているので、まだの方は今すぐ始めてみてください!

【最新】Googleアドセンス審査に合格するための6つのポイント

【SEO効果あり】サイト表示速度が遅くて悩んでいる方へ

ブログの表示速度は、Googleからの評価に関わる重要な要素です。

Googleはこれまでに何度も『サイト表示速度とSEOの関係』について明言しています。

Web検索ランキングでのサイト速度の使用
『ユーザーは速度を重視しています。そのため、検索ランキングではサイトの速度を考慮に入れることにしました。』
詳細情報:Google 検索セントラルブログ
読み込み速度をモバイル検索のランキング要素に使用
『2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。』
詳細情報:Googleウェブマスター向け公式ブログ

このようにSEOで重視されるサイト表示速度ですが、レスポンスの速いサーバーを使うことで大幅に改善されます。

そこで以下の記事では、ブログアフィリエイトに最適なレンタルサーバーを5つ厳選しました。

高速サーバーへの『お得な乗り換え情報』についても詳しく解説しているので、是非チェックしてみてください。

【高速化】ブログアフィリエイトにおすすめのレンタルサーバー5選

以下は、ブログのSEO対策に関するおすすめ記事の紹介です。

【重要】ブログのアクセス数を増やす方法とは?

yujiblogのアクセス数

yujiblogはSEOで検索上位を獲得した結果、1年ほどでアクセス数が大幅に伸びました。

ブログのアクセス数を増やす方法について以下の記事で解説したので、参考にしていただけたらと思います。

【SEO効果あり】ブログのアクセス数を増やす9個の方法

【完全版】SEOに強いブログ記事の書き方テンプレート

以下で紹介する記事では、検索上位を獲るためのブログの書き方について、徹底的に解説しています。

この記事で達成できる目標
▶『読者にとって読みやすい』記事が書ける
▶『Googleに評価されやすい』記事が書ける

テンプレを完コピするだけでSEOに強い記事が書けるようになるので、実際に手を動かしながら挑戦してみてください。

【完全版】SEOに強いブログ記事の書き方テンプレート

【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説

またアクセス数に比例してアフィリエイトの売り上げも伸びており、現在の収益は『毎月30万以上』となっています。

以下の記事では、ブログを収益化する方法について詳しくまとめています。

【初心者向け】ブログ収入を稼ぐまでの流れを徹底解説

【売れる文章術】『セールスライティング』の5つのコツ

セールスライティングとは『文章で商品を売る技術』のことです。

的確なセールスライティングができると「成約率」が高くなるので、ページのアクセス数が少ない状態でアフィリエイト成果を出すことが可能です。

以下の記事では、文章でモノが売れていくセールスライティングのノウハウについて詳しく解説しています。

【売れる文章術】『セールスライティング』の5つのコツ

【順位が伸び悩んでいる人向け】リライトでSEO効果を上げる方法

ブログ記事は、リライトをすることで大きく検索順位を伸ばすことができます。

SEOに効果的なリライト方法を解説

こちらは当ブログの記事ですが、リライトをすることで50位あたりからTOP10に急上昇しました。

このように、適切にリライトができるようになると、ブログ収益化が簡単になります。

以下では、ブログ初心者向けのリライト手順と注意点を詳しくまとめたので、参考にしていただければと思います。

【具体例あり】ブログ記事のリライトでSEO効果を上げる9個のコツ

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました!

Amazonアソシエイト審査に1発合格した話
【限定公開】『もしもかんたんリンク』のカスタマイズ
【注意】もしもアフィリエイトは危ない!?
【その画像の著作権、大丈夫?】安心のフリー素材サイト9選
【無料あり】僕はオーディオブックで年間100冊聞いてます
【実証済み】独学で英会話が上達する『5つ』のシンプルな勉強法

コメント

タイトルとURLをコピーしました