エキサイトブログで写真を CSS で丸く切り抜いて飾りをつける

ブログランキング参加中。ポチッとお願いします。

エキサイトブログのデザインスキンを CCS でカスタマイズして、記事内の写真を丸く切り抜いて飾りをつける TIPS を紹介します。

今回のカスタマイズでは、飾りとして以下の画像を使用しましたが、フリー素材などでお気に入りのものを用意して使ってください。

用意した飾りの画像をエキサイトブログにアップロードしたら、PCデザインスキン編集 で CSS の欄に以下の行を貼り付けます。

background-image: url(https://pds.exblog.jp/pds/********************); の ( ) 内には用意した飾りの画像の URL を指定します。

.post-body:has(.taglist-list a[href*="maru"]) center img {
border-radius: 50%;
}
.post-body:has(.taglist-list a[href*="kazari"]) center:has(img) {
position: relative;
}
.post-body:has(.taglist-list a[href*="kazari"]) center::after {
background-image: url(https://pds.exblog.jp/pds/********************);
position: absolute;
width: 100%;
height: 100px;
z-index: 1;
bottom: 25px;
left: 0;
content: '';
background-repeat: no-repeat;
background-size: 80%;
background-position: bottom center;
}

これが元の画像です。丸く切り抜くなら、このような正方形の写真が適しています。画像の配置は 中 にしておきます。

まず、以下のようにタグに maru と入力してみます。

すると、写真が丸く切り抜かれます。


次に、以下のようにタグに kazari と入力してみます。


すると、写真の下に飾りがつきます。


以下のようにタグに maru と kazari の両方を入力してみます。


写真が丸く切り抜かれ、さらに写真の下に飾りがつきます。