さて、今日？から早速STINGER PLUS+にテーマを変更してみたので
そのカスタマイズ法を備忘録的にその都度書いていこうと思う。
今回は、サイドバーのカスタマイズについてお話しします。
まぁ、初期設定では背景はなく
背景の設定があるのかな？と思いきや特に見つけることが出来なかった。
もしかしてあったかもしれないが、そうだとしたら、カスタマイズ方法を書いたと思ってみてもらいたい。
最初の状態がこういう状態。
このカスタマイズだが、STINGER３、５、７と扱ってきて
進化する度にちょっとずつカスタマイズ法も当然変わってきている。
STINGER PLUS+もその流れに漏れずコードが違っているのでその部分を確認しながら進めていこう。
変更箇所は style.css の後半部分
変更するべきところはstyle.css後半の部分。わかりやすく広範囲でピックアップしてみた。
/*--------------------------------
PCのレイアウト（右サイドバー）
---------------------------------*/
#contentInner {
float: left;
width: 100%;
margin-right: -300px;
}
main {
margin-right: 320px;
margin-left: 0px;
background-color: #fff;
border-radius: 4px;
padding: 30px 50px 30px;
}
.st-eyecatch
{
margin: -30px -50px 20px;
}
.st-eyecatch img
{
border-radius: 4px 4px 0 0 ;
}
#side aside {
float: right;
width: 300px;
padding: 0px;
}
この黄色いマーカーを付けたところがサイドバーの設定箇所だ。
この部分にコードを追加する
するとこういう感じになる
変更点は「 padding: 0px; 」を削除
理由は何故かサイドバーが下のほうにズレてしまうからだ。
これを外したら正常な位置にきてくれた。
#side aside {
float: right;
width: 300px;
/*サイドバーに背景追加*/
background: rgba(255,255,255,1);/*サイドバー色＆半透明設定コード*/
border-radius: 4px 4px 4px 4px; /*サイドバー四隅の丸みの設定*/
/*サイドバーに背景追加ここまで*/
}
こうすることでこういう感じになった
だが、真っ白というのはバランスが悪いので、これをさらにいじっていこう。
サイドバーの背景を半透明にする
この設定はさっきの設定ができていれば難しくはない。
先ほど追加した部分の数値をちょっと変更してあげればOK！
そのコードがこれである
background: rgba(255,255,255,1);/*サイドバー色＆半透明設定コード*/
この（ ）の中に書いてある 1 というのが透過率を設定する数字だ。
この数字が1にすると、透明ではなくなり、0に近づけるほど透明になる。範囲は0.1~1
まとめるとこの部分全体はこうなる
#side aside {
float: right;
width: 300px;
/*サイドバーに背景追加*/
background: rgba(255,255,255,0.5);/*サイドバー色＆半透明設定コード*/
border-radius: 4px 4px 4px 4px; /*サイドバー四隅の丸みの設定*/
/*サイドバーに背景追加ここまで*/
}
私は透過率を0.5にして設定した。そうした結果がこちら
ちなみに色を変更したい場合は、
background: rgba(255,255,255,0.5)
この部分の数値を RGB カラーを参考に変更すればよい！
私はRGBの色を見るときはここを使っている。
サイドバーの背景を画像にしたい
色指定ではなく、画像にしたいという場合もあるだろう。
その場合は
background: rgba(255,255,255,0.5);/*サイドバー色＆半透明設定コード*/
のコードで背景色を設定しているので、この部分を削除し、
その代わりに以下のコードと入れ替えてあげればよい。
background: url('画像のURL') repeat ;
ちなみに現状の当サイトのサイドバーは半透明な画像を設定している。
使っている半透明画像はこちら
最終的にまとめると
#side aside {
float: right;
width: 300px;
padding: 0px;
/*サイドバーに背景追加*/
background: url('http://resuscitation-signpost.com/wp-content/uploads/2016/05/green50.png') repeat;
border-radius: 4px 4px 4px 4px;
/*サイドバーに背景追加ここまで*/
}
こういう表記になっている。
追記！
この設定だとスマートフォンで見たときにサイドバーの背景が反映されていない。
早めに対応、その方法を書いていこうと思います。
あとがき
これで、投稿部分の背景と、サイドバーの部分の背景の設定ができた。
またどんどん最新STINGER PLUS+のカスタマイズを試していこうと思う。
