SANGOのタイムラインをプチ変更 【WordPressカスタマイズ】

アイキャッチ

WordPress のテーマ「SANGO」

シンプルで素敵なWordpressテーマです。

 

ショートコードの「タイムライン」をよく使用していますが、メインカラーの色が適用されてしまい個別に色の設定ができないので、CSSをカスタマイズしてみました。

メインカラー

 

カスタマイズ前ビフォー
カスタマイズ後アフター

 

やったこと
  1. ◯を少し大きくして色を変更
  2. ◯と直線のスキマを埋めた
  3. ラベルを装飾

カスタマイズまで

必ずバックアップを取ってから編集しましょう。

FTPを使わずに編集

管理画面  外観  テーマの編集 スタイルシート (style.css)

一番下までスクロールして、コードを追記します。

FTPを利用して編集

FTPソフト  SANGO子テーマディレクトリ style.css

エディタなどでコードを追記してアップロード。

コード

こちらのコードを子テーマのstyle.cssに追加してください。

style.css

/*タイムライン*/
.tl_label { /*ラベルの装飾*/
  padding: 3px 12px;
  color: #fff;
  font-size: .8em;
  font-weight: bold;
  background:#555; /*ラベルの色*/
  display: inline-block;
  border-radius:15px;
  margin-bottom:1em;
}

.tl>li:before { /*タイムラインの縦線*/
  content: "";
  width: 2px; /*線の太さ*/
  background: #CCD5DB; /*線の色*/
  display: block;
  position: absolute;
  top: 24px;
  bottom: -6px;
  left: 6px;
}

.tl_marker { /*丸の色*/
  content: '';
  display: inline-block;
  position: absolute;
  top: 6px;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid 3px #CCD5DB !important; /*丸枠の色*/
  background:#00BFFF !important; /*丸の中の色(好きな色を)*/
}
.tl li:not(:first-of-type):not(:last-of-type) .tl_marker { /*丸の中を透過*/
  background: transparent !important;
}

おまけ

ラベルを吹き出し風に

吹き出し

このコードを先程のコードに追加してください。

style.css

.tl_label:after{ /*吹き出しの三角形*/
  position: absolute;
  content: '';
  top: 30px;
  left: 45px;
  border: 9px solid transparent;
  border-top: 9px solid #555; /*ラベルと同色*/
  width: 0;
  height: 0;
}

まとめ

タイムラインを使うとそれっぽく見えるのでつい使用してしまいます。カスタマイズというほどのものではないですが、メインカラーの色ではなく、自分の使いたい色に変更することができました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です