STINGER PROでサイドバータイトル部分の装飾【グラデーション】

STINGER PROでサイドバーの装飾をしてみたい方に
簡単にできる方法をシェアします。

今回はグラデーションを使って装飾してみます。

STINGER PROでサイドバーの装飾を追加CSSで行う方法

WordPress管理画面の左側メニューから

【外観】⇒【カスタマイズ】⇒【追加CSS】を選択します。

追加CSS記入欄が表示されますのでここにCSSで記入していきます。

サイドバーのタイトル部分の装飾

今回はサイドバーのタイトル部分を装飾してみます。

タイトル部セレクタは下記です。

#side aside h4

この部分を装飾していきます。

どの部分を装飾するかの指定部分です。

背景色設定

background-color: #fff;

今回は必要なかったのですが、サイドバーのバックグランドを
指定している場合などはここで背景色を指定します。

装飾内余白設定

padding: 10px;

タイトル上部の余白設定

margin-top:50px;

タイトルの上の部分に余白が欲しかったので【50px】足しました。

タイトル下部の余白設定

margin-bottom: 20px;

タイトルの下に少し余白が欲しかったので【20px】付け足しました。

タイトル下線設定

border-bottom: 5px solid #444444;

【5px】の部分は線の太さを指定しています。

【solid】線の色塗りの指定です。これはべた塗ですね。

【#444444】これは色指定です。

背景グラデーション設定

background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

この様な組み合わせで装飾してみました。

【linear-gradient】グラデーションの種類です。

【120deg】はグラデーションの角度です。

【#fdfbfb 0%】左側の色指定です。　※%は簡単に言うと色の濃さ

【#ebedee 100%】右側の色指定です。※%は簡単に言うと色の濃さ

完成イメージ

こんな感じです。

シンプルなのが好きなのでこの様な出来栄えですが
カラーを組み合わせる事でかなりイメージが変わりますので
試してみたい方は参考にしてみて下さい。

今回使ったCSSコードの見本

#side aside h4 {
background-color: #fff;
padding: 10px;
	margin-top:50px;
	margin-bottom: 20px;
	border-bottom: 5px solid #444444;	
	background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
aside .kanren {
background-color: #fff;
border-radius: 0px 0px 3px 3px;
}

参考になればうれしいです。