暮らしプロフィールサイトマップホームブログ【cocoon】目次カスタマイズ!!見やすくシンプルにしよう【CSSコピペでOK】ブログ2020.02.09cocoonはプラグインを入れずに設定だけで目次を表示する機能が付いています。そこはとてもありがたいです。しているのでより自分の思いを詰め込んだ目次にしたいと思い、いろいろ探していたところ見つけました。世の中には親切な人がいるものですね。公開されているCSSをコピペするだけで簡単にカスタマイズできました。この目次、僕がいいなと思うところはH2とH3見出しの文字の濃さが異なるので見やすい見出しが改行されたときにきっちりそろう自分のブログの色に合わせることができる地味に点線の仕切りが見やすさに貢献している僕はとても満足しています。右:カスタマイズ前メリハリがついて見やすくなってますよね。行間もぎゅっとして間延びしなくなりましたさて、では次の項目から早速カスタマイズに入っていきます。このカスタマイズはとても簡単にできますし、丁寧に画像付きで解説していきますので安心して読み進めてください。読んで、あなたのブログの目次も素敵にカスタマイズしていきましょう!事前にバックアップをしていただくことをおすすめいたしますカスタマイズは自己責任でお願いいたします。うまくいかない場合があっても責任はとれませんのでよろしくお願いいたします目次cocoon目次カスタマイズ方法CSSをコピーするCSSをペーストするCSSを自分なりに編集する目次を表示する効果あなたのブログでも検証してみようまとめ:cocoonの目次をカスタマイズしよう関連記事cocoon目次カスタマイズ方法CSSをコピーするでは早速CSSをコピーしていきましょう。Studioさんの【Cocoon】コピペで目次をSANGO風にカスタマイズ!の記事へ飛んでください。Awesome5の人用に2種類のCSSが用意されています。Awesomeふぉんとおーさむは無料で利用可能なWebアイコンフォントのことです。最新バージョンが5で一個前が4です。バージョンによってちょっとCSSの書き方が変わるので2種類準備してくれているんですね。Awesomeが使われています。Awesome4なのか5なのか調べるにはcocoon設定→全体→サイトアイコンフォントを確認ください。Studioの記事にとんだら記事の指示の通りに右上の+ボタンを押してコピーします。Child)が選択されていることを確認スタイルシート(style.css)を選択あいているところ(下のほう)に貼り付けファイルを更新ボタンを押すこれで下のような形と色の目次が表示されるようになります。画像のように表示されない場合はcocoon設定の目次の設定がうまくいってないかもしれません目次表示の深さや目次ナンバーの表示などをいじってみてください。CSSを自分なりに編集するではここからは私がもともとの設定からいじった部分をご紹介していきます。私のブログの目次デザインです。黄色い部分が元と異なっています何か所もありますね。下の3つのことを意識してやっただけです。自分の好みに合わせましたCSSを編集するときは、一個変更したら更新して効果を確かめながらちょっとずつ変えていくのがおすすめです。一気にやると何が気に入らないのか、何が原因でおかしくなってしまったかがわからなくなります。目次を表示する効果これまでは、目次をカスタマイズすることを書いてきましたがここでは目次を表示するとどんな効果があるのか確認していきたいと思います。目次って表示する意味あるの?デフォルトで表示していればいいんじゃない?そんなことを疑問に思っているかたもいると思いますので、ぜひデータで確認しましょう。下の画像は、パソコン表示の時とスマホ表示の時の目次のクリック状況を色で見れるようにしたものです。赤色がたくさんクリックされていて、青色はクリック数としては少ないです。まあクリックされてはいますよね。画像の記事だといまいちですが、目次の部分が真っ赤になっている記事もありますよ。僕のブログでは目次は表示しておこうという結論に至っています。あなたのブログでも検証してみよう僕のブログでは、目次はクリック/タップされていることが証明されていますのでがっつり表示しています。あなたのブログではクリック/タップされるとは限りません。クリックされるかどうかは記事の内容やブログを訪れる人によって全然変わってくる数値です。目次を表示するか目次を閉じておくかそもそも目次を表示しないか判断してみてください。Heatmapを使うと便利ですまとめ:cocoonの目次をカスタマイズしよう本記事では【cocoon】目次カスタマイズ!!見やすくシンプルにしよう【CSSコピペでOK】ということでcocoonにおける目次のカスタマイズ方法と目次を表示する意味について考えてきました。あなたもあなたらしいブログにするならばカスタマイズをしてみたほうがいいのではないでしょうか?頑張って作り上げるブログは愛着もわきますし、目次はクリックされる可能性も大いにあります。当ブログにはcocoonのカスタマイズに関する記事がほかにもありますので、ぜひそちらもご覧になってください。【Cocoon】スマホのヘッダー簡単カスタマイズ!!固定追従は設定変更だけでできる【Cocoon】スマホのヘッダー簡単カスタマイズ!!固定追従は設定変更だけでできるkenjineer0224.comプロフィール峠とうげです。することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理。小さいときはロボット作り屋さんになりたかった。コメントをキャンセルメールアドレスが公開されることはありません。付箋をwindows10パソコンのデスクトップに貼り付ける!アプリ最初から入っているし使い方も簡単です2020.02.12【cocoon】目次カスタマイズ!!見やすくシンプルにしよう【CSSコピペでOK】2020.02.09【雑記ブログ運営報告】8ヶ月目のPV数(アクセス)と収益2020.02.012020.02.04ガソリンスタンド(セルフ)のやり方を初めてでも絶対できるように説明します2020.01.152020.02.22高速バス・夜行バスでの暇つぶし7選!酔わないやつからおすすめします2020.01.092020.02.22アーカイブ2020年2月32020年1月42019年12月92019年11月102019年10月82019年9月62019年8月62019年7月132019年6月13プロフィール峠とうげです。することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理。小さいときはロボット作り屋さんになりたかった。付箋をwindows10パソコンのデスクトップに貼り付ける!アプリ最初から入っているし使い方も簡単です2020.02.12【cocoon】目次カスタマイズ!!見やすくシンプルにしよう【CSSコピペでOK】2020.02.09【雑記ブログ運営報告】8ヶ月目のPV数(アクセス)と収益2020.02.012020.02.04ガソリンスタンド(セルフ)のやり方を初めてでも絶対できるように説明します2020.01.152020.02.22高速バス・夜行バスでの暇つぶし7選!酔わないやつからおすすめします2020.01.092020.02.22アーカイブ2020年2月32020年1月42019年12月92019年11月102019年10月82019年9月62019年8月62019年7月132019年6月13プロフィール峠とうげです。することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理。小さいときはロボット作り屋さんになりたかった。目次cocoon目次カスタマイズ方法CSSをコピーするCSSをペーストするCSSを自分なりに編集する目次を表示する効果あなたのブログでも検証してみようまとめ:cocoonの目次をカスタマイズしよう関連記事タイトルとURLをコピーしました。