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

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

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

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

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

WordPressCocoonのカスタマイズ

WordPressCocoonのカスタマイズ

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

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

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

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

【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。
2020年3月以降のAmazaonアソシエイト審査方法変更点と、その攻略法を詳しく紹介します。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方の参考になるかと思います。

【大変だけどちゃんと稼げる】ブログ収益化のために絶対に必要な方法をすべて解説します。
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!
【Audibleの無料体験でオーディオブック1冊プレゼント!】0円でできることすべてと、月額料50%OFFのお得な使い方を公開します。

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

Cocoonの事前設定

Cocoonの事前設定

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

CocoonChildを有効化する。

Cocoonヘッダーロゴデザイン

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

Cocoonヘッダーロゴデザイン

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

スキンを設定をします。

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

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

Cocoonヘッダーロゴデザイン

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

Cocoonスキン

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

Cocoonのスキン設定

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

Cocoonのスキン設定

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

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

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

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

【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介【これで安心】
WordPressテーマのCocoonをはじめて利用する方向けに、SEO対策などを含めたのおすすめCocoon設定を紹介しました。SEOに強く機能性の高いブログにするために、この記事で一括設定してしまいましょう!

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

Cocoonヘッダーロゴデザイン

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

Cocoonヘッダーロゴデザイン

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

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

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

コード
/************************************
全体のバランス
************************************/
.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ヘッダー周辺のカスタマイズ
①ヘッダーロゴ
②ヘッダーメニュー
③アピールエリア
④おすすめカード
⑤モバイル表示版ヘッダーメニュー

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

①ヘッダーロゴ

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

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

Cocoonヘッダーロゴデザイン

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

【Cocoon】ブログ初心者でもできる『ヘッダーロゴ』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『ヘッダーロゴ』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

②ヘッダーメニュー

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

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

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

【Cocoon】ブログ初心者でもできる『ヘッダーメニュー(グローバルメニュー)』のおしゃれなカスタマイズ【コピペでOK!】
グローバルナビメニュー(ヘッダーメニュー)とは、ヘッダー下にあるメニューのことです。ここにはカテゴリーを並べてあるのですが、さらに細かいタグごとのサブメニューを表示できるようにします。カスタマイズはコピペでOKです。

③アピールエリア

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

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

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

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

【WordPress】初心者でもできる『アピールエリア』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『アピールエリア』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

④おすすめカード

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

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

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

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

【WordPress】ブログ初心者でもできる『おすすめカード』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『おすすめカード』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

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

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

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

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

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

【Cocoon】初心者でもできる『モバイル表示版ヘッダーメニュー』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『モバイル表示版ヘッダーメニュー(グローバルメニュー)』をカスタマイズします。すべてコピペでOKなので「初心者なりにブログをおしゃれにしたい!」という方にもおすすめです。

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

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

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

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

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

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

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

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

①プロフィール

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

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

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

【Cocoon】ブログ初心者でもできる『プロフィール』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『プロフィール』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

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

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

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

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

【Cocoon】ブログ初心者でもできる『サイドバー』のおしゃれなカスタマイズ【一括コピペでOK!】
WordPress/Cocoonを使ったブログでの『サイドバー』を一括カスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

③人気記事ランキング

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

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

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

【Cocoon】ブログ初心者でもできる『人気記事ランキング』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『人気記事ランキング』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

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

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

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

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

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

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

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

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

①記事タイトル(H1)

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

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

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

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

【Cocoon】ブログ初心者でもできる『記事タイトル』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『記事タイトル』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

②見出し(H2~H5)

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

Cocoon見出しのカスタマイズ

Cocoon見出しのカスタマイズ

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

【Cocoon】ブログ初心者でもできる『見出し(H2~H5)』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『見出し(H2~H5)』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

③目次

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

Cocoon目次のカスタマイズ

Cocoon目次のカスタマイズ

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

【Cocoon】ブログ初心者でもできる『目次』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『目次』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

④吹き出し

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

吹き出しのサンプル①

吹き出しのサンプル②

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

【WordPress】初心者でもできる『吹き出し』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『吹き出し』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

⑤ブログカード

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

【本を聞く無料音声アプリで、読書効率アップ!】オーディオブックおすすめTOP5を徹底比較!
毎日の仕事が忙しく、読みたい本がなかなか読めず買っただけで満足してしまう…。そんな方におすすめなのが『オーディオブック』です。新しい読書習慣として、普段の生活の中で音楽を聴くようにして本をインプットすることができます。

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

【Cocoon内部SEO対策】初心者でもできる『ブログカード』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『ブログカード』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

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

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

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

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

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

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

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

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

①SNSシェアボタン

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

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

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

【Cocoon】初心者でもできる『SNSシェアボタン』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『SNSシェアボタン』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

②関連記事

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

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

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

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

【Cocoon】初心者でもできる『本文下の関連記事』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『本文下の関連記事』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

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

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

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

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

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

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

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

①フッター

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

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

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

【Cocoon】初心者でもできる『フッター』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『フッター』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。

②ツイッターの埋め込み

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

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

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

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

【WordPress】初心者でもできる、ブログへの『ツイッター埋め込み』のやり方とおしゃれなカスタマイズ
WordPressを使ったブログでの『ツイッター埋め込み』の方法を解説します。モバイル表示 だとどうしても重たくなってしまいますが、ツイッターアカウントを持っている方はブログとの連携が柔軟にできるのでおすすめです。

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

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

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

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

【Cocoon】初心者でもできる『フッターメニュー/各種ボタン』などのおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの各種細かい装飾をカスタマイズしていきます。コピペでOKなので「初心者なりにブログをおしゃれにしたい!」という方にもおすすめです。モバイル表示にも対応しています。

④インデックスカード

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

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

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

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

【Cocoon】初心者でもできる『トップページのインデックスカード』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『トップページのインデックスカード』をカスタマイズします。コピペでOKなので「初心者なりにおしゃれにデザインしたい!」という方にもおすすめ。モバイル表示対応です。

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

【大変だけどちゃんと稼げる】ブログ収益化のために絶対に必要な方法をすべて解説します。
【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】
【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】
【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!
【Audibleの無料体験でオーディオブック1冊プレゼント!】0円でできることすべてと、50%OFFでお得に利用する方法を公開します。

コメント

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