初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

Diviテーマ:サブチュートリアル コピーアンドペーストでできる!ドロップシャドウ・ホバーエフェクト – 初心者のためのWordpress完全マニュアル

Diviテーマ:サブチュートリアル コピーアンドペーストでできる!ドロップシャドウ・ホバーエフェクト

August 30, 2017 / 0 Comment / 190 views

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

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


今回はCSSを使用していますがご安心ください! あなたがやることはコピーアンドペーストだけ!

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

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

 

Elegant Theme: https://www.elegantthemes.com

Diviテーマ Step by Step チュートリアルhttps://wpbeginnertutorial.com/divi_tutorial1/

 



 

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

 

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

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

 

ドロップシャドウ ホバーエフェクト チュートリアル1

 

お好みのコラムを挿入します。ここではとりあえず、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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です