画像ウィジェットの設定

ページ内に画像を配置するときもウィジェットを選ぶだけで簡単に設置できます。

一番基本的な方法として画像ウィジェットです。

 

基本設定はコンテンツ

[コンテンツ] で、まずは画像を選択し、他にも、リンクの設定や画像にマスクをかけることもできます。また、表示される画質が悪い時はImage Resolutionの解像度を変更することで問題が解決することがあります。

 

詳細設定をスタイルで

[スタイル] では配置(左・中央・右)の指定、サイズで幅、幅の上限、高さを決めることができます。ここで高さに数値を入力するとObject Fitという項目が数値を入力した下に現れます。「塗りつぶし」「カバー」「含む」から選択でき、これは取り込んだ画像を縦横どこで合わせて表示させるかを設定できます。

 

他にも、マウスオーバーした時の効果、アニメーションを付与できたり、不透明度変更、CSS Filterからパネルを開き、明るさや彩度等の変更したりもできます。

また、枠線も選ぶことができます。枠線の丸み(border-radius)は角毎にそれぞれ設定が可能です。
上:左上の角
右:右上の角
下:右下の角
左:左下の角

画像ウィジェットのスタイルでは枠線が設定できるので、高度な設定と合わせ二重で異なる線で囲うことも可能です。

 

まとめ

Web制作で気をつけたいところとして、画像選びはサイトのクオリティの大部分を占めるという点です。項目にあった写真、明るさ、他のセクションで使用の写真との統一感など、少し気にすることでサイトから受ける印象が大きく変わります。

 


次回:そのほかの基本的なウィジェット

recent post

スマホで見ると文字がデカい!を解決するレスポンシブなフォントサイズ調整(px・rem・vwの違い)

超簡単!サイト全体に「トップへ戻るボタン」を設置するScroll to Top機能(※HappyAddons)

画像を好きな形に切り抜く「マスク機能」の使い方

謎のすき間の正体は?ウィジェットスペースとカラムギャップ設定の使い分け

「背景オーバーレイ」で画像上の文字の可読性を上げる方法

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901