プロフィールのページを作成する際にショートコードからタイムラインを使って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追加前はグリーン基調だったんですが、この色があうサイトってあんまりないよね…
今のサイトになじむようブルー基調に変更しました。
見た目の統一感が出て、とてもしっくりきました！
コメント