WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorのシャドー 使い方あれこれ。

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
shadow_thumbnail

Elementorのシャドー 名の通り影の立役者的存在!シャドーとしてだけではなく、様々な表現方法としても活用出来て、便利なんです。でも・・・どのウィジェットでもシャドーが使える訳では無いのが唯一のかゆい所。基本的な使い方から応用的な使い方まで幅広くシャドーの使い方を紹介します。

おばさん
おばさん
あんたみたいね・・・っくすっ。

誰が影だって?!
おじさん
おじさん

はいはい、喧嘩しないで・・・

2種類のシャドー

Elementorには2種類のシャドーがあります。1つは「テキストシャドー」もう1つは「ボッックスシャドー」です。それぞれどんな事が出来るか作例をご覧下さい。

【テキストシャドー作例】

shadow-sample1

【ボックスシャドー】
shadow-sample2

読んで字の如く、テキストシャドウはテキストの形に合わせて影を作れ、ボックスシャドーは要素(ウィジェットなどを含むエリア)に対して影を付けれるものです。

アイデア次第では表現の幅が広がるので、ぜひ触って見て下さい!

基本的なシャドウ操作

shadow-set1

テキストシャドウも、ボックスシャドウに共通部分の項目があります。

shadow-set2

共通の項目は、色、ぼかし、水平、垂直です。

「色」・・・影の色を設定出来ます。色だけではなく、透明度も設定出来ます。
「ぼかし」・・・影のぼかし具合を調整出来ます。
「水平」・・・被写体を中心に、影の横の位置を設定出来ます。
「垂直」・・・被写体を中心に、影の縦の位置を設定出来ます。

それでは実際、どの様な調整ができるのか、動画にまとめましたので、ご覧下さい!

おじさん
おじさん
最近、動画で済ませること多くないか・・・

そうですかぁ〜?そんなことは無いと思うんですけどね(汗)100読は1視聴に如かずと言いますし・・・(ぼそっ)

これに加え、ボックスシャドウでは、

boxshadow-s1

「拡大」と「位置」がさらに設定出来ます。

「拡大」・・・影の大きさを設定する事が出来ます。
「位置」・・・”アウトライン”と”インセット”を選択出来ます。
(アウトライン=ドロップシャドウ、インセット=シャドウ内側)

色々なシャドーの使い方

ただ影をつけるだけではなく、アイデア次第では立派なデザインになります!作例を交えて、再現方法を紹介します!

テキストシャドーで文字をデザインする

shadowsample001

作例1:ネオン的な光効果を出す
影ではなく、光として表現する方法です。まず、影の色を文字色と同系にし、透明度は無くします。影の位置は水平・垂直はともに「0」で動かさず、ぼかしだけを120にしています。好みに応じてぼかしの値をいじってみて下さい!

shadowsample002

作例2:3Dメガネ風
3Dメガネって最近見ないですね・・・青と赤のセロファンがレンズ代わりのメガネで、3D用に加工された映像を見ると立体になる・・・

おばさん
おばさん
今の若い子はVRよVR

やっぱりそうですよね・・・(汗)

これは文字色の設定も変更します。文字色の透明度を50%くらいにします。その上で、影の設定をします。作例では影を右上に投影しています。まず、ぼかしは「0」にし、水平と垂直で右上に影を配置します。

ボックスシャドーをデザインにする

boxshadows111

作例1:カード型背景にする
こーゆーの見たことありません?アパレル系のサイトとか・・・

おじさん
おじさん
ない。

ですよね〜(苦笑)

この場合は、画像にボックスシャドーを付けていきます。ぼかしは「0」右下に影を配置するように、垂直・水平を調整します。拡大を少々入れたら出来上がりです。

boxshadows222

作例2:仮想2重ボーダー
これはあんまり使いみちがなさそうですが・・・例として。

それよりあんた、画像を丸くするのどーやるのよ!
おばさん
おばさん

これは別の機会に・・・(汗)

おばさん
おばさん
何もったいぶってんのよ!そんなんじゃモテないわよ。

それは関係無いかと・・・(ぼそっ)あれ?でも昔に画像ウィジェットの記事で書かなかったっけ?

【 ウィジェットマニュアル】画像ウィジェット全項目解説

これは、ボーダーを別途設定しておきます。その上で、ボックスシャドーを設定します。ぼかし「0」拡大をボーダーの太さと同じくらいに目検で調整します。

まとめ

ウィジェットによっては影設定出来ないものも多くあり、もどかしい思いをする事こありますが、いざ!という時にアイデアの1つとして知っておくと便利かもしれません。フラットデザインの流行も少しずつ下火になり、レイヤー感満載のデザインも増えて来ており、そんなシャドーはレイヤー感を演出してくれます。

また、影を影としてではなく、デザインとして使う事で、面倒な設定も簡単に済む場合があります。

是非、みなさんも影使いになってはいかがでしょうか?

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

ポップアップ!

vb_header
<注意事項>
・お問い合わせ頂きました内容により、
 ご回答・ご返信出来ない場合がございます。
・ご質問やお悩みに関する内容について、
 記事にて「匿名」にて取り上げさせて頂くことも御座います。
・上記の内容についてご了承・ご同意の上、本フォームよりお送り下さい。

こんな感じで横スライドイン!
なんてことも出来ます。