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

WordPressテーマ「Cocoon(コクーン)」カスタマイズ方法【初心者さん向けに徹底解説!】




読者さん

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

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

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

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

こちらでは、コクーンのカスタマイズについて、ワードプレスの専門家として活動中のわたしが、動画解説をメインにお伝えしますね♪

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

WordPress「コクーン」カスタマイズについて

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

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

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

なぜなら・・・

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

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

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

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

WordPress「コクーン」カスタマイズ方法

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

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

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

「コクーン」カスタマイズ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.コクーン設定→管理者画面

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

「コクーン」カスタマイズ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クラス」にチェックを入れるようにしてください。

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

「コクーン」カスタマイズ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のバックアップをプラグインを使用せずに行う方法

「コクーン」高度なカスタマイズ

「コクーン」の見た目をもっとオリジナルに変えたいという場合は、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;
}
}

見出しをリセットさせるための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追加コードとかの書き換えが分からないようでしたら、スポットサポートも行っていますので、サポートをご活用ください!!

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

まとめ

今回は、WordPressテーマ「コクーン」のカスタマイズにお困りの方向けに、カスタマイズ解説をしました。

最初は難しく感じることがありますが、最初は苦手意識があってもワードプレスを触っていくようにしましょう。

ブログ初心者さんに大事なことは、慣れるまでしっかり頑張ることですので(^O^)/

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

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

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

シェアしてね♪


ブログ記事を書いても一向に成果が出ない!
心が折れそうな思いをするのはもう終わりにしませんか?


登録は無料!解除はいつでも自由! 興味のある方はご登録くださいね!!


ABOUT US

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

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

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

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

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