ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/17

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

確認すると、、、

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

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

確認してみましょう。

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPress Backup to Dropbox
バックアップ命「WordPress Backup to Dropbox」を導入
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress リンク表示をはてなのブログカードと同じにする
WordPress リンク表示をはてなのブログカードと同じにする
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
「All in One SEO」でカテゴリーページが[noindex]になっていた。
「All in One SEO」でカテゴリーページが[noindex]になっていた。