画像をぼかし文字を被せるCSS/アイチャッチの上にタイトル

WP CSS

2025.10.27

画像をぼかし文字を被せる

Sponsor

画像をぼかし文字を被せる/アイキャッチのぼかしにタイトル挿入

このテーマは、アイキャッチをぼかし、アイキャッチの上にタイトルが表示されます。

アイキャッチをぼかす（上の画像）

.eye-catch img {
    height: 260px !important;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: .5;
    transform: scale3d(1.1,1.1,1.1);
    width: 100%;
}

filter	フィルター	ぼかすフィルター
blur	ぼかし（0～）	ぼかし半径5px
opacity	不透明度（0～1で指定）	不透明度5
transform	拡大縮小	3方向に1.1倍拡大
scale3d	3dにする	3方向に1.1倍

アイキャッチのぼかし無しにする

テーマで指定されているアイキャッチのぼかしを無しにします。

.eye-catch img {
  filter: none;
  opacity: 1;
  object-fit: cover;
}

アイキャッチのぼかしがなくなりました。

画像をぼかし文字を被せる/アイキャッチのぼかし無しにする — 画像を見やすくする

Sponsor

画像の上のタイトルを見やすくする CSSエディッタ

画像をボカシ無しにしたので、タイトルを見やすくします。

デフォルトのコード（上の画像）

.article-header h1 {
    position: absolute;
    z-index: 1;
    top: 90px;
    left: 60px;
    margin-right: 18px;
    font-size: 1.5em;
    color: #545454;
    text-shadow: 2px 2px 5px whitesmoke;
}

z-index	重ね合わせの順序	1
top と left	位置の指定	上から90px、左から60px
margin-right	右の余白	18px
font-size	文字のサイズ	1.5倍
color	文字色	545454
text-shadow:	文字に影をつける	―
2px 2px 5px	横方向・縦方向・ぼかしの半径	横2px、縦2px、ぼかしの半径5px
whitesmoke	影の色	whitesmoke

.article-header h1 {
    font-size: 26px;
    color: #f3fafe;
    text-shadow: 10px 10px 5px #333;
    background-color: rgba(0,0,0,0.5);
    padding: 30px 20px;
}

「background-color」を暗くして、文字を見やすくする

font-size	文字のサイズ	26px
color	色	f3fafe
text-shadow	文字の影と色	横10px、縦10px、ぼかし5px、#333
background-color	背景色	rgba(0,0,0,0.5)
padding	余白	上下30px、左右20pxの余白