tochi執筆本「NFTで趣味をお金に買える」»

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

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

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

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

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

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

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

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

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

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

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

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

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

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

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は10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

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は10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

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

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

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

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

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

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

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

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

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


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

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

【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は10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

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

まとめ2

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

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

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

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。