STINGER7(STINGER PLUS+)で背景を透過させる方法

STINGER カスタマイズ

一種の備忘録的な内容になります。

無料で使える日本語テンプレートでは最高に近いWordpressテーマSTINGERですが

 

このバージョン7でのカスタマイズ法が出てこなかったので、備忘録と一緒に共有する記事です。

 

と思ったら、 STINGER PLUS+ なんていう最新バージョンが出ているではありませんか!!!!

STINGER PLUS+

せっかくなのでこれに乗り換えようと思います。

 

ちなみにSTINGER7の投稿部分を半透明にする方法ですが

このカスタマイズしているCSSのテキストファイルをコピペすれば半透明になります。

変更するのはSTINGER7のスタイルシートです。

stinger7

カスタマイズした スタイルシート をダウンロードする →【スタイルシートの内容テキスト】

説明はここを見てもらえればと思います。バージョン違いますがやっている事はこういうことです。

あとで STINGER PLUS+ でのカスタマイズ方法を追記しますね!

【Stinger3】 サイドバーに背景を加えた。更に背景を半透明にした

追記

STINGER PLUS+ で編集してみようと思ったら、この機能が標準化されていた!!!!

 

今までCSSをいじらないといけなかったのにこれ見た時に マジか!って叫んじゃった!

キャプチャ

この画面はWordpressで外観→カスタマイズで出てくる画面だ!

 

説明をしておこう編集するのは 記事エリア背景色 の部分だ

1:「メインコンテンツのエリアです」を変更していく

この部分を変えることにより、投稿記事の背景色を変えることができる。

ただし、次の項目の背景の透明化を適用すると、色はここで指定した色に変更できない。

 

2:背景色透過※白のみ

ここでは 「透過しない」 「20%」 「50%」 「80%」 と透過率を選ぶことができる。

ここで 「20%」 「50%」 「80%」 を選んだ場合、透過させる色は 「白限定」 にされる

 

3:周りのボーダー

これは投稿記事エリアと背景との境界線を選べる、

多分、初期設定では1pxになっているが十分だ。

特に変える必要がないが、変えたい場合はCSSをいじる必要があるな。

 

このテーマを適用させたサイトはこちら → UNAの足跡

更新していないけど、私の個人ブログです(笑)

 

 

白以外で透過させたい場合!

これあるでしょ、っていうか、黒で透過させたかったんです。

この場合は背景画像を用意しないといけません。

 

今回は 【黒 透過率60%】の画像を用意しました。

ダウンロードして使ってください

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

透過率60%黒

 

んで、どういう事かというと

やっぱりCSSいじらないと駄目みたい(笑)

99%返事ないって書いてあるけどEnji様に改善要望出しておこう。

 

変更するところは style.css だ、割と後半のこの部分

 

/*——————————–
PCのレイアウト(右サイドバー)
———————————*/

#contentInner {
float: left;
width: 100%;
margin-right: -300px;
}

main {
margin-right: 320px;
margin-left: 0px;
/*background-color: #fff;*/
background: url(‘画像URL’) repeat 50% 50%;
border-radius: 4px;
padding: 30px 50px 30px;
}

 

青い背景色が元々の設定、背景色が白になっている、これは「テーマのカスタマイズ」で変えることができる。

今回はこの部分は /* */ で無効にして黄色の部分をつけたしている。

 

background: url(‘画像URL’) repeat 50% 50%;

 

この部分だ!

これにさっきの透過率60%の画像を入れれば文字の背景が 透過率60%黒 の出来上がりだ!

文字の背景部分が60%なので、一番下の背景(画像)が透けてカッコよくなる!

 

違う色を試したかったら、違う色で透過率を入れた画像、この場合PNG形式で保存してチャレンジしてほしい。


PAGE TOP