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
Before
After
リンクを付けてみた
マウスをのせると、ふわっと浮き上がる感じです。SANGOにとってもなじみますね！
カスタマイズする準備
３つのコード追加方法
[kjk_temp id=”3370″]カスタマイズのコード
/*--------------------------------------
画像に影をプラス
--------------------------------------*/
.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);
}
画像にクラス名を追加します。
画像にクラス名を追加
- ビジュアルエディタで画像をクリック
- 編集画面（画像詳細）を開く
- 画像CSSクラスにクラス名を記入
- 更新
ビジュアルエディタからフワッとさせたい画像にクラスをつけます。
あとは更新（もしくは下書きとして保存）してちゃんと画像に反映されているか確認しておしまいです。
うまくいったか確認
[kjk_temp id=”3406″] [kjk_ab id="4"]まとめ・雑談
