ブログの画像に使えるCSSスタイル20選！コピペで簡単！

「良質な記事に欠かせないもの」そう…画像！

今回はブログの画像に使えそうなCSSを紹介します！

全てコピペでできるようになっています。

など、画像に関して地味に困ったことありませんか？

それらの悩みは今日でおしまい！さぁCSSを開くのです！

とりあえず20のスタイル用意しました！今後も思いついたら増やしていく予定です！

HTMLはWordPressであれば、プラグイン「AddQuicktag」がオススメです。いつでも1クリックで呼び出すことができるようになります。

画像に使えるCSSまとめ！

小さい画像の大きさを比率を変えずに広げる

参考図ではわかりにくいですが、サイズが小さい画像を比率を変えずに最大限広げる方法です。

スマホで見てもPCで見ても表示領域にピッタリ収まるようになります。

画質が悪いと目立つので注意です。

HTML

<p class="img-responsive">
ここに画像を挿入
</p>

CSS

.img-responsive{
  padding:0 !important;
}
.img-responsive img{
  width:100%;
  max-width:800px;
  height:auto;
}

max-widthが最大値です。800pxより大きくしたい場合は数値を変更してください。

padding(余白)は必要がなければ削除してください。

周りに線を入れる

背景と同化して境目がわからないときに使えます。

HTML

<p class="img-border">
ここに画像を挿入
</p>

CSS

.img-border{
	padding:0 !important;
}
.img-border img{
	border:1px solid #aaa;
}

1pxが線の太さ、solidが線の種類、#aaaが線の色(カラーコード)です。

他にもいろいろあるので調べて見てください。

padding(余白)は必要がなければ削除してください。

周りに影を入れる

線と同じく背景と同化して境目がわからないときに使えます。おしゃれっぽくなります！

HTML

<p class="img-shadow">
ここに画像を挿入
</p>

CSS

.img-shadow{
	padding:0 !important;
}
.img-shadow img{
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

0がX軸距離、2pxがY軸距離、5pxがぼかし距離、rgbaは色のRGB数値と透明度です。

padding(余白)は必要がなければ削除してください。

角丸にする

TwitterやLINEのように画像を角丸にします。

HTML

<p class="img-radius">
ここに画像を挿入
</p>

CSS

.img-radius{
	padding:0 !important;
}
.img-radius img{
	border-radius:15px;
}

上下左右の角を15px丸くしています。

ちなみに

border-radius: 1px 2px 3px 4px;

と書けば左上、右上、右下、左下と別々の角丸にできます。つまり、上だけ角丸、下だけ角丸なども可能です。

padding(余白)は必要がなければ削除してください。

トリミングする(四角形)

縦幅と横幅を決めて切り抜きます。

画像編集ソフトなんて必要ありません！

ただし、ブラウザのInternetExplorerでは使えないので一部の人はそのまま表示されてしまいます。

HTML

<p class="img-object-fit">
ここに画像を挿入
</p>

CSS

.img-object-fit{
	padding:0 !important;
}
.img-object-fit img{
	width: 250px;
	height: 250px;
	object-fit: cover;
}

横幅250px、縦幅250pxで切り抜きます。

padding(余白)は必要がなければ削除してください。

トリミングする(円)

円の形で切り抜きます。

HTML

<p class="img-object-fit-radius">
ここに画像を挿入
</p>

CSS

.img-object-fit-radius{
	padding:0 !important;
}
.img-object-fit-radius img{
	width: 250px;
	height: 250px;
	object-fit: cover;
	border-radius:50%;
}

横幅250px、縦幅250pxで切り抜きます。

padding(余白)は必要がなければ削除してください。

中央寄せする

画像を真ん中に寄せる方法です。

HTML

<p class="img-center">
ここに画像を挿入
</p>

CSS

.img-center{
	text-align:center;
	padding:0 !important;
}

padding(余白)は必要がなければ削除してください。

右寄せする

画像を右に寄せる方法です。

HTML

<p class="img-right">
ここに画像を挿入
</p>

CSS

.img-right{
	text-align:right;
	padding:0 !important;
}

padding(余白)は必要がなければ削除してください。

文字を回り込ませる(左)

画像の周りに文字を配置させたい人はこれ！雑誌みたいにできますよ！

画像を左に配置して文字を右へ自然と流します。使う機会あるかどうかわかりませんがやってみてください。

ちなみにスマホで見ると微妙な感じになります。小さい画像でないと意味がありません。

画面が大きいパソコンで見ればしっかり回り込んでるかと思います。パソコンユーザーが多いサイトならいいですね！

HTML

<p>ここにテキスト</p>
<p class="img-float-left">
ここに画像を挿入
</p>
<p>ここにテキスト</p>

CSS

.img-float-left{
	float:left;
	padding:0 !important;
	margin:0 1em 1em 0;
}
.img-float-left img{
	display:block;
}

padding(余白)は必要がなければ削除してください。

文字を回り込ませる(右)

画像の周りに文字を配置させたい人はこれ！雑誌みたいにできますよ！

画像を右に配置して文字を左へ自然と流します。使う機会あるかどうかわかりませんがやってみてください。

ちなみにスマホで見ると微妙な感じになります。小さい画像でないと意味がありません。

画面が大きいパソコンで見ればしっかり回り込んでるかと思います。パソコンユーザーが多いサイトならいいですね！

HTML

<p>ここにテキスト</p>
<p class="img-float-right">
ここに画像を挿入
</p>
<p>ここにテキスト</p>

CSS

.img-float-right{
	float:right;
	padding:0 !important;
	margin:0 0 1em 1em;
}
.img-float-right img{
	display:block;
}

padding(余白)は必要がなければ削除してください。

ぼかす

見られたくない画像はモザイクかけましょう！

これもCSSで出来てしまいます！

HTML

<p class="img-blur">
ここに画像を挿入
</p>

CSS

.img-blur{
	padding:0 !important;
}
.img-blur img{
	-ms-filter: blur(6px);
	filter: blur(6px);
}

数値を変更すればぼかし具合が変わります。

padding(余白)は必要がなければ削除してください。

色をかぶせる

HTML

<p class="img-filter">
ここに画像を挿入
</p>

CSS

.img-filter{
	background-color: #1398b2;
	padding:0 !important;
}
.img-filter img{
	display:block;
	opacity:0.6;
}

background-colorにカラーコードを入れてください。

opacityで透明度を調整します(0〜1の間)。

padding(余白)は必要がなければ削除してください。

モノクロにする

モノクロにすると何でもオシャレに見えますよね！

白黒もCSSで出来ますよ！

HTML

<p class="img-grayscale">
ここに画像を挿入
</p>

CSS

.img-grayscale{
	padding:0 !important;
}
.img-grayscale img{
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

数値を変更すれば白黒具合が変わります。

padding(余白)は必要がなければ削除してください。

セピアにする

モノクロがあれば、もちろんセピアもあります。

HTML

<p class="img-sepia">
ここに画像を挿入
</p>

CSS

.img-sepia{
	padding:0 !important;
}
.img-sepia img{
	-ms-filter: sepia(60%);
	filter: sepia(60%);
}

数値を変更すればセピア具合が変わります。

padding(余白)は必要がなければ削除してください。

彩度をあげる

料理ブログにおすすめ！

彩度をあげるだけで美味しそうに見えるよ！

HTML

<p class="img-saturate">
ここに画像を挿入
</p>

CSS

.img-saturate{
	padding:0 !important;
}
.img-saturate img{
	-ms-filter: saturate(200%);
	filter: saturate(200%);
}

数値を変更すれば彩度が変わります。100%が通常(初期値)。

padding(余白)は必要がなければ削除してください。

コントラストをあげる

これまた料理ブログにおすすめ！彩度と組み合わせて使おう！

HTML

<p class="img-contrast">
ここに画像を挿入
</p>

CSS

.img-contrast{
	padding:0 !important;
}
.img-contrast img{
	-ms-filter: contrast(120%);
	filter: contrast(120%);
}

数値を変更すればコントラストが変わります。100%が通常(初期値)。

padding(余白)は必要がなければ削除してください。

明るさをあげる

スマホで写真撮ったけど何か暗いなぁ〜。

でも、画像編集ソフト使うのも面倒だし…。というときに便利！

HTML

<p class="img-brightness">
ここに画像を挿入
</p>

CSS

.img-brightness{
	padding:0 !important;
}
.img-brightness img{
	-ms-filter: brightness(120%);
	filter: brightness(120%);
}

数値を変更すれば明るさが変わります。100%が通常(初期値)。

padding(余白)は必要がなければ削除してください。

上に文字を入れる

画像の上に文字を入れます。

短めの文章しか入れられません！

HTML

<div class="img-text">
ここに画像を挿入
<p class="img-text-paragraph">ここにテキスト</p></div>

CSS

.img-text{
	position: relative;
	padding:0 !important;
}
.img-text .img-text-paragraph {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	font-size: 1.2em;
	line-height:1.8;
	font-weight:bold;
	color: #fff;
	filter: drop-shadow(0px 0px 3px #333);
  }
.img-text img{
	width: 100%;
}

文字の色はcolorのカラーコード、文字の影はdrop-shadowの数値やカラーコードを変更してください。

padding(余白)は必要がなければ削除してください。

バウンドさせる

奇をてらいたい人にオススメ！

HTML

<p class="img-bound">
ここに画像を挿入
</p>

CSS

.img-bound{
	padding:0 !important;
}
.img-bound img{
	animation: bound .3s ease infinite alternate;
}
@keyframes bound{
	0%		{transform: translateY(0px);}
	100%	{transform: translateY(-10px);}
}

0.3秒(.3s)で動くようになっています。動作速度を変えたければ数値を変更してください。

動作幅は-10pxの数値を変更すればOK。

padding(余白)は必要がなければ削除してください。

伸び縮みさせる

さらに奇をてらいたい人にオススメ！

HTML

<p class="img-stretch">
ここに画像を挿入
</p>

CSS

.img-stretch{
	padding:0 !important;
}
.img-stretch img{
  animation: stretch 2s ease infinite alternate;
}
@keyframes stretch {
  20% {transform: scale(1.1, 0.9);}
  40% {transform: scale(0.9, 1.1);}
  60% {transform: scale(1.1, 0.8);}
  80% {transform: scale(0.8, 1.1);}
  100%{transform: scale(1, 1);}
}

2秒(2s)で動くようになっています。動作速度を変えたければ数値を変更してください。

transformの数値が動きの変化になります。

padding(余白)は必要がなければ削除してください。

CSSの複数指定も可能！

例えば…

の3つを適用させると

HTMLは

<p class="img-center img-radius img-shadow">ここに画像を挿入</p>

classを半角スペースで入れていけば複数指定が可能です。

もちろん全てのCSSがあらかじめ入力されていることが前提です。

filterの複数適用はCSSを変更する

もう一つやってみましょう。せっかくなのでわかりやすく料理の写真で！

彩度、明るさ、コントラストをあげるにはCSSのfilterを使います。

この場合、classを追加するだけではできないので新しくCSSを作ります。

この画像の彩度、明るさ、コントラストをあげてみましょう。

HTML

<p class="img-food">ここに画像を挿入</p>

CSS

.img-food{
  padding:0 !important;
}
.img-food img{
  -ms-filter: saturate(140%) contrast(120%) brightness(120%);
  filter: saturate(140%) contrast(120%) brightness(120%);
}

saturate(彩度) contrast(コントラスト) brightness(明るさ)です。
数値は自由に変更してください。