>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法はこちら

超初心者向け!Cocoonカスタマイズ完全マニュアル【WordPress】

読者さん

ワードプレステーマのコクーンを導入して、最初に必要な設定も終わらせた!!

いよいよワードプレスの地味な見た目を変えて可愛いブログにしたい!!

でも、カスタマイズってどうやったら良いの?

このような疑問にお答えします!!

こちらでは、WordPressテーマ「Cocoon(コクーン)」のカスタマイズについて、ワードプレスの専門家として活動中のわたしが、動画をメインに初心者さんに分かりやすく解説します♪

この記事を最後まで読むと、あなたのWordPressテーマ「Cocoon(コクーン)」のデザインが一気に自分好みにカスタマイズできます。

好きなデザインのブログが作れると、テンションが上がるので、その勢いで一気にブログ記事を書いて、どんどん自分が望むブログでの収益化まで進めてください(^O^)/

Cocoonをまだ導入していないという方は、こちらの記事を参考に、まずはCocoonを導入してください。

WordPressを独学で作ったけど
初期設定とか不安に思っている方に
設定の見直しができるマニュアル本です♪

この記事にかいてあることはこんなことだよ♪

Cocoonカスタマイズについて

コクーンのカスタマイズって、当然ですがコクーンの公式サイトには掲載されております。

>>コクーン公式サイト「マニュアル」ページ

ですが、マニュアルページを見てもらうと分かるのですが、多くの方がマニュアルサイトを見てもカスタマイズができないんです。

なぜなら・・・

コクーンは、無料テーマにも関わらず機能面・デザイン性がかなり優れており、カスタマイズの操作方法がかなり細かいのです!!

わたしは、コクーンのカスタマイズについてのYouTube動画をたくさんアップしています。(YouTubeのチャンネル登録お願いします♪)

その時に、「コクーンの動画を見たらカスタマイズができました!!」というメッセージをたくさんいただきましたので、ブログ運営に使える最低限の「コクーン」カスタマイズをお伝えします!!

これから解説するカスタマイズを観ていただければ、このようなサイトが作れます。

Cocoonのカスタマイズ方法

コクーンのカスタマイズ方法は、わたしのアップしている3本のYouTube動画を中心に、簡単な文章でまとめます。

カスタマイズ動画
  • カスタマイズ1…メディア設定・高速化・サイトカラー・ヘッダー設定・タイトル・SEO・OGP・管理者画面
  • カスタマイズ2…グローバルメニューの見た目・トップページの表示形式・SNSボタン・サイドバーのプロフィール・サイドバーのボックスメニューの作り方
  • カスタマイズ3…モバイル表示のカスタマイズ・モバイルフッターボタン

早速頑張っていきましょう!!

Cocoonカスタマイズ1:初期設定など

この動画の内容を見ていただくと、下記のような感じにカスタマイズができます。

Before

After

カスタマイズしたところはこちら

1.【設定】のメディアの画像サイズ変更

2.コクーン設定→高速化設定

3.コクーン設定→全体設定 

  • サイトキーカラー変更(この色を変更するとイメージが一気に変わります)
  • サイトフォント(デフォルトでもOK)
  • サイトフォントサイズ(デフォルトでOK)
  • フォントカラー(真っ黒よりグレーが目に優しい)
  • モバイルサイトフォント(モバイルは16pxが見やすい)
  • サイトアイコンフォント(わたしはこっちを使います→Font Awesome 5)
  • サイトの背景色/画像(サイト全体に色つけしたり背景を入れたりできます)
  • サイトリンク色(リンクは青がおすすめ)

4.コクーン設定→ヘッダー

  • ヘッダーレイアウト(グローバルメニューの表示イメージが変わります)
  • ヘッダー固定(固定すると、スクロールしてもメニューが見えるので、わたしは固定している方が好きです)
  • ヘッダー画像(ヘッダーに画像を入れたい方は入れてください)
  • ヘッダーカラー(基本は、サイトキーカラーになりますが、変えたい時はここから)
  • グローバルナビメニュー幅(メニューの横幅を変えられます)

5.コクーン設定→タイトル

  • サイトの説明…ここは入れた方がいいので、作っているサイトの概要
  • メタキーワード…あまり必要はないけど、キーワードを3から5個くらい入れた方がいいかなぁ
  • メタディスプリクション(チェックをいれる)
  • メタキーワード(チェックをいれる)

6.コクーン設定→SEO

上記のようにチェックを入れてもらえたらOKです。

7.コクーン設定→OGP

  • OGPの有効化(チェックをいれる)
  • Twitterカードの有効化(チェックをいれる)
  • Twitterカードタイプ(大きく表示したい場合は大きな画像のサマリー、それ以外は小さい画像)
  • ホームイメージの画像のアップロード(ここの画像にご自身のサイトのイメージ画像を入れておきましょう)

8.コクーン設定→管理者画面

こちらの赤枠のチェックを全て外すとこの表示が消えます。

パソコンが苦手だし、自分ではちょっとできないという方は、WordPressスポットサポートというサービスがあるので、ご活用ください。

Cocoonカスタマイズ2:ヘッダー・トップページなど

この動画の内容を見ていただくと、下記のような感じに新着記事の表示とサイドバーのカスタマイズができます。

Before

After

カスタマイズしたところはこちら

1.ヘッダーメニューにアイコンを入れて表示

ナビゲーションラベルのメニュー名の前に、アイコンを表示させるHTMLタグを入力します。

アイコンはこちらのサイトから探します。
Font Awesome (https://fontawesome.com/) のサイト

あとは、説明のところに、英語入力をします。

そうするとこのような表示になります。

2.トップページの表示を変更。コクーン設定→インデックス

  • 表示形式(好きなスタイルを見つけて変更してください。わたしは、カテゴリ毎に見れるようにしたかったのでカテゴリごとを選択)
  • 並び順(投稿日でOK)
  • カードタイプ(カード型になった時の画像の表示が変わります)
  • 抜粋の表示(表示させる時に枠線の有無を選択できます)
  • 自動生成抜粋文字数(簡単な記事内容が表示されますので、文字数を選択してください。無しにしたい場合は、0にする)
  • 省略文字列(例えば、ReedMore,もっと読むなど・・・※要らなければ、入れなくてもOK)

3.SNSシェアボタンの調整。コクーン設定→SNSシェア

ブログ記事の上と下に表示されている、SNSボタンを表示させるかどうかを選択するところになります。

わたしは、トップは不要だと思ったので、トップシェアボタンのチェックは外しました。

ボトムは、シェアボタンが主張しすぎないようにボタンカラーを「ブランドカラー(白抜き)」でシンプルに変えました。
あとは、カラム数変更で、横一列に綺麗におさまるように直した感じです。

4.SNSフォローボタンの調整。コクーン設定→SNSフォロー

フォローボタンは、プロフィールのユーザー設定にURLを入力すると増えるようになっています。

運用中のSNSもフォローして欲しい時は、表示させておくといいでしょう。

無くてもいい場合は、フォローボタンの表示のチェックを外してください。

わたしの設定では、フォローボタンの表示がありで、ボタンカラーをブランドカラー(白抜き)にしました。

5.投稿者名が表示されるのを消す。コクーン設定→本文

本文の設定を開くと一番下のところに「投稿関連情報」がありますので、そこの投稿者名の表示のチェックを外せば投稿者名は消えます。

あと、ついでにわたしは「更新日の表示」のチェックは外しました。

6.プロフィールの変更方法。ユーザー→プロフィール

プロフィール説明を入力します。

説明文はHTMLタグ入力ができますので、タグを入れると画像リンクやボタンリンク・テキストリンクをつけることができます。

プロフィール画像に画像をアップロードすると、プロフィール画像が入ります。

※わたしは、WordPress.comに連携してGravatarが入っているので、そちらの画像が表示されています。

7.カテゴリー表示をボックスメニューにします。

最初にサイドバーに表示させるカテゴリーをメニューで作成します。

ダッシュボード画面から外観にマウスを合わせてメニューをクリック。
新しいメニューの作成をします。

メニュー構造にカテゴリーを追加して「メニューを保存」をクリックしたら、ウィジェットに移動します。

ウィジェットを表示させると、サイドバーという項目があるので、そこに「【C】ボックスメニュー」を追加していきます。

ボックスメニューの追加をすると、上記のようなウィジェットが入ります。
まず、タイトルをつけてください。(例えば、カテゴリーとかメニュー)
メニュー名に、作ったメニューを選択します。

ボックスメニューを表示させた時のアイコンの変更は、メニューからCSSクラスオプションを追加します。

アイコンはこちらのサイトから探します。
Font Awesome (https://fontawesome.com/) のサイト

CSS class(オプション)がないときは、上の方にある表示オプションから「CSSクラス」にチェックを入れるようにしてください。

これをすると、このようなメニューが出来上がります。

ワードプレスブログ初心者さんのための「ブログ記事書き方動画講座」

Cocoonカスタマイズ3:モバイル表示

この動画の内容を見ていただくと、下記のような感じにモバイル表示も整えることができます。

Before

After

カスタマイズしたところはこちら

1.コクーン設定→モバイル

モバイルメニューの変更ができるので、ここからヘッダーとフッターのモバイルボタンを表示させるかどうかを変更してください。

わたしは、ヘッダー・フッターモバイルボタンを選択しました。

次に、モバイルボタンの設定で、ロゴを表示するのチェックを外しました。

そうすると、PCで表示されているタイトル部分が消えますので、ヘッダーボタンが見やすくなります。

2.ウィジェットでモバイルしか表示されない項目を追加

ウィジェットを開いて、コンテンツ下部に「【C】テキスト(モバイル用)」を追加していきます。

テキストに入れ込むショートコードを公式サイトから探してきてください。

人気記事リストショートコード:コクーン公式サイト

ボックスメニューショートコード:コクーン公式サイト

公式サイトから探したショートコードをテキストに追加します。

わたしが使ったショートコードはこちら↓

わたしの表示と同じようにしたい場合はこちらをコピペで使ってください。

【ボックスメニュー】

[box_menu name="サイドバーメニュー"]

※サイドバーメニューという名前は、ご自身で作ったメニュー名になるので、そこは変更してください。

【人気記事】

[popular_list days="all" rank="1" pv="0" count="5" type="large_thumb" cats="all"]

3.フッターモバイルボタンのカスタマイズ

まず最初に、外観→メニューから新しくフッターモバイルボタンに設置するためのメニューを作ります。

※メニューを作る時は、フッターモバイルボタンというチェックを忘れないでください。

この作ったメニューに表示したい項目を追加します。

コクーンには、モバイルボタンコマンドというのを追加するだけで簡単にモバイルフッターのアイコン入りのものが挿入できます。

画像引用元:コクーン公式サイト

独自のものを入れたい時は、このような感じで、CSSクラスオプションにアイコンのコードを入力します。

アイコンはこちらのサイトから探します。
Font Awesome (https://fontawesome.com/) のサイト

こちらの設定が完了するとこのように、モバイルフッターがオリジナルのものになります。

4.モバイルヘッダー・フッターのカラー変更

モバイルのヘッダーとフッターのカラーを変更するには、CSSの追加をします。

外観→カスタマイズをクリックします。

そして、追加CSSを開きます。

そこに必要なCSSコードを入れます。

CSSコードはこちらをコピペで使ってOK!

/*フッターモバイルメニュー変更*/
.mobile-menu-buttons {
        background:rgba(201, 152, 139,0.9);
/*フッターメニューの背景を半透明化*/
}

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
        background:rgba(201, 131, 130,0.9); 
/* 背景色 */
        color: #fff; /* 文字の色 */
}

/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, 
/*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
        color: #fff; /* ここは同じ文字色を */
}

カラーコードはご自身がお好きなカラーに変更してください。

カラーコードは、RGBカラーコードを調べられるこちらのサイトから
【RGBと16進数カラーコードの相互変換ツール】

ちょっと難しいかもしれませんが、やってみてください!!

※CSSを追加するので、もしもの時に備えてバックアップは忘れずに♪

>> WordPressのバックアップをプラグインを使用せずに行う方法

パソコンが苦手だし、自分ではちょっとできないという方は、WordPressスポットサポートというサービスがあるので、ご活用ください。

Cocoon高度なカスタマイズ

「コクーン」の見た目をもっとオリジナルに変えたいという場合は、CSSコードを追加したら、可能になります。

このカスタマイズに関しては、動画で観ていただく方が分かるかと思いますが、どうしてもCSSコードが見えづらくなっております。

というわけで、こちらにコピペ可能なCSSコードを貼っておきますので使ってチャレンジしてください(^O^)/

CSSを追加する時は、表示がおかしくなったりすることもありますので、必ずバックアップを取るようにして下さい。

SNSシェアとSNSフォローボタンを丸にする方法

デフォルトで入っているボタンになると、結構目立ってしまうので、円形にカスタマイズしたいと思います。

Before

After

まずアイコン横のキャプションを消すコードを入れます。

.button-caption{
    display:none;
}

SNSシェアとSNSフォローボタンを円形にするためのコードを入れます。

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

モバイルのアピールエリアを非表示にする方法

/* アピールエリア */
@media screen and (max-width: 769px) {
div.appeal-in {
display: none;
}
}

モバイルのアピールエリアの表示の高さを変更する方法

/* アピールエリア */
@media screen and (max-width: 769px) {
div.appeal-in {
	height: 200px;
}
}

モバイルのアピールエリアの画像をPCとは違う画像にする方法

/* アピールエリア */
@media screen and (max-width: 769px) {
.appeal {
    background-image: url(https://yuka001.xsrv.jp/test/wp-content/uploads/2021/09/5ee0413fd0b900fd88c86a17ed57f407-1.png);
	height: 335px;
}
}

urlの後ろの()の中には表示させたい画像のURLを入れ込みます。

そして、モバイルで実際に表示を確認したら、表示高さの調整をしてください。
表示高さの変更は、height: 335px; の部分の数字を変更したらOKです♪

見出しをリセットさせるためのCSSコード

デフォルトの見出しを丸っとカスタマイズする方法になります。

/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
}

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

一度リセットのCSSコードを追加したら、その上から新しいデザインを入れていく流れです。

見出しのデザインはこちらのサルワカさんのサイトを見てください。

>> CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

RGBカラーコードを調べる時はこちらです。

>> RGBと16進数カラーコードの相互変換ツール

以上が、高度なカスタマイズになります。

ちょっと難しいかもしれませんが、大体コピペでOKかと思います(^O^)/

もし、どうしてもCSS追加コードとかの書き換えが分からないようでしたら、スポットサポートも行っていますので、サポートをご活用ください!!

>> スポットサポートの詳細はこちら

まとめ:CocoonはWordPressの無料テーマですが超優秀です!!

今回は、ブログ初心者さんでWordPressテーマ「Cocoon(コクーン)」のカスタマイズにお困りの方向けに、動画入りで詳しくカスタマイズについて解説をしました。

Cocoonは無料テーマですが、かなり優秀なテーマです。

ブログでアフィリエイトをしたいと思っている方でしたら、十分Cocoonでできるのではないかと思います。

最初は、WordPressの操作に難しく感じることがあるかと思います。ですが、触ってみないことには慣れていきません。

苦手意識があっても積極的にワードプレスを触っていくようにしましょう。

この記事を読むことで、あなたのWordPressが魅力的に変身して、うまくブログで収益化できることを楽しみにしております♪

WordPressの見た目を整えたら、その後は、作ったワードプレスにブログ記事をアップする作業になります。

始めてブログ記事を書く初心者さんにおすすめの記事があります。こちらです。

> ブログ記事を書くのにおすすめのツールを紹介!時間がなくてもスムーズに記事を書く方法

> ブログを書く時間がない主婦向け!ブログ記事を書くコツとは?

> 読まれるブログ記事の書き方テンプレートを解説!現役ブログ講師が教えます!!

> 徹底解説!ブロックエディター「Gutenberg」基本の使い方!超初心者さんも間違いなく使えるようになる!

ワードプレスコミュニティ

ワードプレスの構築を1人で頑張るのが不安な方に、ワードプレス専門のコミュニティ「マスタープレス」をメルマガ登録者さん限定にご案内しています。

\登録無料!配信解除は自由!/

シェアしてね♪


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

アフィリエイトメール講座では、パソコン知識も何もないノースキルの主婦がブログで稼ぐために知っておきたい基本的なことがメルマガで届きます。

今、「ブログで稼ぐってどういうことなんだろう?」とか、「ブログ記事を書いててもイマイチ反応がない、伸びない・・・」とか

このように思っている方は、アフィリエイトメール講座にご登録ください。

メール講座の登録は無料!配信解除はいつでもOK! 登録はこちらです↓


ABOUT US

ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>