ブログ開設1年、、、当ブログはずっとCocoonで運営してきました。
デザインやレイアウトを変更しまくり、
カスタマイズ記事もたまったので目的別にまとめました。
基本Cocoonのデフォルトか、コピペでできるものばかりです。
初心者の方でもできるカスタマイズですので、Cocoonユーザーの方の参考になればうれしいです。
各記事からのリンクで、詳細ページに飛ぶ構成です。
下の目次を開いて、一覧から目的別に探すのが早いです。
- Cocoonカスタマイズ1:トップページをサイト型に
- Cocoonカスタマイズ2:サイドバーをページ毎に変える
- Cocoonカスタマイズ3:寂しい数字リストを華やかに
- Cocoonカスタマイズ4:カスタム目次でユーザビリティUP
- Cocoonカスタマイズ5:高速化設定しよう
- Cocoonカスタマイズ6:おすすめカードで推し記事プッシュ
- Cocoonカスタマイズ7:Twitterタイムラインを表示しよう
- Cocoonカスタマイズ8:アドセンス「リンク広告」を貼る
- Cocoonカスタマイズ9:パレットにカラー追加
- Cocoonカスタマイズ10:影つきボタンで押したくなる
- Cocoonカスタマイズ11:ボックスメニューに託したサイト回遊率
- Cocoonカスタマイズ12:必須プラグイン10個
- 【Cocoon番外1】1年使った僕のCocoonガチレビュー
- 【Cocoon番外2】有料テーマに勝つ点、負ける点
- 【Cocoon番外3】Cocoonアフィリエイトタグ・リンクの貼り方3つ
- 【目的別】Cocoonカスタマイズ15選【初心者でも簡単!】:まとめ
Cocoonカスタマイズ1:トップページをサイト型に
>>>Cocoonトップページのカスタマイズ【3ステップでサイト型】
Cocoonのトップページを過去記事やカテゴリー別に並ぶサイト型にしたいなら、この記事です。
Cocoonのトップページのカスタマイズ記事はググれば沢山出てきますが、本記事は初心者ユーザーさんから高い評価をもらってます。
(記事内でユーザーさんの声を紹介させてもらってますm(__)m)
Cocoonカスタマイズ2:サイドバーをページ毎に変える
>>>Cocoonのサイドバーをカスタマイズする【簡単です!】
「人気記事」や「アクセスランク」がトップページとカブったことから、必要性にかられて着手。
ページごとに、サイドバーの表示ウィジェットを変更する手順を解説してます。
Cocoonカスタマイズ3:寂しい数字リストを華やかに
>>>Cocoon数字付きリストの作り方【レスポンシブで壊れない!】
WordPress標準のリストって、なんか寂しいんですよね。
Cocoonなら「アイコンリスト」で「・」は、下記のような表示に変更できます。

ただ数字リストがデフォルトしかないので作りました。
数字リストはブログでは重宝しますから。
Cocoonカスタマイズ4:カスタム目次でユーザビリティUP
>>>Cocoonの目次をカスタマイズ【コピペでスマホでもキマる!】
目次も表示形式はCocoon設定からさまざま選べますが、デザイン的にちと寂しい。
ユーザビリティ的にも目次は重要なので、イジくりました。
Cocoonカスタマイズ5:高速化設定しよう
>>>Cocoon高速化設定してる?【亀ブログじゃ読者が帰る】
Cocoonはシンプルなデザインもあって、表示が速いテーマです。
ただ当ブログ、ページスピードを測ってみると悲惨な数値が…。
なんとかCocoonのポテンシャルを取り戻すため、高速化を目指した記事。
表示速度が「なんか遅いかも…」と悩むユーザーさんは是非。
Cocoonカスタマイズ6:おすすめカードで推し記事プッシュ
>>>Cocoonヘッダー下には「おすすめカード」【キレイな玄関を!】
Cocoonの「おすすめカード」を使えば、見てもらいたい記事やカテゴリーを読者にプッシュすることができます。
これが無料でデフォルト実装できるんだから、神。
Cocoonカスタマイズ7:Twitterタイムラインを表示しよう
>>>CocoonにTwitterタイムラインがあるとき〜!
ブログとTwitterは、同じテキストベースと合って相性がいいです。
ブログにTwitterタイムラインがあれば、SNSとの導線が太くなります。
「ブログ×SNS」の相乗効果を高めましょう。
Cocoonカスタマイズ8:アドセンス「リンク広告」を貼る
>>>CocoonでGoogleアドセンス・リンク広告を貼る【廃止は嘘】
Googleアドセンスの「リンク記事は廃止」との記事を見て諦めていたんですが、”だめもと”でやってみると実装できちゃいました。
収益はさておき、なんかあるとカッコいいですよね、リンク広告。
Cocoonカスタマイズ9:パレットにカラー追加
>>>【Cocoon】カラーパレットに好きな色を追加する【6種増!】
デフォルトでCocoonはカラーパレットが豊富なんですが、さらに欲しい色を追加することができます。
これで実質、使えない色はないです。
Cocoonカスタマイズ10:影つきボタンで押したくなる
>>>Cocoonのボタンを「思わずポチる」感じに変える方法
アフィリエイトボタンが押されないのを、完全にCocoonのせいにして着手したカスタマイズですm(__)m
ふわりと浮かせて「なんか押したくなる」ボタンにしました。
Cocoonカスタマイズ11:ボックスメニューに託したサイト回遊率
>>>Cocoonボックスメニューを”イケメン”カスタマイズ→「帰さないゼ」仕様にした
回遊率アップ、直帰率ダウンのために、ボックスメニューを設置しました。
「補色」というカラールールを用いて、目立たせます。
Cocoonカスタマイズ12:必須プラグイン10個

>>>Cocoon必須プラグインはこの10個【入れないと〇〇になる視点】
Cocoonはデフォルトで高機能なWordPressテーマですが、プラグインの補完でさらにパワーアップします。必須です!
以上が、これまで当ブログが行ってきたCocoonのカスタマイズ記事です。
【Cocoon番外1】1年使った僕のCocoonガチレビュー
>>>Cocoonの評判は?向かない人もいるよ【1年使った僕のガチレビュー】
Cocoonをイジくり運営してきた僕が、利用1年を機にガチレビューしました。
無料から万人に受けると思われるCocoonですが、その実、中級者向きだったりします。
【Cocoon番外2】有料テーマに勝つ点、負ける点
>>>CocoonになくてSWELLにあるもの5つ、SWELLになくてCocoonにあるもの3つ
僕が別サイトで使用するWordPress有料テーマ・SWELLとの比較記事です。
実際に比較すると、Cocoonが優れてる点もあるんですよね。
SWELLのような素晴らしいテーマと、無料テーマながら渡り合うCocoonってスゴイな、と改めて感服しました。
【Cocoon番外3】Cocoonアフィリエイトタグ・リンクの貼り方3つ
>>>Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】
アフィリエイトタグの貼り方って、意外につまづきポイントですよね。
HTMLコードの直貼り、2種のボタンリンク作成の手順を、全画像つきで紹介です。
【目的別】Cocoonカスタマイズ15選【初心者でも簡単!】:まとめ

本記事がCocoon初心者ユーザーの方のお役に立てれば、うれしいです。
本記事を見て、Cocoonをカスタマイズした方がいれば是非、Twitterでメンション(@blue_chikippaa)付けるかDMで教えてください!
のぞきに行って、当ブログかTwitterでご紹介させてもらいます(^^)
実際にhtml&cssの知識がなかった僕が、ググり格闘しながら実装してきたカスタマイズです。どんな方にも再現性が高いです。