【筆者体験ベース】おすすめ副業10選>>>

【目的別】Cocoonカスタマイズ14選【初心者でも簡単!】

Cocoon初心者カスタマイズ記事アイキャッチ
とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。
※本記事にも触れてますが現在は、法人たててやっております。

ブログ開設1年、、、当ブログはずっとCocoonで運営してきました。

デザインやレイアウトを変更しまくり、都度書いてきたカスタマイズ記事もたまったので目的別にまとめました。

基本Cocoonのデフォルトか、コピペでできるものばかり。

初心者の方でもできるカスタマイズですので、Cocoonユーザーの方の参考になればうれしいです。

実際にhtml&cssの知識がなかった僕が、ググり格闘しながら実装してきたカスタマイズです。どんな方にも再現性が高いです。

本記事で叶えられるCocoonユーザーの願い
【カスタマイズ編】
  • トップページをサイト型にしたい
  • サイドバーの表示をページごとに変えたい
  • 数字付きリストを色付きにしたい
  • 目次をお洒落に見やすくしたい
  • おすすめ記事を目立つ場所に配置したい
  • もっと早く表示させたい
  • Twitterのタイムラインを組み込みたい
  • リンク広告を貼りたい
  • 好きな色を追加したい
  • 押したくなるボタンにしたい
  • ボックスメニューを設置したい
【カスタマイズ以外】
  • 長く使ってる人のCocoonのレビューを聞きたい
  • 有料テーマとの優劣が知りたい(SWELLと比較)
  • 意外にムズいアフィリエイトタグ・リンクの貼り方を知りたい

各記事からのリンクで、詳細ページに飛ぶ構成です。
下の目次を開いて、一覧から目的別に探すのが早いです。

Cocoonカスタマイズ1:トップページをサイト型に

Cocoonカスタマイズ1:トップページをサイト型に

>>>Cocoonトップページのカスタマイズ【3ステップでサイト型】

Cocoonのトップページを過去記事やカテゴリー別に並ぶサイト型にしたいなら、この記事です。

Cocoonのトップページのカスタマイズ記事はググれば沢山出てきますが、本記事は初心者ユーザーさんから高い評価をもらってます。
(記事内でユーザーさんの声を紹介させてもらってますm(__)m)

Cocoonカスタマイズ2:サイドバーをページ毎に変える

Cocoonカスタマイズ2:サイドバーをページ毎に変える

>>>Cocoonのサイドバーをカスタマイズする【簡単です!】

「人気記事」や「アクセスランク」がトップページとカブったことから、必要性にかられて着手。

ページごとに、サイドバーの表示ウィジェットを変更する手順を解説してます。

Cocoonカスタマイズ3:寂しい数字リストを華やかに

Cocoonカスタマイズ3:寂しい数字リストを華やかに

>>>Cocoon数字付きリストの作り方【レスポンシブで壊れない!】

WordPress標準のリストって、なんか寂しいんですよね。
Cocoonなら「アイコンリスト」で「・」は、下記のような表示に変更できます。

Cocoonアイコンリスト画像

ただ数字リストがデフォルトしかないので作りました。
数字リストはブログでは重宝しますから。

Cocoonカスタマイズ4:カスタム目次でユーザビリティUP

Cocoonカスタマイズ4:目次でユーザビリティUP

>>>Cocoonの目次をカスタマイズ【コピペでスマホでもキマる!】

目次も表示形式はCocoon設定からさまざま選べますが、デザイン的にちと寂しい。

ユーザビリティ的にも目次は重要なので、イジくりました。

Cocoonカスタマイズ5:高速化設定しよう

Cocoonカスタマイズ5:高速化設定しよう

>>>Cocoon高速化設定してる?【亀ブログじゃ読者が帰る】

Cocoonはシンプルなデザインもあって、表示が速いテーマです。

ただ当ブログ、ページスピードを測ってみると悲惨な数値が…。
なんとかCocoonのポテンシャルを取り戻すため、高速化を目指した記事。

表示速度が「なんか遅いかも…」と悩むユーザーさんは是非。

Cocoonカスタマイズ6:おすすめカードで推し記事プッシュ

Cocoonカスタマイズ6:おすすめカードで推し記事プッシュ

>>>Cocoonヘッダー下には「おすすめカード」【キレイな玄関を!】

Cocoonの「おすすめカード」を使えば、見てもらいたい記事やカテゴリーを読者にプッシュすることができます。

これが無料でデフォルト実装できるんだから、神。

Cocoonカスタマイズ7:Twitterタイムラインを表示しよう

Cocoonカスタマイズ7:Twitterタイムラインを表示しよう

>>>CocoonにTwitterタイムラインがあるとき〜!

ブログとTwitterは、同じテキストベースと合って相性がいいです。

ブログにTwitterタイムラインがあれば、SNSとの導線が太くなります。
「ブログ×SNS」の相乗効果を高めましょう。

Cocoonカスタマイズ8:アドセンス「リンク広告」を貼る

Cocoonカスタマイズ8:アドセンス「リンク広告」を貼る

>>>CocoonでGoogleアドセンス・リンク広告を貼る【廃止は嘘】

Googleアドセンスの「リンク記事は廃止」との記事を見て諦めていたんですが、”だめもと”でやってみると実装できちゃいました。

収益はさておき、なんかあるとカッコいいですよね、リンク広告。

Cocoonカスタマイズ9:パレットにカラー追加

Cocoonカスタマイズ9:パレットにカラー追加

>>>【Cocoon】カラーパレットに好きな色を追加する【6種増!】

デフォルトでCocoonはカラーパレットが豊富なんですが、さらに欲しい色を追加することができます。
これで実質、使えない色はないです。

Cocoonカスタマイズ10:影つきボタンで押したくなる

Cocoonカスタマイズ10:影つきボタンで押したくなる

>>>Cocoonのボタンを「思わずポチる」感じに変える方法

アフィリエイトボタンが押されないのを、完全にCocoonのせいにして着手したカスタマイズですm(__)m

ふわりと浮かせて「なんか押したくなる」ボタンにしました。

Cocoonカスタマイズ11:ボックメニューに託したサイト回遊率

Cocoonカスタマイズ11:ボックメニューに託したサイト回遊率

>>>Cocoonボックスメニューを”イケメン”カスタマイズ→「帰さないゼ」仕様にした

回遊率アップ、直帰率ダウンのために、ボックスメニューを設置しました。

「補色」というカラールールを用いて、目立たせます。


以上が、これまで当ブログが行ってきたCocoonのカスタマイズ記事です。

各記事で、説明通りやっても求める仕様にならなかった場合
→下部の問い合わせか、TwitterのDMより、いつでもご相談ください。
一緒に解決させてもらいます!

コピペでできるって言われても、そのコードを見るだけで意味不明すぎて萎える、、、

って方には、WordPress有料テーマをおすすめします。

Cocoonはユーザー側に育てることを求めるテーマでもあります。
(Cocoon製作者のわいひらさんも言及してます)
どうしてもカスタマイズに、多少のプログラミング知識が必要になってきます。

有料テーマだとこれまでにご紹介したカスタマイズが、ボタン一つみたいなことがあります。

カスタマイズが簡単なおすすめ有料テーマは下記で詳しく。
>>>WordPressおすすめテーマ6選
打ち消し線の理由↓↓↓

最近、別サイトで運営するブログでSWELLを使い始めたんですが、正直、最高です。
使用感は、どのWordPressテーマをも凌駕します。
>>>SWELL公式ページはこちら

※CocoonとSWELLの比較記事へのリンクは、当記事の最後から2番目にあります。

【Cocoon番外1】1年使った僕のCocoonガチレビュー

【Cocoon番外1】1年使った僕のCocoonガチレビュー

>>>Cocoonの評判は?向かない人もいるよ【1年使った僕のガチレビュー】

Cocoonをイジくりまくって運営してきた僕が、利用1年の期にガチレビューしました。

無料から万人に受けると思われるCocoonですが、その実、中級者〜向きだったりします。

【Cocoon番外2】有料テーマに勝つ点、負ける点

【Cocoon番外2】有料テーマに勝つ点、負ける点

>>>CocoonになくてSWELLにあるもの5つ、SWELLになくてCocoonにあるもの3つ

僕が別サイトで使用するWordPress有料テーマ・SWELLとの比較記事です。

実際に比較すると、Cocoonが優れてる点もあるんですよね。

SWELLのような素晴らしいテーマと、無料テーマながら渡り合うCocoonってスゴイな、と改めて感服しました。

【Cocoon番外3】Cocoonアフィリエイトタグ・リンクの貼り方3つ

>>>Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】

アフィリエイトタグの貼り方って、意外につまづきポイントですよね。

htmlコードの直貼り、2種のボタンリンク作成の手順を、全画像つきで紹介です。

【目的別】Cocoonカスタマイズ14選【初心者でも簡単!】:まとめ

まとめ2

本記事がCocoon初心者ユーザーの方のお役に立てれば、うれしいです。

本記事を見て、Cocoonをカスタマイズした方がいれば是非、Twitter(@blue_chikippaa)でメンション付けるかDMで教えてください!

のぞきに行って、当ブログかTwitterでご紹介させてもらいます(^^)

コメント待ってます!

タイトルとURLをコピーしました