カラム編集で画像を垂直方向に整列

左のサイトは、WordPressテーマ:Astraの初心者用に作られたスターターテンプレート「Online Health Coach」で作成された見本ページです。

そのトップページの最下段の見出し「Happy Faces of Happy Students」にある以降の画像に目が釘ずけになりました。4段の段組での画像表現は、どのように作成したのか?

その画像が右の画像です。4段の画像ですが、全体の画像の真ん中に画像を集めるような画像編集は、どのような工程を踏んで、そのような表現になっているのか、明らかにしてみます。

上記のイメージ画像を再現してみよう

(1)先ず、このテキスト文の記述欄を含めて4段のカラム(段組)設定する。

(2)次に、左の3段の真ん中のカラムに内部セクション(2段)を設定する。

(3)今、設定した内部セクションを複製して、その下に新たな内部セクションを作成する。

(4)各カラムの中に画像ウジェットを挿入する。
この段階で左図のような枠組みができる筈です。

次に、各カラム内に画像を挿入する

前記までで作成された3段6枚の画像ウジェットに各画像を挿入します。

 

段組の大きさを変えて画像サイズを調整

真ん中の段組内の画像の大きさを、段組の大きさを変えて調整して行きます。

画像の垂直方向の位置調整

(1)「高度な設定」の中の「配置」の「位置」を「絶対」を選択する。

(2)垂直方向の画像位置をオフセットバーで縦方向の位置を調整する。

最後に画像の4角を丸くする

画像の「スタイル」タブを選択して、枠線の丸みを7くらいに設定する。

結果画像にモーション効果を設定

前記の結果画像に、
Fade in Left、
Fade in Right、
Fade in Down、
Fade in Up 等々の
モーション効果を設定
してみました。

再度、見たい場合は、ブラウザの更新ボタンを押して下さい。