WordPress[Stinger3] 背景を画像や写真に変更する方法

「Stinger3」のデフォルトの背景だとこんな感じですが、

背景を写真にすると！？

こんな感じになります。ガラッと雰囲気が変わります。今回はWordPressのプラグイン「Background Manager」を使って「Stinger3」の背景を画像や写真に変更する方法を備忘録として残したいと思います。画像も写真も基本的にはやり方は一緒なので今回は背景を写真にする方向でやってみたいと思います。今回もOSXローカル環境にwordpressをインストールする方法で構築したWordPressの環境で作業して行きたいと思います。ローカル環境はあると便利なのでお時間がある方は是非トライしてみてください^^

WordPressプラグイン「Background Manager」を導入

背景にしたい写真を探します

まず背景にしたい写真を探しにいつも大変お世話になっている「ぱくたそ」さんで高画質な写真をダウンロードしてきます。「ぱくたそ」さんでは４０００枚を超える高画質な写真が無料でしかも商用可能です。多くのブロガーさんたちも愛用していてモデルさんなどどこかのブログで一度は見た事がある方々だと思います。

PAKUTASO/ぱくたそ-すべて高品質の無料(フリー)写真素材

 

色々写真を探してみて、今回はちょっと大人っぽいw横浜の夜景の写真でトライしてみます。「写真のダウンロードはこちらから」をクリックします。

次に、「SサイズかLサイズ」どちらにしますか？と聞かれるので迷わず「L」をクリックします。すると自動でダウンロードが始まります。

PhotoShopで編集

ダウンロードした画像をWEB用に少し編集します。もちろんPhotoShop以外でも出来るのでやってみてください。PhotoShopで先程ダウンロードした写真を読み込んでレゾリューションをWEB用に変換します。デフォルトだとレゾリューションは300ですが、

こちらを72に変更します。変更後、名前を適当に決めて保存します。

ここで一手間加えます

JPEGminiやImageOptimで画像の容量を軽量化して読み込みが遅くならないようにします。JPEGminiは無料版もあります。ImageOprimはこちらの過去の記事で紹介もしています。無料なので使ってみてください。

これは使える！OSX用画像圧縮ツール「ImageOptim」 | dmgadget(ディーエムガジェット)

 

今はImageOptimよりも圧縮率が高い「JPEGmini」をメインで使っているので、今回はそちらを使用したいと思います。JPEGminiに先程の画像データを入れて、軽量化します。

元のデータは600KBほどありましたが、311KBと云う半分に近い数字まで軽量化する事ができました。

Background Managerをインストール

管理画面　→　プラグイン　→　新規追加　→　「Background Manager」と検索してインストールします。

インストール後、有効化をします。

次に、管理画面　→　プラグイン　→　Background Managerの「Settings」から管理画面に行きます。

背景の管理ページから一番上、タイトル右の「Add New Image Set」をクリックして背景にしたい画像、又は写真を登録します。

次のページで登録したい背景画像の登録名を決めて

「Add an Image」をクリックして画像をアップします。

画像アップ後、一番下「保存」を押します。すべてが終わったら、管理ベージの右側の「Add Image Set」を押して終了です。

「Background Manager」の管理ページに戻ります。左のWordPressの管理画面の外観　→　背景　でもBackground Managerの管理ページに戻れます。管理ページの「Background Image Set」から先程作成した「my image sets 01」と云う名前（ご自身で作成した名前）を選びます。

Image Setsを選択して、次に画像を表示するページを設定します。

自分はここは特に変更を加えていませんが、各項目の意味は

Front page[Topページ]
Single post[ブログ記事投稿ページ]
Single page[固定ページ]
Archive pages[アーカイブ]
Search results[検索結果]
Error Page[エラーページ]
Mobile Browser[携帯ページ]

です。変更が必要な方は変更してください。次のその下の項目に行きます、「Background Layout」の中の「Size」を「Full Screen」に変更しましょう。

今回の写真のような物ではなく、タイル状に並べたい方は「Normal」のままにしてください。細かい設定などありますが、現状必要ありません。最後に一番下にある「変更を保存」をクリックします。

スタイルシート[style.css]を変更

ブログを確認してみましょう。

背景を黒っぽい色に変更してしまったので、タイトルとメニューが見えなくなってしまったのと、せっかく背景を写真に変更したので、メインコンテンツとサイドバーの背景を透明にしてもう少し写真が見えるように変更します。管理画面　→　外観　→　テーマ編集　→　スタイルシート（style.css)を開くか、Transmit(FTPアプリ）でstyle.cssを開いてください。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

スタイルシート（style.css）を開いて、自分の環境だとだいたい４８０行目ぐらいにある「#wrap #wrap-in #main {」のセクションの一番したの行に下記のコードを足してください。

background: rgba(255,255,255,0.8);

最終的に下記のようになれば大丈夫です。

ブログを確認しましょう。

真っ白だった所が少し透明になって背景の写真が分かるようになりました。dmgadget(ディーエムガジェット）では過去にサイドバーの背景色を変更するカスタマイズを行っているのでサイドバーも同じように変更します。ちなみにサイドバーの背景色を白に変更したカスタマイズ記事はこちら、

WordPress「Stinger3」サイドバーの背景色を変更する方法 | dmgadget(ディーエムガジェット)

 

スタイルシート（style.css）を開いて、先程の「#wrap #wrap-in #main {」の上のセクションに「#wrap #wrap-in #side {」と云うセクションがあるのでその中の一番下に先程と同じ、

background: rgba(255,255,255,0.8);

を追加します。最終的にこうなります。

ブログを確認してください。これで透明に変更出来ました。

メインタイトルとサブタイトルの色を白に

メインタイトルとサブタイトルの色が黒系の色だと分からないので変更します。styel.cssの２２６行目あたりのブログタイトルのデフォルト設定はこちら、

２３５行目の「color: #333;」を「color: #FFF;」に変更
２４３行目の「color: #666;」を「color: #FFF;」に変更

最終的に下記のコードの様になります。

/*ブログタイトル*/

#container #header #header-in #h-l .sitename {
	font-size: 30px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 30px;
}
#container #header #header-in #h-l .sitename a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
/*ブログタイトル下の文*/

#container #header #header-in #h-l h1 {
	font-size: 12px;
	color: #FFF;
	font-weight: normal;
}

適当に分かり易く白に変更してしまったので、ご自身のサイトカラーに合わせてカラーコードを変更してください。

メニューをカスタマイズ

上のようにメニューの部分の文字など読めなくなってしまったので変更します。文字色は今のままで背景に白を追加します。スタイルシート（style.css）を開いて、９９３行目ぐらいから始まる、

#navi-in li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}

のセクションに、

background-color: #FFF;
background: rgba(255,255,255,0.5);
border-radius: 4px 4px 4px 4px;
padding-bottom: 5px;

を足します。最終的に下記のようになります。

#navi-in li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #FFF;
	background: rgba(255,255,255,0.5);
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 5px;
}

ブログを確認します。

メインとサイドバーの背景と一緒の枠が追加されました。が、今度は記事タイトルの背景色が透明になっていません。スタイルシートを編集します。

スタイルシート（style.css)を開いて２８０行目ぐらいからの「.entry-title-ac {」のセクション

.entry-title-ac {
	font-size: 24px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-weight: bold;
	font-size: 24px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	background-color: #FFF;
}

一番下の「background-color: #FFF;」を削除します。削除後、一回保存してブログを確認してみましょう。

消えました！が、しかしまだ変更しなければいけない部分がありました。関連記事のタイトル裏も透過していません。

こちらも修正します。スタイルシート（sytle.css)を開いて、３８８行目ぐらいの

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}

「background-color: #FFF;」を削除します。もう１カ所スタイルシートの（sytle.css）の１１５０行目ぐらいの「#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {」のセクション

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}

の中の「background-color: #FFF;」を削除します。保存してブログを確認してみましょう。

消えましたね！

完成

ちょっと記事が長くなってしまいましたが、どうだったでしょうか？読んで頂いてありがとうございました！シェアして頂けると大変嬉しいです^^ 今回、参考にさせて頂いたブログは、

Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする―

 

stingerのカスタマイズ　背景の変更 | ウィンドミル　いわしブログ

 

背景にフルスクリーン画像等　サイトデザインを大幅変更　備忘録

 

杉山様、ウィンドミル　いわしブログ様、More-interest様、大変参考になりましたありがとうございました。