【Cocoon】タイムラインのカラーを替える

Cocoon

プロフィールのページを作成する際にショートコードからタイムラインを使ってWeb遍歴を記載してみました。その時にデフォルトのカラーが微妙だったので、自分のサイトにあう色にCSSをちょっとだけ改造。

タイムラインのカラー変更CSS

[外観] – [テーマエディタ]を開いて、style.cssにコピペして追加するだけでOK。HTMLカラーコードの部分をお好きな色に変更してください。

/* for Desktop */
.timeline-item-content {
  width: calc(100% - 110px);
  float: left;
  padding: .8em 1.4em;
  border-left: 3px #cdd9db solid;
}

.timeline-item:before {
  background: #3471A1;
}

/* for Smartphone */
@media screen and (max-width: 480px) {
  .timeline > li.timeline-item {
    border-left: 3px #cdd9db solid;
  }
}

CSS追加前と追加後

CSS追加前はグリーン基調だったんですが、この色があうサイトってあんまりないよね…

今のサイトになじむようブルー基調に変更しました。

見た目の統一感が出て、とてもしっくりきました!

コメント

タイトルとURLをコピーしました