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

画像をふわっと表示させる

Before

After


リンクを付けてみた

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

カスタマイズは自己責任でやろう!

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

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

カスタマイズする準備

3つのコード追加方法

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

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

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

カスタマイズのコード

画像にクラス名を追加します。

画像にクラス名を追加
  1. ビジュアルエディタで画像をクリック
  2. 編集画面(画像詳細)を開く
  3. 画像CSSクラスにクラス名を記入
  4. 更新

ビジュアルエディタからフワッとさせたい画像にクラスをつけます。

あとは更新(もしくは下書きとして保存)してちゃんと画像に反映されているか確認しておしまいです。

うまくいったか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ・雑談

追加CSSのまとめ

MENくん
浮いてる様な影はマテリアルデザインっぽくていいよね
くま3号
マテリアルっぽいね、いいねこの立体感は
MENくん
更にマウスを上にのせたときにフワッとなるのは気持ちイィ!
くま3号
そやね

コメント( ˶ˆ꒳ˆ˵ )

avatar