【Cocoon】コピペでOK!タイムラインを可愛くカスタマイズする方法

Cocoonのタイムラインのカスタマイズ

くるみ

Cocoonのタイムラインさ、デフォルトだとちょっと地味じゃない?
ということで今回は

  • Cocoonのタイムラインの見栄えを良くしたい
  • オシャレにして他サイトと差別化を図りたい

という方に向けて「Cocoonのタイムラインをオシャレにカスタマイズする方法」をまとめました。

コピペするだけで簡単なのでぜひ参考にしてみてくださいね⸝⸝- ̫ -⸝⸝

タイムラインの完成イメージ

今回紹介するカスタマイズは2種類あります。お好きな方を選んでみてください。

パターン1

タイムラインの完成イメージ1

一つ目はデフォルトのデザインのものに忠実に、円を大きくしてより見やすくしたものです。

上の「step1」のところの円を見てもらうと分かるように、一つ目の円はポワンポワン動くようになっていて、さりげない可愛さと見やすさを両立しています。

パターン2

タイムラインの完成イメージ2

二つ目は左側の棒を太くし、Googleマップの乗り換え案内のような感じにしてみました。

カスタマイズ手順

どちらのパターンも同じ手順になります。

手順
step1
style.cssにコピペ
step2
自分のサイトにあった色に設定

Cocoonのタイムラインのカスタマイズ方法

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の「好きな色に」とあるところのカラーコードを、それぞれお好みの色にしてください

参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ

色の設定が終わればカスタマイズ終了です。

お疲れ様!

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、Cocoonのタイムラインを可愛くカスタマイズする方法でした。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

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

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。