山形を拠点に活動するフリーランスWEBデザイナーのサイト兼備忘録です

新時代のGutenbergエディタの機能を解説!画像関連編

画像と文字の組み合わせその1、カバー

赤レンガの魅力

キャプションで画像と文字を組み合わせる、というのはやりましたが、それだけだといまいち…という方向けに、「カバー」という新機能があります。上の画像がそうですね。印象的な画像の背景を少し暗くして、白い文字を重ねると、目を引きたい画像の導入部分なんかに使えそうです。

また、画像を縮小せず一部分を拡大する固定背景、背景の色合いを変えるオーバーレイ、透過率の調整も右側でできてしまいます。

画像と文字の組み合わせその2、メディアと文章

また、画像と文字を組み合わせる、というものの新要素として、メディアと文章、というブロックがあります。

もみじ公園

11月中旬撮影。山形市街地でも指折りの紅葉スポットである。

山形駅よりベニちゃんバス東くるりん 東原町先回りコース「五小前」下車徒歩5分

※道幅の狭い住宅街ですので、公共交通機関をご利用ください。山形駅から徒歩だと25分ぐらいです。

と、このように、画像の左寄せ右寄せよりきれいな写真と文字の組み合わせができたりします。上のように何かを紹介するときに使えそうですね!

画像、右に載せる?左に載せる?

画像の左右は掲載してからでも、掲載前でも変えられます。

画像をもうちょっと大きくしたい、いや文字をもっと見せたい

画像を選択してから現れる点を使うと、画像と文章の占める広さの比率も変更できます。

スマートフォンでもうちょっとみやすくしたいなあ…

また、モバイルサイズになったときに左右ではなく上下に並ぶようにするには右メニューの「モバイルで重ねる」をオンにすると画像と文章が縦に並ぶようになります。

文章説明が短いならばこの設定はオフでもいいと思いますが、スマートフォンで画像が小さくなるのは嫌だ、というかたは「モバイルを重ねる」を活用するといいかもしれませんね!

投稿日時:


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

※コメントは承認制となっています。管理人の承認を得て初めて掲載されます。
※コメントには以下の HTML タグと属性のみ使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください