SWELLでメディアとテキストの使い方！画像に文字を重ねておしゃれにする

画像とテキストをおしゃれなレイアウトで配置できる、「メディアとテキスト」ブロック。（以前はメディアと文章という名称でした）

WordPressテーマSWELLでは、独自のレイアウトが２種類追加されています。

• 浮き出しているかのようなカード型
• 画像にテキストを重ねられるブロークングリット

浮き出しのカード型にできたり、画像にテキストを少し重ねたブロークングリッドもできちゃうんです。

当ブログのトップページにも使用していますよ。

＼ こちらもおすすめ ／

• SWELLってどんなテーマ？使ってみた本音をレビュー！
• SWELLでトップページをおしゃれにカスタマイズする方法

SWELLでのメディアとテキストの使い方

SWELLでの【メディアとテキスト】ブロックの使い方を紹介していきます。

完成形はこちら。

SWELLの「投稿リスト」ブロックの左右交互リストと、少し似ているかもしれません。

ブロック種類	表示できる内容	レイアウト種類
投稿リスト	記事のアイキャッチ採用 記事の説明文採用	左右交互リスト
メディアとテキスト	自由な画像（または動画） 自由なテキスト	レイアウト３種

「投稿リスト」では、記事のアイキャッチ画像と記事の説明文が採用されるけど、「メディアとテキスト」では、自由な画像（もしくは動画）とテキストで組み合わせることができ、レイアウトも３種類（うち２種類はSWELL独自）から選択することができます。

なお画像にテキストを重ねることは、投稿リストブロックではできません。

①「メディアとテキスト」ブロックを選択する

ブロック選択画面で、【メディアとテキスト】ブロックを選択します。

ブロックパターンも下部に用意されているので、それを使用してもOK。

選択すると、以下のようなブロックが追加されます。

左右で【メディアエリア】と【コンテンツ】に分かれています。

②「メディアエリア」に画像を追加・幅を設定する

【メディアエリア】には、アップロードするかメディアライブラリから画像を設定します。

メディアは左右どちらにでも配置することが可能（赤丸部分）。

画像の配置は順に交互にするとおしゃれですね。

ブロックの中央の◯をマウスでドラッグすることで、メディアとコンテンツの比率（幅）を変えることができます。

数値の直接入力も可能。

③「コンテンツ」にテキストやボタンなどのブロックを追加する

【コンテンツ】部分には、テキスト以外にボタンやリストなど、どのようなブロックでも利用することができます。

④「メディアとテキスト」ブロックのレイアウトを決める

【メディアとテキスト】ブロックのレイアウトは３種類あります。（２種類はSWELL独自）

1. デフォルト

シンプルにデフォルト。

メディアとコンテンツが並んでいるだけになります。

2. カード型

カード型。SWELL独自のレイアウトです。

わかりづらいですが、ブロックに影が付いて浮き出ています。

3. ブロークングリッド

ブロークングリッド。こちらもSWELL独自のレイアウトです。

メディアの上にコンテンツ（文章）が少し重なっているレイアウトです。
見やすくなるように、テキストとボタンをグループ化し背景を黒くしました。

くうか

このレイアウトが気に入って、当ブログはブロークングリッドを採用しています。

⑤「メディアとテキスト」設定項目

設定項目は少ないのですが、以下の通りです。

横に並べての表示だと窮屈に見えてしまうので、縦に並べる方が良いかもしれません。

メディアとテキストで画像に文字を重ねておしゃれにする方法

メディアとテキストブロックのSWELL独自レイアウト「ブロークングリッド」では、ちょっとしたコツでおしゃれに見せることができます。

画像に重なっているテキスト部分の背景が透過していると、よりおしゃれに見えますよね♪

CSSを使わずに透過させることができます。

テキストやボタンなど、コンテンツエリアに追加したブロックを複数選択し、「グループ化」します。

グループ化すると、スタイルや背景色を設定できるようになります。

当ブログは方眼スタイルを設定して、透過させているかのように見せています。

【まとめ】SWELLのメディアとテキストはおしゃれなレイアウトを実現できる

メディアとテキストはWordPressのブロックですが、SWELLで追加されている独自レイアウトを使うとさらにおしゃれに仕上がります。

• 浮き出しているかのようなカード型
• 画像にテキストを重ねられるブロークングリット

これらのレイアウトを使うと、一味違うおしゃれさが出せるのではないかと思っています。

＼当ブログの利用テーマとレンタルサーバーはこちら／