ただいまの人気記事はこれ!おすすめ記事いろいろ

【Cocoon】おすすめカスタマイズまとめ【コピペでかんたん】

Cocoon
当サイトでは記事内に広告を掲載しています。

WordPressテーマ「Cocoon」は様々なカスタマイズができます。

この記事では、Cocoonを使っている方におすすめのカスタマイズをまとめました。

どれもこのサイトで実際に使っているものばかりですよ!

コピペでできますので、Cocoonをお使いの方ならどなたでもかんたんにカスタマイズすることができます。よかったら参考にしてみてください。

まずはCocoonの基本設定をチェック!

サイトのパフォーマンス上げるために、まずはCocoonの基本設定をおさえておきましょう

ホームイメージの設定

Cocoonを使い始めたときに、見落としやすいのが「ホームイメージ」の設定です。自分のサイトらしいホームイメージを設定してみましょう。

【ブログカード】Cocoonを使い始めたら、ホームイメージを忘れずに設定しよう
WordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。 たとえば、こんな感じでURLを入力すると このよ...

Cocoonの高速化設定

Googleがサイトの表示速度を重視するようになり、「いかにページを速く表示するか」が重要になりました。

Cocoonの「高速化」機能や、プラグインを使ってサイトを高速化してみましょう。

【Cocoon】サイト高速化のためにやってみたこと│設定とおすすめプラグイン
このところ、「サイトの表示スピードが遅いなあ」と感じることが多かったので、Cocoonの高速化設定を見直してみました。 その結果、Googleの「PageSpeed Insights」で、パソコンは...

Cocoonを見やすくするカスタマイズ

Cocoonのデザインをカスタマイズして、見やすく&わかりやすくしてみましょう

カテゴリ表示にアイコンや線を入れる

サイドバー(サイドウィジェット)のカテゴリ表示は、ぜひカスタマイズしたい項目です。アイコンや線を入れると、とても見やすくなります。

【Cocoon】カテゴリーにアイコンや線を入れて見やすくするカスタマイズ
WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示は、非常にシンプルなデザインになっています。 が、区切り線などがないため、カテゴリーの数が増えてくると、見づらくなることがあり...

カテゴリ表示をコンパクトにする

Cocoonデフォルトのカテゴリ表示は、行間が広めになっています。表示をコンパクトにすると、見栄えがグッとよくなります。

【Cocoon】カテゴリーの行間や文字サイズを変えて、コンパクトにするカスタマイズ
WordPressテーマ「Cocoon」のサイドバーにカテゴリーを表示させると、行間が広いことが気になる方もいるかと思います。 カテゴリー数が少ないうちはよいのですが、増えてくると縦に間延び...

サイドバーのデザインを変えるカスタマイズ

サイドバーの見出しを自分好みにカスタマイズする方法です。サイドバーのデザインを変えると、サイトの見栄えがガラッと変わります。

【Cocoon】サイドバーの見出しをカスタマイズする方法いろいろ
今回は、Cocoonのサイドバーの見出しをカスタマイズする方法をお届けします。 Cocoonのサイドバーは、初期設定ではとてもシンプルなデザインになっています。 この見出しの色やデザインを、自...

ページネーションのカスタマイズ

ページネーション(ページ送り)は、ぜひカスタマイズしたい項目の1つです。コピペでかんたんにデザインを変えられます。

【コピペでかんたん】Cocoonのページネーションをカスタマイズしてみよう
WordPressテーマ「Cocoon」を使い始めたら、ぜひカスタマイズしたいのが「ページネーション」です。 ページネーションとは、記事一覧などの下に表示される「別ページへのリンク」のことです。 ...

「ボックス(白抜き)」の枠の色や太さを変える

Cocoonのビジュアルエディタには、囲み枠をかんたんにつけられる「ボックス(白抜き)」機能がついています。その枠の色や太さを自分好みに変えるカスタマイズです。

【Cocoon】ボックス(白抜き)の枠の色や太さを変えるカスタマイズ
WordPressテーマ「Cocoon」では、ビジュアルエディタの『スタイル』から『ボックス(白抜き)』を選択すると、囲み枠を入れることができます。 ・・・が、初期設定のままだと、枠線が太く感じ...

リスト(箇条書き)の点を画像にする

リスト(箇条書き)の点を画像にするカスタマイズです。チェックマークなど、好きな画像に置きかえることができます。

【Cocoon】リスト(箇条書き)の点を画像にするカスタマイズ
WordPressテーマ「Cocoon」は様々なカスタマイズができます。 今回は、リスト(箇条書き)の「点」をチェックマークにしてみました。 簡単なカスタマイズですが、こうした装飾を入れるだけ...

Cocoonのこだわりカスタマイズ

細かいところにもちょっぴりこだわると、ユーザーにやさしいデザインになります

固定ページの日付を非表示にする

「お問い合わせ」や「プロフィール」など、デザイン的に日付を表示しないほうがいいページがあります。そんな時におすすめのカスタマイズです。

【Cocoon】固定ページの日付(投稿日・更新日)を非表示にする方法
WordPressテーマ「Cocoon」の固定ページの日付を非表示にしてみました。 消したのはこの部分「投稿日と更新日」のところです。 日付表示が消えると、このようにすっきりとした表示にな...

目次の色だけを変える

Cocoonは記事に目次を挿入することができます。初期設定でもバランスのいいデザインで、色を変えるだけでもかなり雰囲気が変わります。

【Cocoonの目次】デザインはそのままで、背景・枠・文字の色だけを変える方法
WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。 バランスのいいデザインなので、「この形はくずさずに、色だけを変...

CSSが反映されない時は

「コードを追加したのにCSSが反映されない・・・」という質問をいただくことがあります。CSSが反映されない場合の対処法をまとめています。

【Cocoon】CSSが反映されない場合の対処法
WordPressテーマ「Cocoon」は、子テーマの「style.css」にコードを追加するだけで、様々なカスタマイズができます。 当サイトでもいろいろなカスタマイズ方法を紹介していますが、時々「...

そのほかの設定やカスタマイズ

Google AdSenseの関連コンテンツを表示する

Google AdSenseの関連コンテンツ広告が使えるようになったら、Cocoonで表示させてみましょう。

【Cocoon】Googleアドセンスの関連コンテンツを設置する方法
今回は、WordPressテーマ「Cocoon」にGoogleアドセンスの「関連コンテンツ」を設置する方法をお届けします。 「関連コンテンツ」とは、記事と関連した広告がセットになって表示され...

Simplicity2からCocoonに移行した方は

前テーマ「Simplicity2」からCocoonに移行した方は、次の設定をしてみましょう。Simplicity2から変わった部分がいろいろあります。

これでOK!Simplicity2からCocoonに移行した時にやるべきこと
Simplicityの後継テーマCocoonが公開されました。 Simplicity2からCocoonへの移行を考えている方もいるかと思います。 というわけで今回は、Simplicity2から...

まとめ

今回は、Cocoonを使っている方におすすめのカスタマイズをお届けしました。

紹介したコードは、実際にこのサイトで使っているものばかりです。どれも子テーマに貼るだけですので、どなたでもかんたんにできます。

よかったら参考にしてみてください。

\ Cocoonユーザー必見! /

Cocoon記事一覧

スポンサーリンク
Cocoon
ゆずゆろぐ。の本が出ました!
ゆずゆろぐ。の本が出ました! 完全書きおろし、Amazonで販売中です。興味のある方はぜひどうぞ!
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。
タイトルとURLをコピーしました