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

左のサイトは、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 等々の
モーション効果を設定
してみました。

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