有料テーマのSWELLのアイキャッチ画像にCSSで枠線を表示する

SWELLのアイキャッチ画像に周りに線を引きたい人は少ないと思います。

このブログのように背景が白色の文字を入れた画像を使うなら枠線があったほうがいいです。

分かれば簡単ですが、手間取ったので教えちゃいます。

必要だったらコピペして使ってください。

SWELLのアイキャッチ画像に枠線

このブログで追記してるまんまです。

.p-postList__thumb{
        border: solid 1px #cacaca;
    }
.p-articleThumb{
        border: solid 1px #cacaca;
    }

上が記事の先頭のアイキャッチ画像用です。

下はトップページなどの記事一覧のページのサムネイル画像用です。

画像の背景に色をつける

本当はアイキャッチ画像に使う画像の背景を白色にしなければいいだけです。

でも「文章を画像化できるWebツール！」は白、黒、赤、青、黄、 緑、ピンクしか使えません。

白色を選ぶしかなかったんです。

画像の文字色を選んだのは、黒と青と緑の三択だからです。

黒は目立たないので、青と緑で迷って青色にしました。

まとめ

有料テーマのSWELLのアイキャッチ画像に枠線を表示するCSSを紹介しました。

よかったらコピペして使ってみてください。