Cocoonはカスタマイズの自由度が半端なく、目次もcocoonひとつあれば追加できます。
さすがに細かいカスタマイズするにはcssの知識が必要ですが、手を加えるところは少しだけなので、案外簡単にオリジナルの目次が作れるんです。
コピペ用のコードも掲載しておきます。
Cocoonは無料でダウンロードができるWordpressテーマですが、それなのに有料級の機能が満載でたくさんの人が使っています。
その機能の中には目次を加える機能もあり、無駄にプラグインを追加しなくても大丈夫です。かなり簡単に目次は実装できます。
ところがそのままだとcocoonを使っている人は、どれも同じ目次になってしまうので、カスタマイズをしてみましょう。
さすがのcocoonでも目次をカスタマイズするには、cssで細かい設定をしないといけません。ちょうどトップページも作り直したので、そのついでにいじってみました。
cocoonの目次を使うには「cocoon設定」を確認
まずcocoonの機能を使って目次を表示させる必要があります。すでにプラグインを使って目次を表示させている人は、そのプラグインの機能をオフにしてください。
ちなみに僕が以前使っていた「Table of Contents Plus」は、かなり長い間更新されていないので、セキュリティ面が甘くなっている可能性があるそうです。
目次プラグインのTOC＋を一部でつかってたけど、3年も更新がなくてさすがにセキュリティが不安すぎる・・・
なので、｢Easy Table of Contents｣に変更。ちゃんと更新されてるしスムーススクロール機能がついてるのでイイ感じ。https://t.co/3hTQ8DJmmp
— ジロー@名古屋 (@JIRO_biz) April 27, 2019
このプラグインで目次を使っている人がいたら、早めにcocoonの機能を使って、目次を切り替えたほうがいいかもしれませんよ。
じつはこのツイートを見たから、cocoonの目次に切り替えたのもあるんだよな…。cocoonは今の時点で更新が頻繁に行われているなら安心！
トップページを固定ページで作成している人は注意！
cocoon設定を表示したら、上部に目次のタブが出ているはずです。それをクリックすれば、目次の設定画面に切り替わります。
そして画面にあるように、「目次を表示する」にチェックを入れると、これだけで記事内に目次が表示されるでしょう。ところがここで注意点！
それは「目次を表示する」のチェック欄の下にある部分じゃ！
「投稿ページ」と「固定ページ」と書かれたチェックマークがあるでしょうが、固定ページでトップページを作っている人は、固定ページのところだけでもチェックを外すようにしてくださいね。
トップページに目次が表示されると、あまり見た目がよくありません。せっかく作ったトップページが崩れないように、固定ページのチェックを外してくださいね。
バランスを整えるために中央に表示するのがおすすめ
その下に行くと画面の左右の幅をそろえられるように、「中央に表示する」といわれる項目があると思います。
本来ならcssを使って整えるのですが、cocoon設定を使えば、そんな手間を省いてくれるんです。記事の見た目が全然違うので、必ず中央揃えになるようにチェックしておくのをおすすめします。
これは見出しのことで、H3タグで囲われた中見出しまで、目次に表示したいいのかという部分。たくさん見出しを作っていたとしても、最高でもH4見出しまでがいいでしょう。
たくさん目次を表示したら、見栄え的にはゴチャついてあまりよくありません。好みの問題でもありますが、H3見出しまでの表示にしたほうが個人的に好きですね。
目次のデザインを変えるにはcocoonでもcssが必要
ここまで操作ができたら、もうすでに目次が表示されているでしょう。ちなみにデフォルトの目次は、背景が白で文字が黒のシンプルなデザインですね。
これでも満足な人はこのままでいいが、どうしても物足りないなら、次こそcssの出番じゃ！
この設定を使うためには、WordPressの設定画面にある、「外観」→「テーマエディター」を開きましょう。
開くとすぐにstyle.cssと書かれたページになるので、そのまま以下で紹介するコードをコピペしたら、目次が変わってくれています。
cocoonそのものがシンプルだから、そこまでcssを使ってカスタマイズする必要もないかも。
今回のカスタマイズで変更したのは一部だけ
cocoonのいいところは高速でページを表示でき、カスタマイズもやりやすくなっています。
ところがcssなどコードを追加しすぎてしまうと、そのコードを読み込むのに時間がかかってしまい、cocoonのいいところが台無しに…。
そこで僕もそこまでコードを追加せず、ちょっとだけ手を加えただけですが、それなりの目次になりました！
これはcocoonが全体的にシンプルにしてくれているからですね。
以下で詳しく紹介しますが、簡単にここでネタバレすると、以下の項目だけカスタマイズしました。
- 背景色
- 余白
- 文字の大きさ・太さ
- 枠線
これだけですがそれなりに見えてしまいますよね？ちなみに目次を開いたときに、フワッと動くアニメーションがついていますが、これもcocoonの仕様です。これだけでもすごいですよね！
chromeの拡張機能をチェックしながらカスタマイズ
Cocoonに限らずですが、Wordpressのブログをカスタマイズする際にchromeの検証機能を使えば、かなり簡単にcssでデザインが変えられます。
もちろんWordpressでなく、自作でホームページする場合にも、かなり役立つのでおすすめです。
ちなみにトップページを作ったときにも役立った方法なので、cssでカスタマイズする人はやってみましょう。
- サイト上を右クリック
- 1番下の「検証」をクリック
- 画面の右側がcss
このcssのメニュー内は、クリックしていじれば、画面上の表示が勝手に切り替わってくれてかなり便利！
しかもそれをコピーして、上記で紹介したテーマエディターにペーストしてしまえばそれだけでデザイン完了です。
cssの知識がなくても、Googleで検索しながら繰り返しコピペしていくと、素敵な目次が完成できるんだよ！
面倒な人はコピペでOK！微調整のために解説
ということで今回作った目次のcssのコードを、ここで記載しておきますね！やっとかよ！といい声が聞こえてきそうですが、念のため細かく説明させていただきました。
さっきも紹介しましたが、いじったのは以下の4つだけ！もちろんcssコードはそれ以上出てきますが、変わっているのはこれだけです。
- 背景色
- 余白
- 文字の大きさ・太さ
- 枠線
そしてコピペをしても、自分で変えられるように、説明書きも付け足しておきました。色を変えたい人は以下のリンクから色のコードをコピペするだけで、変更することができます。
以下で記載したコードを変えて、オリジナルの目次を作り替えてみてくださいね。ちなみにデザインを変えても、SEO的には効果はないので、完全に自己満の世界です。注意してください！
/*--cocoon目次--*/
.toc {
background-color: #f2f2f2; /*--背景色--*/
border-style: none; /*--囲いを消去--*/
padding: 20px 40px; /*--余白を調整--*/
border-top: 10px solid #1E73BF; /*--上部の色を変更--*/
}
.toc-title {
font-size: 2.1em; /*--目次の文字の大きさ--*/
text-align: left; /*--左側に寄せる--*/
padding: 5px 20px; /*--目次周辺に余白--*/
font-weight: bold; /*--太字に変更--*/
}
.toc .toc-list li a {
color: #333; /*--文字の色--*/
text-decoration: none; /*--リンクの下線を消去--*/
font-weight: bold; /*--太字に変更--*/
font-size:18px; /*--文字の大きさ--*/
}
.toc .toc-list li ul li a {
color: #333; /*--文字の色--*/
text-decoration: none; /*--リンクの下線を消去--*/
font-weight: normal; /*--太字に変更--*/
font-size:16px; /*--文字の大きさ--*/
}
.toc ul ul{
margin: 0 0 10px 0; /*--下部の空白を変更--*/
padding-left: 15px; /*--左側の空白を変更--*/
}
.toc-list li{
margin-bottom:10px; /*--下部の空白を変更--*/
}
.toc-title::after {
text-decoration: none; /*--リンクの下線を消去--*/
font-weight: normal; /*--太字に変更--*/
}
/*--cocoonサイドバー目次--*/
#toc-2 .toc {
background-color: #fff; /*--背景色を白色に--*/
}
#toc-2 .toc .toc-list li a {
font-size:14px; /*--文字のサイズを変更--*/
}
#toc-2 .toc .toc-list li ul li a {
font-size:12px; /*--文字のサイズを変更--*/
}
/*--cocoonスマホ目次--*/
.toc {
padding: 20px; /*--空白を変更--*/
}
.toc ul {
padding-left: 5px !important; /*--左側の空白を変更--*/
}
これをコピペするとこんな感じになります。好みのデザインに変えたい人は、上記の説明文のところを参考に、chromeの検証機能を使いながら微調整してくださいね。
ちなみにスマホの目次部分をコピペする場合は、以下のところの間に貼り付けましょう。
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}コードをそのままコピペして使ったいいですが、細かいところで合わないところもあるかもしれません！その場合はchromeの検証機能で微調整がおすすめです。
背景色はbackground-color
cssのbackground-colorは、すべて背景色が変更できます。もともとcocoonの背景色は、白で設定されていましたが、僕は薄い灰色に変更しました。
上記の色辞典で好きな色に変えてしまったらいいですが、できるだけ薄い色にして目次の字を見やすくしたほうがいいですよ。
余白はmarginとpaddingで調整
余白に関してはデザイン的に重要なところですが、じつはcssではmarginとpaddingの2種類存在しています。
最初は僕も意味が分からず使っていましたが、勉強すると以下のように使われているのがわかりました！
- margin…外側の余白
- padding…内側の余白
これがわかってしまえば、目次をカスタマイズするときに、迷う心配はありませんね。ちなみにmarginはマイナスでも数値を読み込んでくれますが、paddingは無効になるみたいですよ。
文字系を変えるにはfont-sizeとfont-weight
目次の主役はあくまで文字ですよね？むしろ記事に全体を見ても、どんな内容かユーザーがチェックする部分なので、なるべく文字の装飾はこだわっていたほうがいいでしょう。
僕はH2の大見出しを太文字にし、H3 の中見出しをデフォルトにしています。差を付けると見やすいので、個人的にはこれで満足です。
目次の上の色がついているところはborder-top
最後に枠線が残ってしまったので、borderというコードで、それを１度すべて消してしまい、上部だけ色を付けてワンポイントとしました。
これも好みですがデザインの基本としては、最大で3つ前までしか色を使ったらいけないそうです。僕は見出しで使っている色と同じにして、全体のバランスをとるようにしました。
目次がここですよ！というアピールにもなって、少し色を付けたほうがよさそうと思ったからです。
目次はよく読まれる重要な部分！カスタマイズして個性を！
何度も言っていますが、目次はユーザーがどのような内容か、必ずチェックする重要な部分。cocoonはそのあたりを配慮して、かなりカスタマイズしやすくしています。
以前使っていた目次プラグインは、コードが面倒でしたが、cocoonの目次のコードはシンプルに作られていました。最初からカスタマイズするのを前提で作っているみたいです。
最初はなかったサイドバーにも目次が付けられるので、ウィジェット機能で追加していましょう。今回紹介したコード内にも、追従するサイドバーに合うように、コードを調整しました。
もしよかったら使ってみてください！こうやってcssの事を書いていると、アウトプットできて、コーディングの勉強にもなるな！
