JIN

JINカスタマイズ|画像がふわっと浮き上がる

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

画像にフワッとさせてみました。

カーソルをのせたときに、画像がフワッと浮きます。自作の画像リンクなどに使うといいかもです。

こんな感じにフワッと!
ふわっと
MENくん
MENくん
フワッとしていい感じだね
くま3号
くま3号
白い背景画像にはいいかもね

 

本物のリンク画像はこちら
フワッとさせてみた画像

カスタマイズの準備

投稿画面の画像にクラス名を付ける

クラス名を記入する部分

画像の編集で「画像CSSクラス」の部分にクラス名「img-huwalink」を記入して更新してください。

コードを記入する準備

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

コード

.img-huwalink{
display: block;
overflow: hidden;
margin: 1em 0;
padding: 0;
border-radius: 3px;
background: #fff;
box-shadow: 0 0px 5px rgba(0, 0, 0, .25);
color: #555;
font-weight: bold;
text-decoration: none!important;
transition: .3s ease-in-out;
}
.img-huwalink:hover {
box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
color: #888;
text-decoration: none;
transform: translateY(-2px);
transition: .3s ease-in-out;
}

 

MENくん
MENくん
このコードをちょちょいっとコピペしてね
くま3号
くま3号
これで簡単にフワッと画像を作れるな

まとめ

画像リンクに使うといいかもですね。

SANGOのメインカスタマイズ(?)サイトはこちら

data-matched-content-ui-type="text_card" data-matched-content-rows-num="3" data-matched-content-columns-num="3"