画像の左右・コンテンツとの高さを整える

ここでは、「3col ImgBox A」 と「2col Img | Editor A」を使用して説明をします。

3col ImgBox A

設定前

 

設定内容

  1. タイトルのアンダーライン(Title Underline Color)を「#0000ff (blue)」に設定する
  2. テキストの背景(Editor Bgcolor)を「#87cefa (lightskyblue) の透過」、枠線(Editor Border Color)「#00bfff (deepskyblue)」に設定する

 

高さを整える

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, 

Lorem ipsum dolor sit amet, 

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

設定内容

  1. 画像の高さ Image Heightを220に設定する。そして、[Image Fix]にチェックを入れる。
  2. テキストの高さも調整するため、テキストの高さEditor Heighを300に設定する

 

 

 

Image Fix について

画像の真ん中を基準として、表示される枠のサイズ内に画像の中央部が表示されます。

2col Img | Editor A

設定前

 

設定内容

  1. タイトルのアンダーライン(Title Underline Color)を「#0000ff (blue)」に設定する
  2. 画像とテキストの背景(Editor Bgcolor)を「#87cefa (lightskyblue) の透過」、枠線(Editor Border Color)「#00bfff (deepskyblue)」に設定する

 

コンテンツの高さのみの調整

 

設定内容

  1. 画像とテキストの高さContents Heighを340に設定する

 

 

 

Image Fixを使用した高さの調整

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

設定内容

  1. Contents Heightを260に設定する。そして、[Image Fix]にチェックを入れる。

 

 

 

Image Fix について

画像の真ん中を基準として、表示される枠のサイズ内に画像の中央部が表示されます。

Image Fix を使用した場合は、画像のCaptionは表示されません。