STINGER PROでサイドバーの装飾をしてみたい方に
簡単にできる方法をシェアします。
今回はグラデーションを使って装飾してみます。
Contents
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; }
参考になればうれしいです。