ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

Stinger3子テーマ「CANDY CRAZY」で背景に画像を表示する。

f:id:gadgerepo:20151130113720j:plain

こんにちは、@gadgerepoです。

筆者がブログを始めるきっかけとなったWordPressテーマ「Stinger3」。 つい先日新バージョンの「Stinger5」も正式公開されたようですが 筆者のブログもひととおりカスタマイズし尽くした感があり、特にいじっていませんでした。

【追記】 現在、当ブログは WordPree ではなく「はてなブログ」で運用しております。ご了承ください。

m(__)m

〜WordPressカスタマイズ備忘録 その10〜

ところで、このブログは筆者が気になったガジェットやニュースなどから見たり触ったり感じたりしたことを、皆さんにレポートしつつも自分への備忘録、あるいはまとめる“手帳”としたい、と考えてきました。
そこでブログ開設当初、見た目のテーマを“手帳”と設定し、ヘッダーのタイトル画像を“手帳の中綴じ風”にしたのですがイマイチ手帳っぽくありませんでした。

f:id:gadgerepo:20151130113603p:plain

それで今回は、より手帳っぽい見た目に近づけるように、背景に手帳の罫線画像を表示することにしました。
いつもどおり、自分が忘れないために手順を解説していきます。

背景画像の選択

背景とする画像(手帳の罫線風)はすでに当たりをつけていました。

subtlepatterns.com

こちらのサイトは繰り返しパターンの画像ばかり置いていて、背景にオススメです。
選んだ画像をダウンロードします。

背景画像の設定

WordPressのダッシュボードから「外観」→「背景」を選択、先ほどの画像をアップロードします。

f:id:gadgerepo:20151130113920p:plain

オプションの設定は「位置」は中央、「繰り返し」はタイルとし、「スクロールの有無」は今回のような罫線の場合、ヘッダー画像などにも罫線があると固定ではズレてしまうので、スクロールに設定します。「変更を保存」を押せば背景画像が表示されます。

f:id:gadgerepo:20151130114010p:plain

ヘッダー画像には位置を調整しつつ、罫線画像を合成します。

f:id:gadgerepo:20151130114053p:plain

CSS変更で背景画像が透けて見えるように

Stinger3子テーマ「CANDY CRAZY」のstyle.cssを変更し、白バックになっている記事部分、サイドバー部分を半透明にして画像が透けて見えるようにします。

子テーマのstyle.cssを開き、29行目付近の

background: none repeat scroll 0 0 rgba(255, 255, 255, 1.0);

36行目付近の

background-color: #FFFFFF;

114行目付近の

background: none repeat scroll 0 0 #FBFBFB;

129行目付近の

background: none repeat scroll 0 0 #FFFFFF;

267行目付近の

background: none repeat scroll 0 0 #FFFFFF;

287行目付近の

background: none repeat scroll 0 0 #FFFFFF;

これら6ヶ所をすべて

background: none repeat scroll 0 0 rgba(255,255,255,0.5);

に変更します。
これまでのカスタマイズの有無によって上記行数や元の内容が変わっているかもしれませんのでご了承ください。

これで完了です。背景画像が透けて見えるでしょうか。
筆者のは罫線なのでわかりにくいですね(^_^;)

f:id:gadgerepo:20151130114543p:plain

おつかれさまでしたm(__)m