AFFINGERブログカードのボックス周りに影をつける方法【お洒落！】

 

こんにちは、kei（@KeiKei0815blog）です！

 

本記事の執筆者

 

AFFINGER（アフィンガー）でブログカードをよく使う機会があり、ちょっとお洒落にしたくボックスの周りに影をつけてみました。

 

今回は以下のように、ブログカードの周りに影をつけるやり方について紹介します。

 

通常

 

カスタマイズ

関連記事

CocoonからAFFINGER（アフィンガー）移行後にやること

    こんな悩みに答えます。   本記事の執筆者 当ブログでは、アフィリエイトで稼ぎやすいジャンル・おすすめのASPを紹介しています。アフィリエイト歴４年になり今ではW ...

続きを見る

 

なおブログカードの表示させるやり方について知りたい方は、以下記事を参考にしてみてください！

 

関連» AFFINGER5（アフィンガー５）のブログカードの作成方法

 

それでは、早速始めます。

 

AFFINGERのブログカードの背景に影をつけるやり方

 

AFFINGERのブログカードの背景に影をつけるやり方について紹介します。

 

 

バックアップのやり方については、以下記事を参考にしてみてください。

 

関連記事

【便利！】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

    こんな悩みに答えます。   こんな方におすすめ ワードプレスを始めた初心者の方 バックアップが簡単にできるプラグインを利用したい 万が一の時に備えてファイルのバッ ...

続きを見る

 

CSS

 

まずは以下のCSSをコピーしましょう。

 

 CSS
.st-cardbox{
padding: 15px;
border: 1px solid #ccc;
margin-bottom: 20px;
position: relative;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.2);
}

 

続いて「外観 → カスタマイズ → 追加CSS」をクリックして貼り付けます。

 

「外観 → カスタマイズ → 追加CSS」

 

最後に「公開」をクリックして完了です。

 

以下のように、ボックスの周りに影がついてれば完了です。

 

関連記事

歩いてポイントGet！おすすめのポイ活アプリ

歩いてる時間もポイントを貯めてみたいです！また貯まったポイントはAmazonギフト券に貯めて、貯まったポイントで商品をお得に購入したいです。おすすめのポイントアプリを教えてほしいです！ こんな悩みに答 ...

続きを見る

 

AFFINGERブログカードに影をつけるやり方：まとめ

 

今回はAFFINGER（アフィンガー）でブログカードの周りに影をつけるやり方について紹介しました。

 

影をつけることで目出せることができてちょっとお洒落に見せることができます。

 

アフィンガーのブログカードの設定方法について参考になりましたら幸いです。

 

今回は以上です。

 

ここまで読んでいただき有難うございました。