wordpressを使っててカラムというブロックが存在しているが、今まで使ったことがなかった。使ってみたものの後からの訂正がややこしく感じてて、使わないようにしていた。
少し調べてみたけど、使い方さえわかれば見た目も変化させることができるので、今回はカラムの使い方を紹介する。
（ゴルフのブログばかりだったので、久しぶりのwordpress）
画像をギャラリーのように並べる
ギャラリーブロック
ギャラリーを使うとこんな感じです。
カラムブロック
外にも画像の横に文字を入れる時もカラムが使える。今まではメディアとテキストというブロックを使ってたがここでは、比較をしてみる。
スマホで見ると
ギャラリーの場合、キャプションが前面に出てしまい、画像が表示されなかった。その点カラムは画像が自動で縦に並んで見やすくなる。
次に画像と文字の並列した時にどうなるか検証。これはメディアとテキストというブロックがあるのでこちらを使ってみることにした。
画像と文字を並列に並べる
メディアとテキストブロック
今年のプレゼント
誕生日プレゼントに会社の職員一同から宮崎県にあるジャパンキャビアのキャビアとウォッカの詰め合わせを頂きました。
このウォッカには日向夏も入っていて爽やかな口当たりです。
カラムブロック
今年のプレゼント
誕生日プレゼントに会社の職員一同から宮崎県にあるジャパンキャビアのキャビアとウォッカの詰め合わせを頂きました。
このウォッカには日向夏も入っていて爽やかな口当たりです。
スマホで見ると
基本的な表示は同じだが、カラムブロックの方が写真のサイズも整っており、文字の間隔も見やすい感じがする。
他の使い方
画像ー文字ー画像
カラムを使うことで他にも、画像-文字-画像などの配置もできるようになります。
こういう風に画像に挟まれた間に文字を入力することができます。
簡単にカラム数を増やしたり減らしたりすることもできます。
カラムにギャラリーを追加
カラムの中にギャラリーも入れられます。
画像は適当に配置したものだが、これだとまとめて説明できるので良い。
スマホでみると
こんな感じです。これだと見やすくなる。
今まで使ってこなかったカラムブロックだが、スマホでの表示などを考えたら今後使っていくことになりそう。
また、今回同じ項目についてはグループ化して背景色を変えてる。このグループ化についても初めて使ってみたけど、気づいた点として、
- グループ化することで、背景色や文字色を一回で変更することができる。
- グループ化することで、段落や見出し、画像などグループされた部分をブログの上下に移動しやすい
- スマホなら問題ないレベルだがPCで見るとブロックとブロック間に隙間が欲しいので区切り線を入れたほうが見栄えが良い。
- 恐らくだけどメディアとテキストを使用している部分は写真の幅が広く、グループも一回り大きく表示されている。
- グループ化によって、カラムの写真が小さく表示されるようになった。