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

こんにちは、yujiです!このブログでは、WordPressを使ったブログ運営について詳しくまとめています。

「ブログ初心者なりに、ブログをおしゃれにカスタマイズしたい!」

この記事では、以上のようなブログデザインについての質問に丁寧に答えます。

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

WordPressCocoonのカスタマイズ

WordPressCocoonのカスタマイズ

このようにブログのデザインは、見る人の印象に大きく影響します。

この記事にまとめた方法で、以上のようなCocoonのカスタマイズを再現できるので、参考にしていただけたらと思います。

Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。

【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。

【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!

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

Cocoonの事前設定

Cocoonの事前設定

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

CocoonChildを有効化する。

Cocoonヘッダーロゴデザイン

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

Cocoonヘッダーロゴデザイン

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

スキンを設定をします。

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

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

Cocoonヘッダーロゴデザイン

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

Cocoonスキン

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

Cocoonのスキン設定

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

Cocoonのスキン設定

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

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

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

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

全体のバランスを整えるコードを入力します。

Cocoonヘッダーロゴデザイン

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

Cocoonヘッダーロゴデザイン

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

スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取りましょう。
・編集するテーマが「CocoonChild」になっていることを確かめましょう。
・「@charset “UTF-8”;」から始まる最初から入力されている部分には触れないようにしましょう。
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の基本的な設定は完了です!

「ここからはブログデザインを紹介します。まずは、ブログ上部のカスタマイズからまとめていきます。」

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

ヘッダーのカスタマイズ

ここからは、Cocoonのヘッダー部分と、インデックスのカスタマイズをしていきます。

ヘッダー周辺のデザインは、具体的に以下のようになっています。

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

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

ヘッダー周りをパーツごとに分けると、以下のようになります。

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

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

①ヘッダーロゴ

以下では、ヘッダーのロゴ部分のカスタマイズを紹介していきます。

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

Cocoonヘッダーロゴデザイン

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

②ヘッダーメニュー

次に、ヘッダーメニュー(グローバルメニュー)部分のカスタマイズをまとめます。

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

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

③アピールエリア

続いて、アピールエリアのカスタマイズを紹介します。

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

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

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

④おすすめカード

4つ目に、おすすめカードのカスタマイズについてまとめます。

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

Cocoonのおすすめカードのカスタマイズ

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

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

ヘッダーメニューのモバイル表示版カスタマイズを、以下の記事で紹介しています。

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

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

このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。

⑥インデックスカード

以前から、お問い合わせページやツイッターのDMで「インデックスカードのカスタマイズを知りたい」との要望が多くいただいていました。

そこで今回、当ブログのオリジナルデザインを公開することにしました!

Cocoonインデックスカードのカスタマイズ

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

以上でCocoonのヘッダーとインデックスカードのカスタマイズは完了です!

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

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

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

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

サイドバーのデザインは、具体的に以下のように細分化して解説していきます。

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

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

①プロフィール

以下では、プロフィールのカスタマイズを紹介していきます。

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

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

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

次に、カテゴリー/タグクラウド/アーカイブ/検索のカスタマイズを紹介していきます。

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

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

③人気記事ランキング

続いて、人気記事ランキングのカスタマイズをまとめます。

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

このように人気記事は読者が興味を持ちやすく、クリックしてくれる確率が高まります。

以上でCocoonのサイドバーのカスタマイズは完了です!

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

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

ブログ記事内で使えるCocoonの様々なカスタマイズ

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

記事内で使えるデザインは、具体的に以下のように細分化して解説していきます。

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

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

①記事タイトル(H1)

以下では、記事タイトル(H1)のカスタマイズを紹介していきます。

Cocoonの記事タイトルのカスタマイズ

Cocoonの記事タイトルのカスタマイズ

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

②見出し(H2~H5)

次に、見出し(H2~H5)のカスタマイズを紹介していきます。

Cocoon見出しのカスタマイズ

Cocoon見出しのカスタマイズ

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

③目次

続いて、目次のカスタマイズを紹介していきます。

Cocoon目次のカスタマイズ

Cocoon目次のカスタマイズ

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

④吹き出し

以下では、吹き出しのカスタマイズを紹介していきます。

吹き出しのサンプル①

吹き出しのサンプル②

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

⑤ブログカード

ここからは、ブログカードのカスタマイズを紹介していきます。

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

以上でCocoonの投稿記事内で使えるカスタマイズは完了です!

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

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

Cocoonの便利機能のカスタマイズ

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

記事下エリアで使えるデザインは、具体的に以下のように細分化して解説していきます。

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

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

①SNSシェアボタン

以下では、SNSシェアボタンのカスタマイズを紹介していきます。

CocoonSNSシェアボタンのカスタマイズ

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

②関連記事

次に、関連記事のカスタマイズを紹介していきます。

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

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

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

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

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

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

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

フッターなどで使えるデザインは、具体的に以下のように細分化して解説していきます。

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

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

①フッター

以下では、フッター部分のカスタマイズを紹介していきます。

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

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

②ツイッターの埋め込み

次に、ツイッターの埋め込み方法を紹介していきます。

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

WordPressツイッターの埋め込み方法

このようにツイッターのタイムラインを埋め込むことで、ブログとの連携が柔軟にできます。
モバイル表示だと読み込みがどうしても重たくなってしまいますが、ツイッターアカウントを持っている方にはおすすめです。

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

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

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

以上の4つのCocoonのデザインを再現できるので、参考にしていただけたらと思います。

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

yujiblogでは、こちらの記事が人気となり、WordPress/CocoonでのWEB制作をしたい人向けに、よく検索されるブログとなりました。

おかげさまで検索上位をキープしつつ、順調にアクセス数が伸びています。

cocoon検索1位

僕は以上のWEBデザインスキルを独学で習得しました。
そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法について、以下の記事でまとめてみました。興味のある方はどうぞ!(1か月でWEB制作できるようになります。)

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

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

【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!
【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】
【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】
【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!

コメント

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