TwentyEleven 背景全体に画像や写真を設置する

ワードプレスで背景全体に画像や写真を設置する方法です

おぉ~っ!!やっと、やっと、やり方が分かりました!!(遅いんじゃね!? えぇ、度々お伝えしていますが、私自身もまだ始めて半年過ぎくらいなんです。

で、まだまだ分からない事だらけ!!それを忘れないように書き残しています。で、背景についてなんですが、デフォルトの背景設定ではうまくいかない事がありました。

例えば、写真1枚や壁紙などを背景設定したりとか出来なかったんですね。分からなかった。それが今回判明しました!!(って、大げさな…

参考にさせて頂いたサイトさまはコチラ♫⇒Ri-mode Rainbow

参考ページ:CSSだけで背景を画面全体にする方法

いやぁ、スッキリしました。って事で、せっかくなので当サイトも早速背景を変更してみました(笑 海好きの私にとってはただの自己満wwですが、なにか?

背景全体に写真や画像を設置する方法

流れとしては、次の様になります。

  1. 管理画面の「メディア」から「新規追加」で背景に設定したい画像をアップロードする
  2. その画像の「編集」画面からまたは、メディアライブラリから「ファイルのURL」を取得する
    メディアライブラリ①
  3. 以下の様に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」をコピペして下さい。コレで、サイトの背景に画像や写真が貼り付けられたハズです。

おぉ~っ!!背景だけで癒されそうです(笑

背景画像や写真など/参考サイトさま



にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

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