Twitterはこちら仕事依頼はこちら

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

画像に使えるCSS コピペで簡単

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

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

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

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

街の声(画像の悩み)
  • 境目どこー？
  • 真ん中に寄ってくれ…！
  • 画像に文字書ぎだいっ！
  • サイズ変えたいよー！！
  • 画像暗すぎるんじゃー！

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

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

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

CSSのコピペ場所(WordPress)

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

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

スマホで見るよりパソコンで見た方がわかりやすくなっています。

画像に使えるCSSまとめ！

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

画像サンプル

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

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

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

HTML

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

CSS

  1. .img-responsive{
  2. padding:0 !important;
  3. }
  4. .img-responsive img{
  5. width:100%;
  6. max-width:800px;
  7. height:auto;
  8. }
.img-responsive{
  padding:0 !important;
}
.img-responsive img{
  width:100%;
  max-width:800px;
  height:auto;
}

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

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

周りに線を入れる

画像サンプル

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

HTML

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

CSS

  1. .img-border{
  2. padding:0 !important;
  3. }
  4. .img-border img{
  5. border:1px solid #aaa;
  6. }
.img-border{
	padding:0 !important;
}
.img-border img{
	border:1px solid #aaa;
}

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

線の種類
  • solid：直線
  • double：2本線
  • dashed：破線
  • dotted：点線

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

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

周りに影を入れる

画像サンプル

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

HTML

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

CSS

  1. .img-shadow{
  2. padding:0 !important;
  3. }
  4. .img-shadow img{
  5. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  6. }
.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

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

CSS

  1. .img-radius{
  2. padding:0 !important;
  3. }
  4. .img-radius img{
  5. border-radius:15px;
  6. }
.img-radius{
	padding:0 !important;
}
.img-radius img{
	border-radius:15px;
}

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

ちなみに

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

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

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

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

画像サンプル

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

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

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

HTML

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

CSS

  1. .img-object-fit{
  2. padding:0 !important;
  3. }
  4. .img-object-fit img{
  5. width: 250px;
  6. height: 250px;
  7. object-fit: cover;
  8. }
.img-object-fit{
	padding:0 !important;
}
.img-object-fit img{
	width: 250px;
	height: 250px;
	object-fit: cover;
}

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

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

トリミングする(円)

画像サンプル

円の形で切り抜きます。

HTML

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

CSS

  1. .img-object-fit-radius{
  2. padding:0 !important;
  3. }
  4. .img-object-fit-radius img{
  5. width: 250px;
  6. height: 250px;
  7. object-fit: cover;
  8. border-radius:50%;
  9. }
.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

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

CSS

  1. .img-center{
  2. text-align:center;
  3. padding:0 !important;
  4. }
.img-center{
	text-align:center;
	padding:0 !important;
}

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

右寄せする

画像サンプル

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

HTML

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

CSS

  1. .img-right{
  2. text-align:right;
  3. padding:0 !important;
  4. }
.img-right{
	text-align:right;
	padding:0 !important;
}

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

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

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

画像サンプル

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

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

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

HTML

  1. <p>ここにテキスト</p>
  2. <p class="img-float-left">
  3. ここに画像を挿入
  4. </p>
  5. <p>ここにテキスト</p>
<p>ここにテキスト</p>
<p class="img-float-left">
ここに画像を挿入
</p>
<p>ここにテキスト</p>

CSS

  1. .img-float-left{
  2. float:left;
  3. padding:0 !important;
  4. margin:0 1em 1em 0;
  5. }
  6. .img-float-left img{
  7. display:block;
  8. }
.img-float-left{
	float:left;
	padding:0 !important;
	margin:0 1em 1em 0;
}
.img-float-left img{
	display:block;
}

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

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

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

画像サンプル

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

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

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

HTML

  1. <p>ここにテキスト</p>
  2. <p class="img-float-right">
  3. ここに画像を挿入
  4. </p>
  5. <p>ここにテキスト</p>
<p>ここにテキスト</p>
<p class="img-float-right">
ここに画像を挿入
</p>
<p>ここにテキスト</p>

CSS

  1. .img-float-right{
  2. float:right;
  3. padding:0 !important;
  4. margin:0 0 1em 1em;
  5. }
  6. .img-float-right img{
  7. display:block;
  8. }
.img-float-right{
	float:right;
	padding:0 !important;
	margin:0 0 1em 1em;
}
.img-float-right img{
	display:block;
}

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

ぼかす

画像サンプル

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

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

HTML

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

CSS

  1. .img-blur{
  2. padding:0 !important;
  3. }
  4. .img-blur img{
  5. -ms-filter: blur(6px);
  6. filter: blur(6px);
  7. }
.img-blur{
	padding:0 !important;
}
.img-blur img{
	-ms-filter: blur(6px);
	filter: blur(6px);
}

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

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

色をかぶせる

画像サンプル

HTML

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

CSS

  1. .img-filter{
  2. background-color: #1398b2;
  3. padding:0 !important;
  4. }
  5. .img-filter img{
  6. display:block;
  7. opacity:0.6;
  8. }
.img-filter{
	background-color: #1398b2;
	padding:0 !important;
}
.img-filter img{
	display:block;
	opacity:0.6;
}

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

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

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

モノクロにする

画像サンプル

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

白黒もCSSで出来ますよ！

HTML

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

CSS

  1. .img-grayscale{
  2. padding:0 !important;
  3. }
  4. .img-grayscale img{
  5. -ms-filter: grayscale(100%);
  6. filter: grayscale(100%);
  7. }
.img-grayscale{
	padding:0 !important;
}
.img-grayscale img{
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

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

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

セピアにする

画像サンプル

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

HTML

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

CSS

  1. .img-sepia{
  2. padding:0 !important;
  3. }
  4. .img-sepia img{
  5. -ms-filter: sepia(60%);
  6. filter: sepia(60%);
  7. }
.img-sepia{
	padding:0 !important;
}
.img-sepia img{
	-ms-filter: sepia(60%);
	filter: sepia(60%);
}

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

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

彩度をあげる

画像サンプル

料理ブログにおすすめ！

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

HTML

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

CSS

  1. .img-saturate{
  2. padding:0 !important;
  3. }
  4. .img-saturate img{
  5. -ms-filter: saturate(200%);
  6. filter: saturate(200%);
  7. }
.img-saturate{
	padding:0 !important;
}
.img-saturate img{
	-ms-filter: saturate(200%);
	filter: saturate(200%);
}

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

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

コントラストをあげる

画像サンプル

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

HTML

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

CSS

  1. .img-contrast{
  2. padding:0 !important;
  3. }
  4. .img-contrast img{
  5. -ms-filter: contrast(120%);
  6. filter: contrast(120%);
  7. }
.img-contrast{
	padding:0 !important;
}
.img-contrast img{
	-ms-filter: contrast(120%);
	filter: contrast(120%);
}

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

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

明るさをあげる

画像サンプル

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

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

HTML

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

CSS

  1. .img-brightness{
  2. padding:0 !important;
  3. }
  4. .img-brightness img{
  5. -ms-filter: brightness(120%);
  6. filter: brightness(120%);
  7. }
.img-brightness{
	padding:0 !important;
}
.img-brightness img{
	-ms-filter: brightness(120%);
	filter: brightness(120%);
}

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

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

上に文字を入れる

画像サンプル

我輩は猫である 名前はまだない

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

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

HTML

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

CSS

  1. .img-text{
  2. position: relative;
  3. padding:0 !important;
  4. }
  5. .img-text .img-text-paragraph {
  6. position: absolute;
  7. top: 50%;
  8. left: 50%;
  9. -ms-transform: translate(-50%,-50%);
  10. -webkit-transform: translate(-50%,-50%);
  11. transform: translate(-50%,-50%);
  12. margin:0;
  13. padding:0;
  14. font-size: 1.2em;
  15. line-height:1.8;
  16. font-weight:bold;
  17. color: #fff;
  18. filter: drop-shadow(0px 0px 3px #333);
  19. }
  20. .img-text img{
  21. width: 100%;
  22. }
.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

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

CSS

  1. .img-bound{
  2. padding:0 !important;
  3. }
  4. .img-bound img{
  5. animation: bound .3s ease infinite alternate;
  6. }
  7. @keyframes bound{
  8. 0% {transform: translateY(0px);}
  9. 100% {transform: translateY(-10px);}
  10. }
.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

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

CSS

  1. .img-stretch{
  2. padding:0 !important;
  3. }
  4. .img-stretch img{
  5. animation: stretch 2s ease infinite alternate;
  6. }
  7. @keyframes stretch {
  8. 20% {transform: scale(1.1, 0.9);}
  9. 40% {transform: scale(0.9, 1.1);}
  10. 60% {transform: scale(1.1, 0.8);}
  11. 80% {transform: scale(0.8, 1.1);}
  12. 100%{transform: scale(1, 1);}
  13. }
.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は

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

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

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

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

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

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

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

画像サンプル

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

画像サンプル

HTML

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

CSS

  1. .img-food{
  2. padding:0 !important;
  3. }
  4. .img-food img{
  5. -ms-filter: saturate(140%) contrast(120%) brightness(120%);
  6. filter: saturate(140%) contrast(120%) brightness(120%);
  7. }
.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(明るさ)です。
数値は自由に変更してください。

コメント

  1. 名前:かふぇ :投稿日：2019/12/10(火) 17:06:44 ID：kyMDI1NDg

    記事を拝見させていただきました。
    とてもいい内容なので自分のブログでも活用したいと考え、試してみたのですがうまく機能してくれませんでした…

    行った手順としては、
    style.cssに記入し、ブロックエディタの「カスタムHTML」からHTMLをコピペして「ここに画像を挿入」へメディアライブラリにあるURLをペーストしました。

    テーマはcocoonです、やり方が間違えているのでしょうか？
    ご意見いただければ嬉しいです。

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2019/12/19(木) 15:11:47 ID：U5MDY4ODg

      ＞かふぇさん

      コメントありがとうございます。返信遅れて申し訳ございません。

      手順としては間違えてないと思います。
      お手数ですが問い合わせから該当URLを教えていただいてもよろしいでしょうか？

      返信

ページトップへ