【まとめ】Cocoonで目次カスタマイズ方法を紹介しているサイト

Cocoon目次カスタマイズブログ

こんにちは!
てつごろう(@Te256g)です。

今回は、WordPressのCocoonで目次をおしゃれにする方法を紹介したサイトをまとめました。

こんな方に役立つ記事です
  • WordPressの無料テーマCocoonで、目次をかっこよくしたい。
  • CSSは分からないから、簡単におしゃれにする方法を知りたい。
  • おしゃれな目次の作り方を紹介している記事は多いけど、好みのデザインが見つからない。

目次をかっこよくしたいけど、好みに近いデザインがすぐに見つからないという方も多いと思います。

そこでこの記事では、Cocoonで目次カスタマイズの方法を紹介しているサイトを、完成イメージとともにまとめてご紹介します。

パッと見て自分の好みに近いカスタマイズ方法を探すことができると思います。


 筆者について

僕は元Webディレクターで、現在は個人でWebサイト制作を請け負っています。
Web業界は5年、ブログ運営は1年半ほど。

てつごろう|@Te256g


Cocoonで目次カスタマイズ方法を紹介しているサイトまとめ

公平性を保つためGoogle Chromeのシークレットモードを利用し、Google検索で「cocoon 目次 カスタマイズ」を検索した順位(2020年8月5日時点)の順番でご紹介します。

また、元Webディレクターとしての僕の経験から、それぞれの目次のデザインやカスタマイズ方法について、勝手ながら一言コメントも付けていますので、そちらもご注目ください。

なおこの記事は、各サイトで紹介されているカスタマイズ方法やデザインの優劣を評価するものではありません。

まずは分かりやすいように、各サイトのデザインを一覧でまとめておきますね。

1. ikuzoblogさん

【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ | ikuzoblog
WordPressのテーマ「Cocoon」は、記事に見出しを入れると自動的に目次が作成されます。 目次を作るためのプラグインは必要ありません。 その見出しを作るには、見出しにしたい文をドラッグして「段落▼」から見出し2~6を選びます。 基本的に「見出し1」は使いません。「見出し2」から使用して下さい。 (「見出し1」は...

【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

「目次を太字にする」→「背景や枠線を変える」→「文字の色や大きさを変える」

このように順番に解説されているので、CSSを知らない方、初心者の方にも優しいですね。

Cocoonでの目次の作り方や、目次の番号が重複するトラブルの解決策も。

2. yuji blogさん

【Cocoon】ブログ初心者でもできる『目次』のおしゃれなカスタマイズ【コピペでOK!】
WordPress/Cocoonを使ったブログでの『目次』をカスタマ...

【Cocoon】ブログ初心者でもできる『目次』のおしゃれなカスタマイズ【コピペでOK!】

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

Font Awesomeのアイコンフォントも使っておしゃれなデザインを提案されています。

目次の作り方はもちろん、CSSを追加するときの注意点も書かれているので初心者にも分かりやすいです。

3. unity rightさん

Cocoonの目次をカスタマイズ【シンプルで見やすいデザイン】
cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。

Cocoonの目次をカスタマイズ【シンプルで見やすいデザイン】

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

目次全体、タイトル部分などパーツ毎にCSSコードの説明がされていて、どこで色や余白などを変更できるかまで詳細に解説されているので、自分の好みにカスタマイズする方法もわかります。

最後にコードのまとめと、スマホ向けの調整用コードも。

4. 綾糸.netさん

Cocoonの目次設定とデザインカスタマイズ
Cocoonには目次を表示する機能が標準であるので、プラグインなどを使う必要はありませんが、少しデザインを変更してみました。前提Cocoon設定→目次タブから、表示の設定を行います。設定項目 目次の表示・非表示、表示するページ設定 目次

Cocoonの目次設定とデザインカスタマイズ

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

説明がとてもシンプル。

ページの最後に、色を変更したいときに参考になる別サイトへのリンクがあります。

5. おしゃキミ.comさん

Cocoonの「目次」デザインをシンプルかつオシャレにCSSカスタマイズする
WordPressの無料テーマ「Cocoon」の目次をシンプルかつおしゃれ風にCSSカスタマイズしました。主に目次の位置を中央寄せ、下線を引く、行間の調整などを行っています。コピペ用のCSSコードもあるので自分好みに調整して利用していただければ!

Cocoonの「目次」デザインをシンプルかつオシャレにCSSカスタマイズする

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

こちらもシンプルなデザインですね。

下線を引く、行間を調整するなど、ベースとなるカスタマイズの方法を紹介しています。

「Cocoonの目次関連のクラス名」という見出しでは、関係するクラス名がまとめられています。

6. Y&K Studioさん

【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!
本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っぽく可愛いデザインにしたい方は必見です!

【Cocoon】コピペだけでWordPressの目次をSANGO風にカスタマイズ!

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

目次のエリアに影を付けたり配色もおしゃれですね。

Font Awesomeのバージョンによって別々にコードを用意されているのが親切。

7. 峠の雑記ブログさん

【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
cocoonはプラグインを入れずに設定だけで目次を表示する機能が付いています。そこはとてもありがたいです。けど、めっちゃさっぱりしているのでより自分の思いを詰め込んだ目次にしたいと思い、いろいろ探していたところ見つけました。世の中には親切な

【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

「6. Y&K Studioさん」のページを参考に、このブログの運営者さんがさらにカスタマイズしたコードを紹介されています。

どこを変更すればいいのかが分かる説明も。

目次を設置することの効果も解説されています。

8. WEB-ASHIBIさん

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになりま

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

目次を開いたり閉じたりするときのアニメーションも実装できるjQueryのサンプル付きなのが特徴ですね。

中央寄せにする方法、下線を付ける方法などシンプル目な装飾。

9. MASAa.netさん

【Cocoon】目次をカスタマイズする
目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみました。

【Cocoon】目次をカスタマイズする

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

ピンク色ベースのデザイン。

コードのスタイル一つ一つに説明が書かれているので、どこを編集すればいいのかがわかりやすいですね。

10. ITを分かりやすく解説さん

Cocoonの「目次」をシンプルでおしゃれなデザインにカスタマイズする方法 - ITを分かりやすく解説
Wordpressの無料人気テーマ「Cocoon」の目次をおしゃれでシンプルなデザインにカスタマイズする方法を紹介します。「Cocoon」デフォルトの目次はシンプルでそのまま利用できるデザインですが、より見栄えをよくするためのCSS(スタイルシート)を紹介します。

Cocoonの「目次」をシンプルでおしゃれなデザインにカスタマイズする方法

完成イメージ

Cocoon目次カスタマイズ
てつごろうの一言コメント

ご紹介した中でも特にシンプルですね。

下線や余白を入れて見やすさも抜群です。

CSSを覚えて自分好みのサイトを作りましょう

目次のデザインを独自にカスタマイズしたいとき、見た目ですぐに探せるようにサイトをまとめました。

CSSでは無限にデザインを変更することができますので、まだまだ他にもたくさんのデザインがありますが、今回は検索結果上位10位までをご紹介してきました。

どこを変えればいいのか、詳しく解説しているサイトも多いので、ぜひ参考にしながら独自にカスタマイズしていってください!

CSSを学んで自分好みのデザインにカスタマイズできるようになれば、サイト運営も楽しくなります。

コメント

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