コクーン(Cocoon)カスタマイズマニュアル完全版

斎藤です。

ブログ、アフィリエイト、投資などで飯食ってます。

前月の報酬は　こんな感じでした。

これから月末にかけての入金を合計すると月間1000万円ほどの報酬です。

アフィリやコンテンツビジネスは、マジ夢があります。

ただ正しいやり方、そして基礎、この2点があれば楽勝で飯食えます。

一昔前ならドヤ顔で自慢のできた年収1億という数字も今では、「ギリギリ」なので実績や収入の話をしませんでしたが 最近はAIツールが進化したお陰で　短い時間で大きな収入に結び付き易くなっています。

AIツールでも、優秀なツールを使えば利益も抜群に伸ばせるので、僕のブログをしっかりチェックしておいてください。

前日少し触れたコクーン(Cocoon)ですが、この記事では、簡単なカスタマイズ方法を解説します。(とは言ってもプログラマーじゃないので　大したことは書けませんが最低限、ブログで稼ぐための必要最低限なことのみ書いてる感じです。)

この記事の通り順番に行うだけでコクーンを利用したワードプレスの基本デザインは完成します。

完成例はこちら。

https://saito-info.com/cocoon

• ↑このサイトと同じような設定までできます。
• お奨めのプラグイン、設定方法も解説。
• あとは記事の更新のみでも良いという状態にできます。

Cocoonのおすすめ基本設定

ワードプレスをインストールしてコクーンをインストールしている状態から解説をしていきます。

まず初めに、Cocoonの基本設定を確認しましょう。

• CocoonChildの有効化を確認
• スキンの設定
• その他SEO対策と、おすすめのCocoon設定
• 全体の見た目のバランスを整える

まずはCocoonの基本設定から始めます。

CocoonChildの有効化を確認することが最初のステップです。WordPressの管理画面の「外観」→「テーマ」から「CocoonChild」が有効化されているか確認してください。

これにより、カスタマイズしても元のテーマが損なわれず、安心して作業が進められます。

次に、スキンの設定を行います。Cocoonには洗練された「スキン」が多数用意されており、これを使うだけでブログのデザインが一気におしゃれになります。

スキンの選択

WordPressのメニューから「Cocoon設定」を開き、「スキン」タブで好みのデザインを選ぶだけでOKです。

この時、アイコン画像にポインターを乗せるとプレビューが確認できます。

ただし唯一の難点は、スキンの場合、カスタマイズができないことです。

もしもスキンを選ぶ場合、好みによりますが　僕は、ヘッダーロゴを使うならヘッダー背景白のものを利用することが　良いと思っています。

ざっと見るとこういうデザインですね！

ヘッダーロゴの背景が白の方が綺麗なヘッダー画像を最も簡単に生成できるはずです。

サイト名、サイトの説明を決める。

さらに、「Cocoon設定」ではSEO対策やその他の細かい調整も可能です。

SEOに強いブログを目指すために、これらの設定を詳しく見直すことをおすすめします。特に、記事のタイトルやメタディスクリプションの設定は検索エンジンの評価に直結します。

一般設定

できればキーワードとサイト名の2種類を加えます。

上記の例では、サイト名とキーワードを意識した名称が混在しています。

たとえば読者に　コクーンLABを覚えて欲しいのに、コクーンLABがサイト名になければ検索されても結果に出てきにくいです。

ヘッダー画像は「コクーンLAB」にしてこのタイトルを入れておけば、

「コクーンカスタマイズ」とか同時にコクーンLABでも検索に引っかかるという戦略です。(キーワードにもよって効果は変わりますが)

ブログのタイトルは必ずしもタイトルタグで設定する名称である必要はないので、ヘッダーロゴ画像は　コクーンLAB　そして　サイト設定では、

cocoonカスタマイズ解説サイト-コクーンLAB

で良いわけです。

サイトのキャッチフレーズは、AIを使えば簡単に生成できます。

※

次に大事なことはパーマリンクです。

パーマリンクの設定

パーマリンクの設定ですが、

基本は投稿名で良いかと思います＾＾

固定ページを予め用意しておく。

本文は空白で良いので３つ投稿しておくとプラグインの設定時にスムーズに入力できます。

デフォルトのものは一度全部削除します。

新規追加で、

• サイトマップ
• プロフィール
• お問合せ

この3つを投稿します。

次にプラグインを挿入します。

プラグインの設定

後でも先でも良いのですが　ブロックエディタの場合ならプラグインは最少に抑えられます。

何が正解という決まりはないですが　僕が入れているプラグイン一覧です。

• Classic Widgets
• Black Studio TinyMCE Widget
• Pretty Links
• table Of Contents Plus
• Sitemap by click5
• XO Featured Image Tools
• Basic User Avatars
• External Links in New Window / New Tab
• Edit Author Slug
• Site Kit by Google

このぐらいです。

プラグインの説明

ブロックエディタを入れててもサイドバー編集はクラッシックエディタで行うためのものが、

• Classic Widgets
• Black Studio TinyMCE Widget

短縮URLツールをお持ちでない場合にはPretty Links

目次機能　table Of Contents Plus

HTML用とXML用のサイトマップ生成プラグイン　Sitemap by click5

最初の画像をアイキャッチ画像にするプラグインがこちら。

XO Featured Image Tools　です。

そして、Basic User Avatars　は　ユーザー設定からプロフ画像などをそのままアップロードできるプラグイン。

External Links in New Window / New Tab　は外部リンクを全て新しいタブで開く設定ができます。

Edit Author Slug　は、ワードプレスでアカウント名バレしないようにするためのプラグインです。※ユーザー設定から可能。

Site Kit by Google　は、Googleのサーチコンソールやアナリティクスやアドセンスと簡単に連携や登録できるプラグインです。

プラグインの新規追加の方法

上記のプラグインは、まずプラグインメニューから新規追加を選びます。

続いてプラグイン名をコピーして、検索するだけです。

インストールをして有効化を選択です。

これをプラグインすべて同様に行います。

プラグインの設定

プラグインの設定は　必要なものと必要なものがありますが、ここで設定を掲載しておきます。

table Of Contents Plus

ここから下部はいじってません。

好みで変更してくださいね＾＾

Sitemap by click5

次にXMLサイトマップ

XMLサイトマップという項目に合わせた設定です。

そして最後に固定ページのサイトマップの投稿部分に　このソースを貼り付けます。

そして保存します。

これでHTMLサイトマップが反映して自動で記事の追加で自動で反映されます。

訪問者はここで全記事一覧を確認できることになります。

XO Featured Image Tools

投稿内の1枚目をサムネイルに自動設定するプラグインですが下記では、固定ページはあえて除外をしています。

次に、ユーザー編集に移動します。

Basic User Avatars と Edit Author Slug

これをしないとユーザー名がすぐに分かります。

ワードプレスのログイン画面でブルートゥ―スアタックみたいな事されると簡単にログインされてしまうので要注意です。

次にプロフィール画像を設定します。

必要情報を入力しましょう。

プロフィールページはさっきの固定ページのURLです。

次にブログ上で表示されるプロフィールを記載します。

HTMLタグが使えます。あまり長くなくてよいです。

詳しい内容は固定ページのプロフィールページに書けば大丈夫です。

見たい人は見に来てくれます。

次は、ユーザーの投稿スラッグを変更します。

これによってユーザー名を調べても分かり難くなります。

カスタム設定で好きな英数字を入力しておけばOKです。

いわゆるハッキング対策です。

説明のないプラグインは初期設定を別にしなくても動作します。

ヘッダーとトップページ記事一覧のカスタマイズ

次に、ブログの第一印象を大きく左右するヘッダーとトップページのカスタマイズについて解説します。

これらのエリアは、多くの訪問者が最初に目にする部分ですので、特に力を入れてデザインしましょう。

• ヘッダーロゴ
• ヘッダーメニュー
• モバイル表示版ヘッダーメニュー

まずはヘッダーロゴからカスタマイズします。

ロゴはブログ全体の顔となる部分ですので、自分のブログにマッチするデザインを選んでください。ロゴ画像は「Cocoon設定」→「ヘッダー」で簡単に変更できます。

ヘッダー画像はどんなものが良いか？

CANVAやフォトショップなどで作成すればOKですが派手な画像は素人臭さがでるため、ロゴ文字とロゴぐらいがちょうど良いです。

ヘッダー画像挿入例

次はグローバルメニューを表示させます。

グローバルメニューの設定

次に外観　⇒メニューに移動します。

これで完了ですね！

ちょっとヘッダー画像がダサいかもですが　数秒で生成した画像なので悪しからず…。

では次にサイドバーです。

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

続いては、ブログのサイドバーのカスタマイズについて解説します。

サイドバーは訪問者にとっての補足情報を提供する重要な部分なので、使いやすく配置することが大切です。

• プロフィール
• カテゴリー
• 検索
• 投稿

最低限これだけであればOKです。

詳細設定入力例

次にそれぞれの入力項目の説明です。

プロフィール

カテゴリ

新着記事

あくまでも僕の設定なので　好みで変更してくださいね＾＾

一先ずこんな感じでしょうか。

あくまでも　ここまでが基本の形です。

プロフィールの文字サイズ変更方法はこちら

あわせて読みたい

コクーン(cocoon)のプロフィール情報の文字サイズを小さくしたい！大きすぎる？ コクーンのプロフィールウィジェットの文字サイズを小さくするのは　どうやれば良いですか？ プロフィール部分の文字のサイズは簡単に変更できます。スタイルシートから...

また事前に、各見出しの前後などに　自動で定型文や、広告パーツなどを埋め込みたい場合のカスタマイズ方法をまとめているので必要な方は、こちらを読んでください。

あわせて読みたい

コクーン(cocoon)見出しの前にプロフィール情報や定型文を加える方法 コクーン(cocoon)のテーマを利用していて、最初の見出しの前に、広告や定型文(プロフィール情報)を入れたい…と思った事はありませんか？ この記事の通りやれば、最初の...

「カスタマイズがうまくいかない…」と感じる方へ

最後に、カスタマイズがうまく進まない方へのアドバイスですが　この記事で書いてる通りの手順を行えば体裁を保てます。

もしも不明な事などがあれば　いつでもLINEから連絡をしてください。

まとめ

Cocoonに限らず、ワードプレステーマは全般的に、ブログのデザインカスタマイズは、基本設定から細部にわたるまで様々な方法があります。

今回ご紹介したカスタマイズ方法を使って、あなたのブログをもっと魅力的に、そして機能的にアップデートしてみてください。

初めて取り組む方でも、これらのステップを一つずつ進めることで、満足のいくブログデザインが実現するでしょう。

今後も記事を書いていきますので、ぜひ参考にしてみてください(^^ゞ