
一種の備忘録的な内容になります。
無料で使える日本語テンプレートでは最高に近いWordpressテーマSTINGERですが
このバージョン7でのカスタマイズ法が出てこなかったので、備忘録と一緒に共有する記事です。
と思ったら、 STINGER PLUS+ なんていう最新バージョンが出ているではありませんか!!!!
せっかくなのでこれに乗り換えようと思います。
ちなみにSTINGER7の投稿部分を半透明にする方法ですが
このカスタマイズしているCSSのテキストファイルをコピペすれば半透明になります。
変更するのはSTINGER7のスタイルシートです。
カスタマイズした スタイルシート をダウンロードする →【スタイルシートの内容テキスト】
説明はここを見てもらえればと思います。バージョン違いますがやっている事はこういうことです。
あとで STINGER PLUS+ でのカスタマイズ方法を追記しますね!
【Stinger3】 サイドバーに背景を加えた。更に背景を半透明にした
追記
STINGER PLUS+ で編集してみようと思ったら、この機能が標準化されていた!!!!
今までCSSをいじらないといけなかったのにこれ見た時に マジか!って叫んじゃった!
この画面はWordpressで外観→カスタマイズで出てくる画面だ!
説明をしておこう編集するのは 記事エリア背景色 の部分だ
1:「メインコンテンツのエリアです」を変更していく
この部分を変えることにより、投稿記事の背景色を変えることができる。
ただし、次の項目の背景の透明化を適用すると、色はここで指定した色に変更できない。
2:背景色透過※白のみ
ここでは 「透過しない」 「20%」 「50%」 「80%」 と透過率を選ぶことができる。
ここで 「20%」 「50%」 「80%」 を選んだ場合、透過させる色は 「白限定」 にされる
3:周りのボーダー
これは投稿記事エリアと背景との境界線を選べる、
多分、初期設定では1pxになっているが十分だ。
特に変える必要がないが、変えたい場合はCSSをいじる必要があるな。
このテーマを適用させたサイトはこちら → UNAの足跡
更新していないけど、私の個人ブログです(笑)
白以外で透過させたい場合!
これあるでしょ、っていうか、黒で透過させたかったんです。
この場合は背景画像を用意しないといけません。
今回は 【黒 透過率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形式で保存してチャレンジしてほしい。