いつも「初心者のためのWordpress完全マニュアル」ブログを見ていただきありがとうございます。
このブログでは、初心者の方でも簡単に作れる、低予算、そしてスタイリッシュなWebサイト作りを提案しています。

今回は世界人気NO.1Wordpressテーマ【Divi】のサブチュートリアルとして、下の動画の様に、CSSを使ってマウスを当てると、ドロップシャドウが現れる、ホバーエフェクトの作り方についてご紹介します。

CSSの知識が全くない初心者の方でも簡単に作ることができます^^

冒頭で紹介した通り、今回はDiviテーマを使ったチュートリアルとなります。Diviテーマを知らないという方は、下のリンクにてDiviテーマのStep By Stepチュートリアルをご覧いただけますので、興味がある方は是非のぞいてみてください。

ドロップシャドウホバーエフェクトの作り方

ではまずは、いつもの様に編集したいページから、Diviのビジュアルビルダーを立ち上げます。

新しい通常セクションを作成します。

お好みのコラムを挿入します。ここではとりあえず、2コラムを選択します。

モジュールもお好みで選択してください。このサンプルでは、画像モジュールを挿入します。

このサンプル画像が欲しい方は、こちらをクリックして、画像を保存してください。

各モジュールの設定ウィンドウの中の詳細設定タブから、CSSクラスに名前をつけます。どんな名前でも大丈夫ですが、スペースやアンダースコア、ハイフン以外の記号は使えません。自信のない方は、サンプルと同じdropshadow_hoverにしてください^^

ここまでの作業を保存して、ビジュアルビルダーを一旦閉じます。

次に、テーマカスタマイザーにアクセスします。

追加CSSをクリックします。

以下のコードを、コピーして貼り付けます。

/*ここから下をコピーアンドペースト*/

.dropshadow_hover:hover {
box-shadow: 10px 10px 10px rgba(0,0,0,.2);
}

画像の様に貼り付けたら、保存して公開をクリックします。

ページをリフレッシュして、画像にマウスを当てると、この様なドロップシャドウが出現します。

手順はたったこれだけです！とっても簡単ですね^^

なおさっき作った、クラス名(drop_shadow)は、いろんなモジュールにつけることができます！

各モジュール設定から、詳細タブ >> CSSID/クラス >> CSSクラスに入れるだけです。

あまりにも多用しすぎると結構うざい感じになるので、そこはさじ加減で。。笑

分からないところや質問、また使い方を紹介して欲しいテーマやプラグインのリクエスト等ございましたら、コメントやSNSなどにてお答えします。

お気軽にお尋ねください^^

それではまた次回！See you later<3