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

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

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のレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

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