どうもおはようポテト(@ohayoupoteto22)です。
本サイトでも絶賛使用中の神テーマCocoon。
ショートコードを用いてタイムラインをお手軽に利用することができるのですが…
デフォルトのデザインがちょっと地味…
(›´ω`‹ )
その前に内容が現実逃避しすぎ…
くるみ
ということで今回は
「Cocoonのタイムラインの見栄えを良くしたい」
「オシャレにして他サイトと差別化を図りたい」
という方に向けてCocoonのタイムラインをオシャレにカスタマイズする方法をまとめました。
コピペするだけで簡単なのでぜひ参考にしてみてくださいね⸝⸝- ̫ -⸝⸝
ブログ主
早速いってみよう!
お品書き
タイムラインの完成イメージ
今回紹介するカスタマイズは2種類あります。お好きな方を選んでください(っ´ω`c)
パターン1
一つ目はデフォルトのデザインのものに忠実に、円を大きくしてより見やすくしたものです。
上の「step1」のところの円を見てもらうと分かるように、一つ目の円はポワンポワン動くようになっていて、さりげない可愛さと見やすさを両立しています。
パターン2
二つ目は左側の棒を太くし、Googleマップの乗り換え案内のような感じにしてみました。
タイムラインのカスタマイズ手順
どちらのパターンも同じ手順になります。
手順
step1
style.cssにコピペ!
step2
自分のサイトにあった色に設定!
ブログ主
ということで早速カスタマイズしていこう!
Cocoonのタイムラインのカスタマイズ方法
step1:style.cssにコピペ!
パターン1を選んだ場合
/************************************
** タイムラインカスタマイズ
************************************/
.timeline-item:before {
background: #f8c678;/*好きな色に*/
top:22px;
width: 17px;
height: 17px;
left: 103px;
}
.timeline-item-content{
border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-box{
border:initial;
}
.timeline-item-label{
color:rgba(25,25,25,.7);
}
@media screen and (max-width: 480px){
.timeline-item-content {
border-left:initial;
}
.timeline>li.timeline-item {
border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-item:before {
left: -10px;
}
}
/*以下はアニメーションをつけたい場合*/
.timeline li:nth-child(1):before{
opacity:0.5;
animation: timeline_circle 1.5s infinite;
}
@keyframes timeline_circle{
100% {
opacity:1;
transform: scale(1.3, 1.3);
}
}
パターン2を選んだ場合
/************************************
** タイムラインカスタマイズ
************************************/
.timeline-item:before {
background-color: rgba(255,255,255,.7);
top: 22px;
width: 15px;
height: 15px;
left: 112px;
}
.timeline-item-content {
border-left: 20px #f8c678 solid;/*好きな色に*/
}
@media screen and (max-width: 480px){
.timeline>li.timeline-item {
border-left: 20px #f8c678 solid;/*好きな色に*/
}
.timeline-item-content {
border-left:initial;
}
.timeline-item:before {
left: -17.5px;
top: 57px;
}
}
step2:自分のサイトにあった色に設定!
コピペしたCSSの「好きな色に」とあるところのカラーコードを、それぞれお好みの色にしてください
ブログ主
いい感じの色が思い浮かばない時は以下の記事をぜひ。
色の設定が終われば完成です!
お疲れ様!
くるみ
最後に
以上になります。
タイムラインを使うとみやすさがグッと変わるので、デザインもしっかり整えておきたいところですね(っ´ω`c)
ブログ主
他にもCocoonカスタマイズの記事書いてるのでぜひ


参考になれば幸いです!では⸝⸝- ̫ -⸝⸝