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

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

産経新聞社サンスポ記者として、Jリーグ、プロ野球、オリンピックなどを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在はWeb制作会社の代表の傍ら、ブロガーとしていろいろ書きながら生きてます。

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

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

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

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

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

当ブログで叶えられるCocoonユーザーの願い
【Cocoonカスタマイズ編】
【Cocoonカスタマイズ以外】

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

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カスタマイズ12:必須プラグイン10個

Cocoonカスタマイズ12:必須プラグイン10個

>>>Cocoon必須プラグインはこの10個【入れないと〇〇になる視点】

Cocoonはデフォルトで高機能なWordPressテーマですが、プラグインの補完でさらにパワーアップします。必須です!


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

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

コード見るだけで白目むくって人は

できない…。
コードってのを見るだけで頭痛がするんだよ。

Cocoonはユーザーが育てるテーマです。
思い通りに設計するには多少のプログラミング知識が必要になります。

僕から対応策を提案するなら、こちらのいずれか。
①カスタマイズが容易な有料テーマを選ぶ
②プログラミングを学ぶ

もちろん①が簡単ですが、プログラミングがわかるとCocoonは100倍楽しい。
どうせなら②の「学び」に投資した方がいいですよね?

※なんと0円プログラミングスクールがあります。
TechAcademyは1週間の無料体験があります。
無料体験カリキュラムでは『天気予報アプリ』の作成を通じてWebアプリケーションの基礎が学べます。
無料なのでとりあえず試してみるのが良いかなと思います。
»TechAcademyの無料体験はこちら

【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ユーザーの願い
【Cocoonカスタマイズ編】
【Cocoonカスタマイズ以外】

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

まとめ2

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

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

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

Cocoon
スポンサーリンク
この記事を書いた人
とち

★2020年産経新聞社を退職→Web制作・マーケティング会社を設立
★ブログ、デザイン、スポーツ(サッカー&NBA)を愛する39歳。
★いろいろ書きながら、やんちゃ息子2人と陸ガメと鬼嫁と京都に生息中。
★副業を推奨するファイナンシャル・プランナー(FP2級技能士)でもあります。

「良い記事」と思ったら拡散を!
副業・会社脱出ガイドtochiblog〜元スポ新聞記者の編集室〜

ご意見ご感想ぜひ!

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