「投稿した画像に説明をつけたい！」「写真を撮った時のエピソードを添えたい！」そんな時に参考になさってください。
「メディアとテキスト」ブロックの使い方
「メディアとテキスト」は画像と文章を横並びに配置するブロックです。
「ブロックを追加」ボタンから「メディアとテキスト」を選択
または、左上の「＋」ボタンから「ブロック」＞「メディアとテキスト」を選択
「メディアとテキスト」ブロックが挿入されました。
文章と画像を挿入する
既に保存してある画像を使用する場合は「メディアライブラリ」を選択します。パソコンにある画像をアップロードする場合は「アップロード」を選択します。
続いて右側の「コンテンツ…」欄に文章を入力します。
初期設定では画像欄と文章欄の幅の割合は５０％ずつになっています。
この割合を変更するときは、右側のサイドメニューから「設定」を選択します。
「メディアの幅」のスライダーを動かすと、画像の幅を変更できます。
※画像の幅を30％にしてみました。
↓
背景の色を変更したい時は、右側のサイドメニューから「色」＞「背景」を選択します。
カラーパレットから好きな色を選びます。好みの色がパレットにない場合はチェック柄の部分をクリックすると、更に色んな種類の色が選べます。
背景に色がつきました！
作成したものを複製する
同じパーツを複製したい時は、書式バーの「三点リーダー」＞「複製」を選択します。
先ほど作った物の複製ができました。複製をしておけば、いちいち背景色や画像の幅を設定する必要がありません。
複製したブロックの画像を別の画像に差し替えます。
画像の上でクリックし、「置換」を選択します。「文章と画像を挿入する」を参考に、画像を差し替えてください。
画像を変更できました！
画像と文章の位置を左右反転させたい場合は「メディアを右に表示」を選択します。
左右反転しました。
文章量と画像の大きさのバランスが悪い時は
文章量が多いとバランスが悪くなります。
そんな時は「設定」＞「画像を切り抜いて調整」をONにします。
文章の高さに合わせて画像が調整されました。
でも、真ん中の手袋に焦点があたってしまい、左右が切れてしまいました。
そんな時は、「設定」＞「メディアの幅」で画像サイズを調整してください。
PCでの見え方・スマホでの見え方
PCでの見え方はこのような感じです。
初期設定では、スマホサイズの時縦並びに配置されます。
スマホサイズの時でも横並びにしたい時は「設定」＞「モバイルでは縦に並べる」のトグルボタンのON/OFFを切り替えてください。
以上、「メディアとテキストブロック」の使い方でした！
ご自身でブログを更新できるホームページにご興味がありましたら、ぜひお気軽にご相談ください！
