ワードプレスで背景全体に画像や写真を設置する方法です。
おぉ～っ!!やっと、やっと、やり方が分かりました!!(遅いんじゃね!? えぇ、度々お伝えしていますが、私自身もまだ始めて半年過ぎくらいなんです。
で、まだまだ分からない事だらけ!!それを忘れないように書き残しています。で、背景についてなんですが、デフォルトの背景設定ではうまくいかない事がありました。
例えば、写真1枚や壁紙などを背景設定したりとか出来なかったんですね。分からなかった。それが今回判明しました!!(って、大げさな…
参考にさせて頂いたサイトさまはコチラ♫⇒Ri-mode Rainbow
参考ページ：CSSだけで背景を画面全体にする方法
いやぁ、スッキリしました。って事で、せっかくなので当サイトも早速背景を変更してみました(笑 海好きの私にとってはただの自己満wwですが、なにか?
背景全体に写真や画像を設置する方法
流れとしては、次の様になります。
- 管理画面の「メディア」から「新規追加」で背景に設定したい画像をアップロードする
- その画像の「編集」画面からまたは、メディアライブラリから「ファイルのURL」を取得する
- 以下の様にCSSスタイルシートを追加/編集する
それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて、次の箇所を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
body { /* ココです!! */
background: #fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
ココでは、テーマTwentyElevenのスタイルシートを例にとっていますが、その他のテーマの場合も同様の箇所があると思いますので、そこに追加/編集すればOKです。
TwentyTwelve、Tenについても詳細が分かりましたらアップする予定です。それでは下記の様に追加/編集してみて下さい。
body { /* ココです!! */
/* background: #fff; */
background: url(ファイルのURL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
line-height: 1;
}
赤の部分に上記でお伝えした「ファイルのURL」をコピペして下さい。コレで、サイトの背景に画像や写真が貼り付けられたハズです。
おぉ～っ!!背景だけで癒されそうです(笑
背景画像や写真など/参考サイトさま
- フリー素材*ヒバナ (背景素材や壁紙素材など)
- フリー素材屋Hoshino (フリーの写真素材など)
