WordPress[Stinger3] 背景を画像や写真に変更する方法
- 2014.03.03
- WORDPRESS
![WordPress[Stinger3] 背景を画像や写真に変更する方法](https://dmgadget.net/wp-content/uploads/2014/03/wordpress-stinger3-background-manager_eye.jpg)
目次
「Stinger3」のデフォルトの背景だとこんな感じですが、
背景を写真にすると!?
こんな感じになります。ガラッと雰囲気が変わります。今回はWordPressのプラグイン「Background Manager」を使って「Stinger3」の背景を画像や写真に変更する方法を備忘録として残したいと思います。画像も写真も基本的にはやり方は一緒なので今回は背景を写真にする方向でやってみたいと思います。今回もOSXローカル環境にwordpressをインストールする方法で構築したWordPressの環境で作業して行きたいと思います。ローカル環境はあると便利なのでお時間がある方は是非トライしてみてください^^
WordPressプラグイン「Background Manager」を導入
背景にしたい写真を探します
まず背景にしたい写真を探しにいつも大変お世話になっている「ぱくたそ」さんで高画質な写真をダウンロードしてきます。「ぱくたそ」さんでは4000枚を超える高画質な写真が無料でしかも商用可能です。多くのブロガーさんたちも愛用していてモデルさんなどどこかのブログで一度は見た事がある方々だと思います。
色々写真を探してみて、今回はちょっと大人っぽいw横浜の夜景の写真でトライしてみます。「写真のダウンロードはこちらから」をクリックします。
次に、「SサイズかLサイズ」どちらにしますか?と聞かれるので迷わず「L」をクリックします。すると自動でダウンロードが始まります。
PhotoShopで編集
ダウンロードした画像をWEB用に少し編集します。もちろんPhotoShop以外でも出来るのでやってみてください。PhotoShopで先程ダウンロードした写真を読み込んでレゾリューションをWEB用に変換します。デフォルトだとレゾリューションは300ですが、
こちらを72に変更します。変更後、名前を適当に決めて保存します。
ここで一手間加えます
JPEGminiやImageOptimで画像の容量を軽量化して読み込みが遅くならないようにします。JPEGminiは無料版もあります。ImageOprimはこちらの過去の記事で紹介もしています。無料なので使ってみてください。
今は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を開いてください。
スタイルシート(style.css)を開いて、自分の環境だとだいたい480行目ぐらいにある「#wrap #wrap-in #main {」のセクションの一番したの行に下記のコードを足してください。
background: rgba(255,255,255,0.8);
最終的に下記のようになれば大丈夫です。
ブログを確認しましょう。
真っ白だった所が少し透明になって背景の写真が分かるようになりました。dmgadget(ディーエムガジェット)では過去にサイドバーの背景色を変更するカスタマイズを行っているのでサイドバーも同じように変更します。ちなみにサイドバーの背景色を白に変更したカスタマイズ記事はこちら、
スタイルシート(style.css)を開いて、先程の「#wrap #wrap-in #main {」の上のセクションに「#wrap #wrap-in #side {」と云うセクションがあるのでその中の一番下に先程と同じ、
background: rgba(255,255,255,0.8);
を追加します。最終的にこうなります。
ブログを確認してください。これで透明に変更出来ました。
メインタイトルとサブタイトルの色を白に
メインタイトルとサブタイトルの色が黒系の色だと分からないので変更します。styel.cssの226行目あたりのブログタイトルのデフォルト設定はこちら、
235行目の「color: #333;」を「color: #FFF;」に変更
243行目の「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)を開いて、993行目ぐらいから始まる、
#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)を開いて280行目ぐらいからの「.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)を開いて、388行目ぐらいの
#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .saisin { background-color: #FFF; margin: 0px; padding: 0px; }
「background-color: #FFF;」を削除します。もう1カ所スタイルシートの(sytle.css)の1150行目ぐらいの「#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;」を削除します。保存してブログを確認してみましょう。
消えましたね!
完成
ちょっと記事が長くなってしまいましたが、どうだったでしょうか?読んで頂いてありがとうございました!シェアして頂けると大変嬉しいです^^ 今回、参考にさせて頂いたブログは、
杉山様、ウィンドミル いわしブログ様、More-interest様、大変参考になりましたありがとうございました。
-
前の記事
WordPress[Stinger3] サイドバーのアイコンを変更する方法 2014.03.02
-
次の記事
WordPress[Tweetily] 過去記事を自動ツイートする方法 2014.03.04