【動画付きで簡単】Cocoonカスタマイズ｜脱初心者できる見た目が綺麗なサイトの作り方！

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

いよいよワードプレスの地味な見た目を変えて綺麗で見やすいブログにしたい！！でも、Cocoonのカスタマイズってどうやったら良いの？

このような疑問を解決する記事を書きました！！

この記事では、WordPressテーマ「Cocoon（コクーン）」のカスタマイズについて、ワードプレスの専門家として活動中のわたしが、動画をメインに初心者さん向けに解説します♪

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

実際に、わたしのブログを見ながらコクーンのカスタマイズをした方は、「この記事のおかげで簡単にカスタマイズができた」と喜びの声をくださいました。

ワードプレスブログが自分の好きなデザインで綺麗に作れると嬉しいですよね！

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

ワードプレスにコクーンをまだ導入していないという方は、こちらの記事を参考に、まずはCocoonを導入してください。
参考：WordPress無料テーマ「Cocoon」導入方法！初心者さん向け図解入り解説！

WordPressテーマ「Cocoon」に関しての記事

WordPress専門コミュニティ
「MasterPress」の主宰をしています！

目次は読みたいところをタップして飛べるよ♪

1 Cocoonカスタマイズについて
2 Cocoonカスタマイズ方法
3 まとめ：CocoonはWordPressの無料テーマですが超優秀です！！

Cocoonカスタマイズについて

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

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

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

なぜなら・・・

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

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

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

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

Cocoonカスタマイズ方法

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

カスタマイズ動画

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

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

Cocoonカスタマイズ１：初期設定など

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

Before

After

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

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

↓

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

↓

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

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

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

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

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

サイトの説明…ここは入れた方がいいので、作っているサイトの概要
メタキーワード…あまり必要はないけど、キーワードを３から5個くらい入れた方がいいかなぁ

メタディスクリプション（チェックをいれる）
メタキーワード（チェックをいれる）

６.コクーン設定→SEO

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

７.コクーン設定→OGP

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

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

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

WordPress専門コミュニティ
「MasterPress」の主宰をしています！

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

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

Before

After

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

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

↓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

↓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress専門コミュニティ
「MasterPress」の主宰をしています！

Cocoonカスタマイズ３：モバイル表示

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

Before

After

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

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

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

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

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

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

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

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

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

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

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

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

【ボックスメニュー】

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

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

【人気記事】

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

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

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

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

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

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

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

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

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

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

モバイルのヘッダーとフッターのカラーを変更するには、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スポットサポート」というサービスをご活用ください。

【スポットサポート】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://------.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追加コードとかの書き換えが分からないようでしたら、スポットサポートも行っていますので、サポートをご活用ください！！

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