WordPress[Stinger5] プラグインなしで背景を画像にする

以前、Stinger3を使っていた時に背景を画像にする備忘録を書かせて頂きました。

WordPress[Stinger3] 背景を画像や写真に変更する方法 | dmgadget(ディーエムガジェット)

今回はテーマを「Stinger5」に変更したのに伴い、前回使用したプラグイン「Background Manager」なしで背景を画像にするカスタマイズ方法も残したいと思います。

カスタマイズには前回同様、MAMPを使ったローカル環境で行いたいと思います。

OSXローカル環境にwordpressをインストールする方法 | dmgadget(ディーエムガジェット)

背景に使用する画像を軽量化

背景画像は一枚の大きな画像になるので、サイトの読み込み時間の短縮にもなるように軽量化したいと思います。カスタマイズ用の背景画像は「ぱくたそ」さんから頂戴しております。Lサイズでダウンロードしております。

ぱくたそ – フリー写真素材・無料ダウンロード

ダウンロードした写真をAdobeのPhotoshopで開いて現状のサイズを確認すると、

横　3200　縦　2135 解像度　350　となっております。このままアップしたら重くなるのでこれを下記の数値に変更します。

横　1280　縦　854 ぐらいにして、web用なので解像度を72に設定これでファイルを書き出します。

最初ダウンロードしたファイルサイズは6.3MBほどでしたが、サイズと解像度を調整して約1.5MBまで減らすことが出来ました。しかしまだ軽量化したいので、このファイルをJPEGminiに通してもう少しサイズダウンします。Jpegminiを持っていない方もweb版Jpegminiがあるのでそちらで軽量化してみてください。Jpegminiに関する記事はこちら、

Mac[JPEGmini] Windows版もあるJPEG画像圧縮ツール | dmgadget(ディーエムガジェット)

そしてJpegminiにファイルをドロップして、

元々1.5MBほどあったファイルサイズが465KBまで小さくなりました！Jpegminiすごい！これを使って背景に設置したいと思います。

画像をメディアファイルにアップロード

先程仕込んだ画像ファイルをWordPressのメディアにアップロードします。ダッシュボード　→　メディア　→　新規追加

アップロード後、右の「編集」ボタンをクリックします。

編集画面の右側に表示されている「ファイルのURL」をコピーしてメモ帳などに保管しておいてください。後ほどこのURLを設定に使用します。

Style.cssを編集して画像を設置

WordPressのダッシュボードから　外観　→　テーマ編集　→　Style.css（スタイルシート）を選択するか、transmitのようなFTPアプリを使ってstyle.cssに編集を加えます。先日、stinger5に子テーマを導入したのでそちらで説明していきます。

WordPressテーマ「Stinger5」に子テーマを導入する方法 | dmgadget(ディーエムガジェット)

Style.cssを開いて下記のコードを一番下または任意の場所にコピペします。

/*-----------------------------
背景画像を追加
------------------------------*/
body {
background: url('使用したい画像のURL');
background-attachment: fixed;
background-size: cover;
}

上記の「使用したい画像のURL」部分に先程アップロードした背景画像のURLをいれてください。自分の場合こんな感じです。

/*-----------------------------
背景画像を追加
------------------------------*/
body {
background: url('//localhost:8888/wp/test02/wp-content/uploads/2015/02/test_haikei.jpg');
background-attachment: fixed;
background-size: cover;
}

保存して確認してみましょう。一発目読み込みに時間がかかる場合もあります。表示されない場合ブラウザーの更新ボタンを何度か押してください。

無事表示されました。が、サイドバーの背景が白じゃないので書いてある文字が読みにくくなってしまっています。こちらを変更します。

Style.cssにサイドバーに白の背景色を付ける設定を追加

下記のコードを先程と同じStyle.cssにコピペします。

/*--------------------------------
サイドバー
---------------------------------*/
aside {
	background: #fff;
	padding: 10px;
	border-radius: 4px;
	background: rgba(255,255,255,1);
}
aside .rssbox a {
	background: #333;
}
input#searchsubmit {
	background: #333;
}

確認すると、、、

サイドバーが一番下に落ちてしまっています。こちらを修正する為に下記のコードもコピペします。

/*--------------------------------
メディアクエリ
---------------------------------*/
@media only screen and (min-width: 780px) {
	aside {
		width: 280px;
	}
}
@media only screen and (max-width: 780px) {
	nav {
		margin: 0 20px;
	}
	main {
		margin: 0 0 20px; 
	}
 
}

確認してみましょう。

これでサイドバーの位置も戻って背景も白になりました。

サイドバーの背景を透過させたい人は？

先程サイドバーの背景を白にする時にペーストしたこの記述

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

こちらの（）なかの一番右の「1」を「0.7」などに変更することによって透過率を変更出来ます。0.7に変更すると？

こんな感じになります。メインの記事の後ろも透過させたい方は下記を子テーマのSytle.cssにコピペしてください。

/*レイアウト スマートフォン 背景透過
----------------------------------------------------*/
main {
	background: rgba(255,255,255,0.7);
}

/*media Queries タブレットサイズ　背景透過
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
main {
	background: rgba(255,255,255,0.7);
}
}
/*media Queries PCサイズ　背景透過
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
main {
	background: rgba(255,255,255,0.7);
}
}

親テーマの方は、例えばレイアウト スマートフォンだったら親テーマ内のStyle.cssのレイアウト スマートフォンの中の「main」の一番下の行に「 background: rgba(255,255,255,0.7);」を追加してください。タブレット、PCサイズも同様に行います。

透過率は0.8か0.7ぐらいがおすすめですが、その辺は背景画像との相性もあるとおもうのでお好みでどうぞ。下記のように変更できました。

最後にナビゲーションバーの背景も白で透過させる

ナビゲーションバーの背景も白で透過させたい人は下記のコードもコピペすると変更出来ます。

/*--------------------------------
ナビゲーションバー　背景透過
---------------------------------*/
nav {
	background: #fff;
	margin: 10px 0px;
	border-radius: 4px;
	background: rgba(255,255,255,0.8);
}

そして最終的にこなりました。

どうでしょうか？ちょっとオリジナル感が増した気がしますね。読んで頂いてありがとうございました。