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

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

画像に使えるCSS コピペで簡単
スポンサーリンク

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

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

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

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

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

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

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

CSSのコピペ場所(WordPress)

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

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

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

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

画像サンプル

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

スマホで見ても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が線の色(カラーコード)です。

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

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

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(明るさ)です。
数値は自由に変更してください。

コピペでできるブログカスタマイズ他にもあります

コピペでできるブログに役立つカスタマイズを他にもアップしてるのでよかったらご覧ください。

あわせて ブログカスタマイズまとめ【ブロガー、アフィリエイター向け】

コピペでできるブログカスタマイズまとめ【HTML&CSS】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。

コメント

ページトップへ