カラム編集で画像を垂直方向に整列 左のサイトは、WordPressテーマ:Astraの初心者用に作られたスターターテンプレート「Online Health Coach」で作成された見本ページです。そのトップページの最下段の見出し「幸せな学生の幸せそうな顔」にある以降の画像に目が釘ずけになりました。3~4段の段組での画像表現は、どのように作成したのか? その画像が右の画像です。3~4段の画像ですが、全体の画像の真ん中に画像を集めるような画像編集は、どのような工程を踏んで、そのような表現になっているのか、明らかにしてみます。 上記のイメージ画像を再現してみよう (1)先ず、このテキスト文の記述欄を含めて4段のカラム(段組)設定する。(2)次に、左の3段の真ん中のカラムに内部セクション(2段)を設定する。(3)今、設定した内部セクションを複製して、その下に新たな内部セクションを作成する。(4)各カラムの中に画像ウジェットを挿入する。この段階で左図のような枠組みができる筈です。 次に、各カラム内に画像を挿入する 前記までで作成された4段6枚の画像ウジェットに各画像を挿入します。 段組の大きさを変えて画像サイズを調整 真ん中の段組内の画像の大きさを、段組の大きさを変えて調整して行きます。 画像の垂直方向の位置調整 (1)「高度な設定」の中の「配置」の「位置」を「絶対」を選択する。(2)垂直方向の画像位置をオフセットバーで縦方向の位置を調整する。 最後に画像の4角を丸くする 画像の「スタイル」タブを選択して、枠線の丸みを7くらいに設定する。 結果画像にモーション効果を設定 前記の結果画像に、Fade in Left、Fade in Right、Fade in Down、Fade in Up 等々のモーション効果を設定してみました。再度、見たい場合は、ブラウザの更新ボタンを押して下さい。