こんにちは、さくらです。
本日はコードを使ったCocoonのカスタマイズの方法をご説明していきます。
あ！！！待って！！！
コードって聞いただけで「私には無理」って思い込んで帰らないで！！！
カスタマイズ用のコピペOKなコードを紹介してくれているサイトは沢山あります。
ただ、「コードをコピペ」と言われても、どこにどんな風にコピペをすれば良いのか分からなかったりしませんか？
本日は目次のカスタマイズを例に、カスタマイズ用のコードのコピペの仕方と自分のサイトに合うように色を変更する方法をご紹介していきます。
カスタマイズ前の注意事項
Font awesomeの設定をすること
前回のCocoonカスタマイズ第一弾の記事にて、Cocoonでアイコンを使う方法の解説をしています。
こちらの記事の最初の「Font awesome」の設定が今回のカスタマイズでも必須なので、先に確認をお願いします。
必ずバックアップを取ること
カスタマイズを始める前に、「バックアップを取る」というのを忘れないようにしてください。
私は今のところ何も問題はありませんが、間違ったコードを入力した時に、いきなり画面が真っ白になってしまった！！ということも起こりえます。
プラグインの「BackWPup」を使用してバックアップを取ることをお勧めします。
「BackWPup」の詳しい使い方は下記の記事をご参照ください。
子テーマを編集すること
編集をするのは親テーマではなく、子テーマ（Cocoon Child）にしてください。
親テーマを編集してしまうと、Cocoonをアップデートした時に全てのカスタマイズが無くなってしまいます。
目次のカスタマイズ方法
今回使うコードと参照したサイトのご紹介
こちらが私の記事と同じ目次を作るコードです。
/************************************
** 記事内目次
************************************/
.toc {
background: #f9f9f9!important;
border: 0!important;
display: block!important;
border-top: 5px solid!important;
border-top-color: #e2bacf!important;/*お好みの色に*/
box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
padding: 20px 32px 7px 32px!important;
margin-bottom: 5%!important;
width:95%;
border-radius:10px;
}
@media screen and (min-width:600px){
.toc {
padding: 20px 35px 15px 35px!important;
width:70%;
}
}
.toc-title{
margin: 0 20px 20px -10px!important;
font-size: 23px!important;
font-weight: 700!important;
color: #e2bacf!important;/*お好みの色に*/
background-color: initial;
}
.toc-title:before{
font-family: "Font Awesome 5 Free";
content: "\f03a";
font-weight: 900 !important;
font-size: 20px;
color: #fff;
background-color: #e2bacf;/*お好みの色に*/
border-radius: 50%;
padding: 14px;
}
.toc a{
color:#333;
display: block;
border-bottom: dashed 1px silver;
padding-bottom: .5em;/*下の点線との間*/
padding-top: 0em!important;/*下の点線との間*/
}
.toc ul li{
font-weight: 700;
line-height: 1.5;
padding: 0 0 .4em 1.4em;
position: relative;
}
.toc li li{
font-weight: 400;
padding-top:.5em;
margin-top:0!important;
}
.toc_list li{
margin-top:-5%!important;
}
@media screen and (min-width:834px){
.toc_list li{/*PCでは目次のh2同士の間隔は抑えめに*/
margin-top:-1.8%!important;
}
}こちらのサイトに記載のあるコードを一部削除して、色を自分のブログに合わせて変更しています。
コピペをする方法
まずは「外観」→「テーマエディター」→「スタイルシート (style.css)」を開いて、右上の「編集するテーマ」がCocoon Childになっていることを確認してください。
このシート内であればどこにペーストしても大丈夫です。
既にコードがいくつか書いてあると思いますので、その下に一行空けてペーストするのが無難ですね。
ペーストできたら、下の「ファイルを更新」を忘れずに押してください。
これで記事内を見て頂くと、当ブログと同じ目次になったかと思います。
ただ、これだけだと、色があなたのブログとは合っていないのではないでしょうか。
ここからこの目次をあなたのブログに合うように一部変更していきます。
コードの色を変更する方法
先ほどご紹介したコードをご確認ください。
「 *お好みの色に* 」と書いてある部分が3か所あります。
この赤枠で囲っている箇所のコードを変更することで色を変えることができます。
色のコードはこちらのサイトなどで確認ができますが、私のおすすめはご自身のサイトの「サイトキーカラー」をそのままコピペしてしまうことです。
「Cocoon設定」→「全体」→「サイトキーカラー」→「色を選択」をクリックすると、下記の画像のように今設定しているカラーのコードが出てきます。
この色を選んでおけば、サイトから目次が浮いてしまうことはまずあり得ません。
色を変えたい場合も下記の丸のアイコンを動かせばその色のコードが表示されます。
３か所の色変更の内、それぞれどこを変えるとどこの色が変わるのかがこちら↓
私は全てサイトキーカラーにしています。
コピペ可のコードを配布しているおすすめサイト
この目次以外にも色々なカスタマイズをコードのコピペで行っています。
私がいつも参考にしているお勧めのサイトをご紹介します。
ぽてちる
今回の目次のもとになったコードも載っているサイトです。
カスタマイズをする際、一番参考にさせて頂いています。
スキンの「イノセンス」を作成された方が運営しているので、「どうしてもコードは難しいけど、ここで紹介しているデザインが好き！」という方はスキンをイノセンスにするのもありかと思います。
リスブロ
私のサイトのトップページの記事一覧にマウスを重ねるとその部分が少しふわっと浮くのが分かりますでしょうか。（パソコンで見て頂いた方が分かりやすいと思います）
このカスタマイズはリスブロさんの記事を参考にしています。
SANGOに憧れて「Cocoon SANGO風カスタマイズ」と調べまくっていた時に出会いました。
まとめ：【Cocoonカスタマイズ】コードをコピペして、目次をオシャレに！
如何でしたでしょうか。
コードを使ったカスタマイズ、思っていたよりずっと簡単そうじゃないですか？
コピペの仕方と色を変える方法さえ分かっていればカスタマイズできる幅は圧倒的に広がります。
食わず嫌いをせずに是非チャレンジしてみてください。
他にもCocoonのカスタマイズ方法を色々と解説しています。
もし何か分からないところがあればお気軽にコメントを頂ければと思います。
最後まで読んで頂き、ありがとうございました(^^)/
コメント