こんにちは、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マーケター とは?未経験からでもなる方法を徹底紹介します
悩む人 Webマーケターってどんな仕事なのか知りたいです。また、未経験からWebマーケターになるのに必要なスキルややっておくべきことがあれば教えて欲しいです! こんな悩みに ...
続きを見る
まとめ:【お洒落!】AFFINGER5ブログカードに影をつけるやり方
いかがでしたか?
今回は、アフィンガー5でブログカードの周りに影をつけるやり方について、紹介しました。
影をつけることで目出せることができて、ちょっとお洒落に見せることができます。
アフィンガー5のブログカードの設定方法について参考になりましたら、幸いです。
今回は以上です。
ここまで読んでいただき、有難うございました。
あわせて読みたい!