【CSSで画像指定】背景・コンテンツ前後に画像を使う、基本スタイル集！ブログのカスタマイズ

CSSでcontent・backgroundの色んな指定方法

ブログの一部に画像を使いスタイルを変更するカスタマイズ！CSSで指定する色々な方法を初心者向けに紹介します。

本文やサイドバーなど、装飾したいタグ前後に
ボーダーの代わりに画像
ブログの背景、全体に

カラー1色使うより印象がグッと変わってきて、画像のイメージによってスタイリッシュになったり・優しい印象に変わります。CSSで指定する方法をチェックして、カスタマイズを楽しんでくださいね。

1 CSSで背景指定する範囲の決めかた
2 画像のパスを指定する2つの書き方
3 背景・前後左右に画像を使うとき、CSSの書きかた
4 いらない装飾を消したい
5 contentと背景backgroundの大まかな違い
6 さいごに

CSSで背景指定する範囲の決めかた

背景に画像を使いたいとき、どの範囲をCSSで指定するか決めることが大事です。例えばPCで見える背景なら、ヘッダー・コンテンツ（main部分の一部）・サイドバー・フッターの背景ですよね。

メイン・サブのHTML。背景を指定するCSS

背景をレンガにした場合、例えばbody { background: url(画像のurl); }とか。
mainで囲まれた部分の背景は、白に。
sideで囲まれた背景はピンクに。

このようにHTMLで囲まれた部分のみ反映されます。※背景にする場合は、画像が連なるので連なっても良いように画像加工ツールでそれなりに加工が必要な場合も。

コンテンツ部分やサイドバーのh2など、装飾の変更を個別にしやすいようにテーマ製作者さんが事前にhtmlタグに、class="content"やclass="content-under"などマークしているワケです。

コンテンツのh2、コンテンツ下のh2タグとそのスタイル指定方法

class="content"に囲まれたhタグは.content h2やclass="content-under"などマークがあれば、.content-under h2と指定すれば、そこだけ反映するワケです。

ポイント

そのHTMLに囲まれた範囲（親要素）をCSSで指定することで、スタイルが反映されます。

LINK親要素の指定方法！ブログ初心者にCSSのセレクタ簡単な付け方を説明

HTMLの属性にあたるid・classはCSSでどのように書くか。CSSを指定しても効かないときはCSSの強さが関係し、それを優先順位と言います。詳しくは下記をどうぞ。

LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは

画像のパスを指定する2つの書き方

CSSで画像を指定したいとき、画像をアップしたurl・パスが必要です。

url(http://hoge.com/…/hoge.png)とURLを指定する方法
サーバーにアップした画像の階層url(images/hoge.png)を指定する方法

アップした画像のURLは、どこで確認できるか。WordPressなら下記を参考にしてください。

LINKWordPress初心者に画像追加時のメディアを説明！画像サイズ変更・画像のURLはどこ！？キャプション・代替テキストは超大事だからチェックねっ

※画像が表示されないときに表示する代替テキストはHTMLタグにつけるものなので、HTMLタグ内にalt=”代替テキスト”を追加するものです。WordPressでHTMLで画像のパスを指定する場合は下記。

LINK「get template directory uri、get stylesheet directory uri」WordPress関数の違いは親テーマと子テーマのディレクトリ

※背景を画像にするなら代替テキストより、画像が表示されないとき用に、画像のパスの1つ上に（上述の）背景色を追加した方が良い場合も

WordPressで画像のディレクトリ（階層）を取得する場合は、ブログフォルダ内の階層に入れて取得する方法もあります。

公開フォルダがdomain.comまたは・public_htmlフォルダ内のwp-contentと同じ階層にあるimagesフォルダ内にhoge.pngを入れてる場合。

url(images/hoge.png)と記載もできる。

http://domain.com/wp-content/uploads/2016/03/hoge.pngの場合

url(wp-content/uploads/2016/03/hoge.png)と記載もできる。

※WordPressで実験した結果です＾＾

背景・前後左右に画像を使うとき、CSSの書きかた

装飾したいタグの前後左右や背景に画像を入れたいとき、CSSをどう書けば思いどおりの場所に画像を置けるか、思いつくパターンの装飾は下記。

背景全体に、小さな画像を並べたい
背景に1つだけ、範囲指定して画像を入れたい
背景の縦方向に小さな画像を並べたい
ボーダー感覚で画像を並べて使いたい

ここでの装飾について。

画像はフォントサイズと同じ大きさのものを使用
なので画像の大きさにより、余白の変更が必要な場合も
装飾の範囲を解りやすくするための基本スタイル
- 灰色の線（ボーダー）
- 横幅を300で指定
- 行間を2倍に指定

<div class=”sample-x sample-box-1“>この範囲のスタイルを例にする</div>

この範囲のスタイルを例にする

.sample-box-1 {
	border: 1px solid #ddd; /*灰色の枠*/
	width: 300px; /*横幅*/
	line-height: 2; /*行の間隔2倍*/
}

.sample-box-1 {

border: 1px solid #ddd; /*灰色の枠*/

width: 300px; /*横幅*/

line-height: 2; /*行の間隔2倍*/

}

以降、sample-box-1を抜いたHTMLで紹介し、順番に画像の指定方法を書いていきますね。

任意の場所に指定し、画像を1つ置きたい

CSSのプロパティcontentを使って画像を設置するパターンをいくつか取り上げ、表示の仕方・CSS・CSSの説明を書いていきますね。

ちなみにスタイルシートリファレンスでcontentは下記の通り。

content …… 内容（コンテンツ）を挿入する

contentプロパティは、要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。 contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。

～　中略　～

文字列
挿入する文字列を「”」または「’」で括って指定します。
URI（URL）でファイルを指定
URI（URL）で画像や音声等のファイルを指定します。

～　後略　～

引用元：content｜HTMLクイックリファレンス：スタイルシートリファレンス

左側に画像を置くCSS

<div class="sample-2">
この左側に画像をおきたい場合
</div>

この左側に画像をおきたい場合

</div>

この左側に画像をおきたい場合

.sample-2:before {
	content: url(画像のURL);
	margin: 0 0.2em;
}

.sample-2:before {

content: url(画像のURL);

margin: 0 0.2em;

}

文字前にコンテンツを作る指定
content：コンテンツとして画像を配置

トップに画像を置きたい

<div class="sample-3">
このトップに画像を入れたい
</div>

このトップに画像を入れたい

</div>

このトップに画像を入れたい

.sample-3 {
	position: relative;
	padding-top: 10px;
}
.sample-3:before {
	content: url(画像のURL);
	position: absolute;
	top: -14px; /*画像の高さ分ほど指定*/
	left: 50%; /*センターに*/
	margin-left: -8px; /*画像の半分の横幅指定*/
}

.sample-3 {

position: relative;

padding-top: 10px;

}

.sample-3:before {

content: url(画像のURL);

position: absolute;

top: -14px; /*画像の高さ分ほど指定*/

left: 50%; /*センターに*/

margin-left: -8px; /*画像の半分の横幅指定*/

}

キホンの位置position: relative;を決める
padding-top：画像下に余白が欲しいとき
その前:before に画像を置く。
position absolute：基準に合わせて動かす
topから画像の幅分、移動して画像中央に合わせた（画像幅16px）
leftから50％（真ん中寄せ）。※画像の左端が基準
画像幅の半分、左へ寄せてセンターに。

幅100pxのマスキングテープを使ってみる

このマスキングテープを置いてみると。

この領域上、中央に画像を置く

.sample-13:before { margin-left: -50px; }

マスキングテープの幅が100pxなので、上記コードから変更するのは左外側余白。値を-50に変更すればOK！ってワケです。

幅100pxのマスキングテープを使って、角度をつけてみる

この領域うえ中央に画像をナナメに置く

.sample-14 {
	position: relative;
	padding-top: 15px;
}
.sample-14:before {
	content: url(画像のURL);
	position: absolute;
	top: -16px;
	left: 50%;
	margin-left: -50px;
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	margin-bottom: 1em;
}

.sample-14 {

position: relative;

padding-top: 15px;

}

.sample-14:before {

content: url(画像のURL);

position: absolute;

top: -16px;

left: 50%;

margin-left: -50px;

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

-o-transform: rotate(-5deg);

-ms-transform: rotate(-5deg);

transform: rotate(-5deg);

margin-bottom: 1em;

}

変更した点は、

3行目要素の内側上部余白の広さ
8行目画像のtopからの位置
10～15行目から、ナナメに角度をつける
16行目画像下に余白を追加

こうして画像の大きさによって、位置を微調整すれば思った通りにスタイルが決まっていきますよ。

右側に画像を置きたい

<div class="sample-4">
この右側に画像をおきたい
</div>

この右側に画像をおきたい

</div>

この右側に画像をおきたい

.sample-4 {
	position: relative;
}
.sample-4:after {
	content: url(画像のURL);
	position: absolute;
	right: 0.4em; /*画像の左に余白*/
}

.sample-4 {

position: relative;

}

.sample-4:after {

content: url(画像のURL);

position: absolute;

right: 0.4em; /*画像の左に余白*/

}

下に画像を置きたい

<div class="sample-5">
この領域下、中央に画像を置く
</div>

この領域下、中央に画像を置く

</div>

この領域下、中央に画像を置く

.sample-5 {
	position: relative;
	padding-bottom: 6px;
}
.sample-5:after {
	content: url(画像のURL);
	position: absolute;
	bottom: -18px; /*画像の高さ分指定*/
	left: 50%; /*センターに*/
	margin-left: -8px; /*画像の半分の横幅指定*/
}

.sample-5 {

position: relative;

padding-bottom: 6px;

}

.sample-5:after {

content: url(画像のURL);

position: absolute;

bottom: -18px; /*画像の高さ分指定*/

left: 50%; /*センターに*/

margin-left: -8px; /*画像の半分の横幅指定*/

}

キホンの位置position: relative;を決める
padding-bottom：下に内側余白をつける
その前:before に画像を置く。
基準に合わせて動かす
bottomから画像の幅ほど、移動して画像中央に合わす
leftから50％（真ん中寄せ）。※画像の左端が基準
画像幅の半分、左へ寄せてセンターに。

下に別の画像を置いてみる

連なったパールの画像を要素下に配置したスタイルを例として使用してみますね。

この領域下、中央に画像を置く

.sample-15 {
	position: relative;
	padding-bottom: 12px;
}
.sample-15:after {
	content: url(画像のURL);
	position: absolute;
	bottom: -8px; /*画像の高さ分考慮*/
	left: 50%; /*センターに*/
	margin-left: -140px; /*画像横幅280pxの半分を指定*/
}

.sample-15 {

position: relative;

padding-bottom: 12px;

}

.sample-15:after {

content: url(画像のURL);

position: absolute;

bottom: -8px; /*画像の高さ分考慮*/

left: 50%; /*センターに*/

margin-left: -140px; /*画像横幅280pxの半分を指定*/

}

画像にあわせて3・8・10行目の数字の値を変更したイメージです。

縦方向に小さな画像を並べたい

画像を並べたいときは、CSSのプロパティbackgroundを使って背景を並べていきます。縦・横方向だけ並べたい・いや1つだけ使いたい。ってときがありますよね。

repeat-x：横方向
repeat-y：縦方向
no-repeat：並べないで1つだけ表示

などルールを書いてあげるとすんなりいきます。その他上下左右どこを基準に置くかtop・bottom・left・rightなどの指定もできるので、チェックしてくださいね。

HTMLクイックリファレンスの下記を参考にしたら、分かりやすいですよ。

参考background-repeat｜スタイルシートリファレンス

参考background-position …… 背景画像の表示開始位置を指定する｜スタイルシートリファレンス

縦方向の左サイドlに入れたい

<div class="sample-7">
この左の縦方向のみ画像を入れたい
</div>

この左の縦方向のみ画像を入れたい

</div>

この左の縦方向のみ画像を入れたい

.sample-7 {
	background: url(画像のURL) repeat-y left bottom;
	padding-left: 1.2em;
}

.sample-7 {

background: url(画像のURL) repeat-y left bottom;

padding-left: 1.2em;

}

repeat-y：画像の縦方向を記すスタイル
left：左
bottom：この場合、下を基準にしたら画像が半分に見切れない為
padding-left：文字が始まる位置を指定

縦方向の右サイドに入れたい

<div class="sample-8">
この領域の右サイドに背景を入れる
</div>

この領域の右サイドに背景を入れる

</div>

この領域の右サイドに背景を入れる

.sample-8 {
	background: url(画像のURL) repeat-y right bottom;
}

.sample-8 {

background: url(画像のURL) repeat-y right bottom;

}

repeat-y：縦方向を指定
right：右サイドを指定
bottom：上記同様

ボーダー感覚で横方向に画像を並べて使いたい

下部に画像を横に並べたい

<div class="sample-9">
この下に画像をならべボーダー風に
</div>

この下に画像をならべボーダー風に

</div>

この下に画像をならべボーダー風に

.sample-9 {
	background: url(画像のURL) repeat-x left bottom;
	padding-bottom: 0.8em;
	padding-left: 0.5em; /*文字の左に余白0.5文字分*/
}

.sample-9 {

background: url(画像のURL) repeat-x left bottom;

padding-bottom: 0.8em;

padding-left: 0.5em; /*文字の左に余白0.5文字分*/

}

repeat-x：横方向
left bottom：左下を指定
padding-bottom：下側の内側余白で画像のボーターの上下の位置調整
padding-left：文字の始まりを余白で調整

上部に画像を横に並べたい

<div class="sample-10">
この上部に画像を並べる
</div>

この上部に画像を並べる

</div>

この上部に画像を並べる

.sample-10 {
	background: url(画像のURL) repeat-x left top;
	padding-top: 16px;
	padding-left: 0.5em; /*文字の左に余白0.5文字分*/
}

.sample-10 {

background: url(画像のURL) repeat-x left top;

padding-top: 16px;

padding-left: 0.5em; /*文字の左に余白0.5文字分*/

}

repeat-x：背景画像の横並びを指定
left top：左上を指定
padding-top：内側上部の余白で、画像上下の位置調整
padding-left：文字の書き始めを、内側余白で調節

背景全体に画像を並べたい

<div class="sample-1">
この背景全体に画像をならべる
</div>

この背景全体に画像をならべる

</div>

この背景全体に画像をならべる

.sample-1 {
	background: url(画像のURL);
}

.sample-1 {

background: url(画像のURL);

}

背景全体に並ぶシンプルなCSS

画像はハートを使うと、ウットウしいので変えてます＾＾；

いらない装飾を消したい

元々ついている装飾を消したいときがあります。例えばボーダー（線）を消したいなら、そのCSSを消すと消えます。

子テーマを使って、親テーマの更新をしたらボーダーがまた復活するので、親テーマにあるそのボーダーを初期化してスタイルを消せば、更新してもボーダーが現れることはしません。

親テーマにある、例えばボーダー。このCSSを初期化する値を書いてみますね。

元々ボーダーがあるスタイル

.sample-6 {
	background: url(画像のURL) no-repeat left;
	padding-left: 1.2em;
}

.sample-6 {

background: url(画像のURL) no-repeat left;

padding-left: 1.2em;

}

background背景：左に1つだけ画像を入れたスタイル
padding-left内側余白の左：文字の書き始めを1.2文字分あけた

ボーダーを消したスタイル

.sample-11 {
	border: none;
	background: #fff2f2 url(画像のURL) no-repeat left;
	padding-left: 1.2em;
}

.sample-11 {

border: none;

background: #fff2f2 url(画像のURL) no-repeat left;

padding-left: 1.2em;

}

borderボーダーのスタイル：noneで初期化
background背景：薄ピンク系#fff2f2を指定
no-repeat：画像を1つ（繰り返さない）
left：左に追加
padding-left：文字の書き始めに内側余白を

初期化したいスタイルを検索して値をいれると良いですよ。例）padding 初期値　などで検索

contentと背景backgroundの大まかな違い

文字の前や後ろにcontentで、画像のURLを指定すると、画像が1つ追加されるイメージすればCSS初心者的に分かりやすいです。

背景として指定すれば、画像がどこまでも並ぶイメージなので、上述のよう縦方向や横方向に並べたりします。背景に1つの画像を指定したい場合は、no-repeatを指定してくださいね。

この右側の背景に、1つ画像を置く

.sample-12 {
	background: url(画像のURL) no-repeat right;
}

.sample-12 {

background: url(画像のURL) no-repeat right;

}

no-repeat：背景に1つだけ画像を置くイメージ
right：『基準を左に』的な意味。

contentを使ったスタイル。
- 見出しなどHTMLタグの前後に指定し、画像を1つ置きたい
backgroundを使ったスタイル。
- HTMLタグの縦方向に小さな画像を並べたい

さいごに

画像を使ったカスタマイズは、自分が置きたい場所に反映させるには初心者的にCSSはどうやって書けば良いのか、難しいです。

自分で好きなようにカスタマイズしたい！
でもCSSの書き方が分からない。。

そんな初心者さんが、このページを参考にして、思い通りにカスタマイズできますように。

一例ですけど、レースの背景画像を使った応用カスタマイズもどうぞ。

背景左サイドレースのカスタイマイズ例

LINKSimplicity2のカスタマイズ！スマホメニューの可愛いスタイル

TOPに戻るボタン、画像変更も可愛い！

LINKCSSでTOPに戻るボタン、hover画像のみPCで表示させる超かわいい、カスタマイズ【Simplicity2】

番号なしリストを見やすくするカスタマイズ！

LINK番号なしulリストを記号・マーク・画像で装飾！CSS初心者が応用できるカスタマイズ説明あり

それでは、かうたっくでした＾＾