おしゃれな見た目でモチベを上げる為の、WordPressテーマ「Cocoon」をカスタマイズする方法を解説!
WordPressテーマをCocoonにしたけど、見た目がちょっとな・・・と思う方は是非チェックしてみて下さい。
ちなみに、今回カスタマイズする項目は以下の通りです。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
とりあえず全部やっておけば、それなりの見た目にできますよ~。
![](https://hinakira.com/wp-content/uploads/2021/09/ブロガーチェーン-1-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2021/09/ブロガーチェーン-1-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
![burogu-aikon](https://hinakira.com/wp-content/uploads/2022/07/burogu-aikon-1.jpg)
![burogu-aikon](https://hinakira.com/wp-content/uploads/2022/07/burogu-aikon-1.jpg)
WordPressテーマ「Cocoon」カスタマイズの例
![Cocoonカスタマイズ](https://hinakira.com/wp-content/uploads/2022/05/Cocoonでカスタマイズ-1.png)
![Cocoonカスタマイズ](https://hinakira.com/wp-content/uploads/2022/05/Cocoonでカスタマイズ-1.png)
今回は、こんな感じのスタイリッシュな見た目のデザインを、Cocoonで実現します。
カスタマイズする前に準備するもの
スタイリッシュな見た目のデザインにする為には、いくつか準備するものがあります。
準備するものは、以下のとおり。
- ロゴに使う画像(なくてもOK)
- メインとなる画像
- おすすめカード用の画像
- プロフィール用の背景画像
- プロフィール用のアイコン
- アイキャッチ画像
上記のとおり、見た目を整えるには、画像が最重要となります。
なお、画像を用意するのに一番オススメなのは「Canva
プロフィール用のアイコンも、あなたの印象を決定づける為、重要です。無料では良いアイコンは作れないので、「ココナラ
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
僕もココナラで2回ほど依頼しました。
いろんな種類のアイコンがあって、見てるだけでも楽しいですよ。
Cocoonトップページのカスタマイズ
では、トップページのカスタマイズ方法を解説していきます。
ヘッダーロゴ
![ヘッダーロゴ](https://hinakira.com/wp-content/uploads/2022/05/ヘッダーロゴ-2.jpg)
![ヘッダーロゴ](https://hinakira.com/wp-content/uploads/2022/05/ヘッダーロゴ-2.jpg)
ヘッダーのタイトルですが、できればロゴ画像を準備しましょう。
画像がなくてもタイトルの設定はできますが、デザインのバランスが取りにくいので・・・。
画像であれば、サイズや見た目も自由自在。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
ここでも、「Canva 」という画像ツールが有用で、超簡単にロゴ画像を作成できますよ。
ヘッダーロゴの設定方法は、下記です。
「Cocoon設定」→「ヘッダー」→「ヘッダーロゴ」に画像を設定→「ヘッダーロゴサイズ」でサイズ調整→「ヘッダー全体色」で背景のカラーを調整→「変更をまとめて保存」
ヘッダーメニュー
![ヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/05/ヘッダーメニュー-2.jpg)
![ヘッダーメニュー](https://hinakira.com/wp-content/uploads/2022/05/ヘッダーメニュー-2.jpg)
ヘッダーメニューは、重要な記事へ読者を誘導できる重要なものです。
それと、SEO的にも強まりやすい傾向があります。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
設定方法について、詳しくは下記を見て下さい。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonヘッダーカスタマイズ-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonヘッダーカスタマイズ-300x158.jpg)
メイン画像(アピールエリア)
![メイン画像](https://hinakira.com/wp-content/uploads/2022/05/メイン画像-1.jpg)
![メイン画像](https://hinakira.com/wp-content/uploads/2022/05/メイン画像-1.jpg)
メイン画像(メインビジュアル)は、ブログの印象を決める「顔」です。
ここがダサイと、記事の中身まで疑われる可能性すらありえます。人も、第一印象が大事といわれているように、当然ブログでも第一印象は大事です。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
当サイトの雰囲気が好きで、ピンタレスト、YouTubeまで見てくれたって方がいて、見た目がファン化にも役立つと身に沁みました・・・。
ちなみに、カスタマイズ方法は下記をどうぞ。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonヘッダーカスタマイズ-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonヘッダーカスタマイズ-300x158.jpg)
おすすめカード
![おすすめカード](https://hinakira.com/wp-content/uploads/2022/05/おすすめカード-2.jpg)
![おすすめカード](https://hinakira.com/wp-content/uploads/2022/05/おすすめカード-2.jpg)
おすすめカードは、メイン画像の下に配置されるピックアップコンテンツで、最大4つを設定できます。
見た目の良いカード型で設置することで、読者の注意を引き、クリックされやすくなるでしょう。
リンク先にはカテゴリーページ、投稿記事など、自由に設定できます。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
オシャレな画像を使えば、それだけでも雰囲気が良くなりますよ。
おすすめカードの設定方法は以下参照です。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonおすすめカード設定-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonおすすめカード設定-300x158.jpg)
サイドバーのプロフィール
カスタマイズ前
![デフォルトプロフ](https://hinakira.com/wp-content/uploads/2022/05/デフォルトのプロフ-1024x777.jpg)
![デフォルトプロフ](https://hinakira.com/wp-content/uploads/2022/05/デフォルトのプロフ-1024x777.jpg)
カスタマイズ後
![カスタマイズプロフィール](https://hinakira.com/wp-content/uploads/2022/05/カスタマイズプロフィール-1024x805.jpg)
![カスタマイズプロフィール](https://hinakira.com/wp-content/uploads/2022/05/カスタマイズプロフィール-1024x805.jpg)
続いて、サイドバーのプロフィールです。
背景画像があるだけで、グッとオシャレな雰囲気になります。
カスタマイズ方法は、以下の記事を参考にしてくださいね。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
デフォルトでも言うほどダサイわけではないですが、せっかくなのでカスタマイズしておくと吉です。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonプロフィールの設置-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonプロフィールの設置-300x158.jpg)
サイドバーの見出し
![サイドバー見出し](https://hinakira.com/wp-content/uploads/2022/05/サイドバー見出し-1024x653.jpg)
![サイドバー見出し](https://hinakira.com/wp-content/uploads/2022/05/サイドバー見出し-1024x653.jpg)
サイドバーの見出しデザインも、デフォルトではダサイので変更推奨です。
画像のようなデザインには、下記から変更できます。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
サイドバーは、すべての記事に出てくるので見た目は重要。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonサイドバー見出し-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoonサイドバー見出し-300x158.jpg)
トップページのカスタマイズは以上となります。
続いては、投稿記事画面のカスタマイズを見ていきましょう。
Cocoon投稿記事のカスタマイズ
カスタマイズ前の目次・見出し
![デフォルト投稿記事](https://hinakira.com/wp-content/uploads/2022/05/デフォルト投稿記事-1024x711.jpg)
![デフォルト投稿記事](https://hinakira.com/wp-content/uploads/2022/05/デフォルト投稿記事-1024x711.jpg)
カスタマイズ後の目次・見出し
![カスタマイズ目次・見出し](https://hinakira.com/wp-content/uploads/2022/05/投稿記事のカスタマイズ-1024x675.jpg)
![カスタマイズ目次・見出し](https://hinakira.com/wp-content/uploads/2022/05/投稿記事のカスタマイズ-1024x675.jpg)
次は、投稿記事画面でのデザインも変更します。
今回紹介するのは、「目次」と「見出し」ですが、上記の画像で見比べてみて下さい。デフォルトはダサイんですよね・・・。
というわけで、カスタマイズをしておきましょう。
目次
カスタマイズ前
![Cocoonのデフォルト目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88-1.png)
![Cocoonのデフォルト目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88-1.png)
カスタマイズ後
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1-1.png)
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1-1.png)
目次のデザインも変更しておきましょう。
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
カスタマイズ前のものは、やはりちょっとダサイですからね・・・。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次のカスタマイズ-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次のカスタマイズ-300x158.jpg)
見出し(h2・h3)
![見出し](https://hinakira.com/wp-content/uploads/2022/05/見出し-1024x445.webp)
![見出し](https://hinakira.com/wp-content/uploads/2022/05/見出し-1024x445.webp)
次に見出しのデザインです。
実は、見出しのデザインを変更すると、サイドバーの見出しにも影響します。(サイドバーはh3見出し)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
僕はここに苦戦しました。
サイドバーがおかしくなってしまって・・・。
サイドバー見出しには影響させない方法は下記の記事で見てみてくださいね。
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoon見出しのカスタマイズ方法-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/05/Cocoon見出しのカスタマイズ方法-300x158.jpg)
カスタマイズに悩んだら
Cocoonでのカスタマイズが難しいなぁ・・・と思っているなら、当サイトで使用しているWordPressテーマ「SWELL
CocoonではCSSなどのコードが必須ですが、SWELLならCSSは一切使わずにもっとオシャレにできます。
トップページだけでなく、装飾や見出し、目次、プロフィールなど全てにおいてオシャレなので、見た目にこだわりたいなら、絶対使った方がいいWordPressテーマです。
ぜひ、一度SWELLの公式サイトを覗いてみてくださいね。
\ Cocoon開発者もイチオシする有料テーマ /
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/blog-aikon-1-150x150.jpg)
Cocoon開発者が、Cocoonからの移行先として推奨しているテーマでもあります。
Cocoon作者の観点からしても、Cocoonから他のWordPressテーマを乗り換えるなら、現状ではSWELL一択です。
Cocoonから乗り換えるのにおすすめなテーマはこれ。
まとめ|Cocoonカスタマイズでブログをおしゃれに!
今回は、Cocoonをオシャレにする為のカスタマイズ方法について解説しました。
とりあえず、この記事どおりにカスタマイズしておけば、ダサイと思われることは少なくなります。
どれもコピペするだけなので、是非やってみてくださいね。
では、また!
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
当サイト使用テーマ。最高です。
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
- 購入者限定アフィリエイトがあるからテーマで稼げる
- 書きやすくて時短になるから生産性があがる
- ChatGPTとの相性もバツグンで時短が加速
- 誰でも簡単にオシャレなデザインにできる
- 買い切り、複数サイトにバンバン使える
- アプデが多くて進化がスゴイ
- SEOにも強い
- 価格が高い
- 個人開発の不安
- 人気すぎてデザインが被りがち
\ 時短になって生産性が爆上がりするテーマ /
※おしゃれで書きやすくてブログが楽しくなる
コメント