AFFINGER(アフィンガー) css

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

2021年1月15日

 

こんにちは、kei(@KeiKei0815blog)です!

 

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

 

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

 

通常

 

カスタマイズ

関連記事
CocoonからAFFINGER5(アフィンガー5)移行後にやること

  悩む人CocoonからAFFINGER5に移行を考えているけど、移行してみての感想を知りたい。また、移行後にやったことについて、知りたい   こんな悩みに答えます   ...

続きを見る

 

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

 

関連» AFFINGER5(アフィンガー5)のブログカードの作成方法

 

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

 

 

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

 

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

 

CSSを編集するので、事前にバックアップを取っておくことをおすすめします。

 

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

 

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

  悩む人UpdraftPlusプラグインでバックアップできると聞いたけど、使い方やバックアップのやり方を知りたい。   こんな悩みに答えます。   こんな方におすすめ ...

続きを見る

 

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」

 

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

 

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

 

関連記事
Webディレクターの現場”あるある”8選をご紹介!

  悩む人Webディレクターに興味があります。Webディレクターで働いている人に現場でよくある「あるある」について教えて欲しいです。   こんな悩みに答えます。   本記 ...

続きを見る

 

まとめ:【お洒落!】AFFINGER5ブログカードに影をつけるやり方

 

いかがでしたか?

 

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

 

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

 

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

 

今回は以上です。

 

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

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー), css