画像に影を追加してホバーするときにフワッとなるカスタマイズ

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Before

After

リンクを付けてみた

マウスをのせると、ふわっと浮き上がる感じです。SANGOにとってもなじみますね！

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズする準備

３つのコード追加方法

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコード

/*--------------------------------------
  画像に影をプラス
--------------------------------------*/
.kage, .kage-link{
    display: block;
    border-radius: 3px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, .25);
    transition: .3s ease-in-out;
}
.kage-link:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}