MENU
アーカイブ
くうか
ミニマリスト
ミニマリスト・ブロガー・ライター。
整理収納アドバイザー準1級、元SE。
引っ越しをきっかけに物を減らすことを決意。快適なシンプルライフへの過程を発信しています。
SWELLでサイト型トップページを作る!解説→CLICK!

SWELLでメディアとテキストの使い方と画像にテキストを重ねる方法

当ページのリンクには広告が含まれています。
SWELLのメディアとテキスト

こんにちは、ゆるミニマリスト主婦のくうかです。

当ブログはWordPressテーマ「SWELL」を使用しています。

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

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

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

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

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

くうか

設定は非常に簡単なブロックですが、導入の流れやおしゃれに見せるコツを紹介します。

この記事はこんな人におすすめ
  • メディアとテキストブロックについて知りたい
  • 画像にテキストをおしゃれに重ねる方法を知りたい

\ こちらもおすすめ /

目次

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

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

完成形はこちら。

メディアとテキストブロック
メディアとテキスト

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

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

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

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

くうか

それでは、以下メディアとテキストの使い方の説明です。

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

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

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

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

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

メディアとテキスト編集
編集画面

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

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

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

メディアを設定
メディア(画像)を設定

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

メディアを左右のどちらかに表示する
左右どちらかを選択

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

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

メディアの幅を設定する
メディアの幅を設定

数値の直接入力も可能。

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

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

メィディアとテキストのコンテンツエリア
様々なブロックを追加できる
くうか

当ブログは、テキストとSWELLボタンを入れています。

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

【メディアとテキスト】ブロックのレイアウトは3種類あります。(2種類はSWELL独自)

1. デフォルト

シンプルにデフォルト。

デフォルトレイアウト
デフォルト

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

2. カード型

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

カード型レイアウト
カード型

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

3. ブロークングリッド

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

ブロークングリッドレイアウト
ブロークングリッド

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

くうか

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

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

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

メディアとテキストの設定
設定項目
  • モバイルでは縦に並べる
    • モバイルでは画像とテキストを縦に表示するかどうか ※1
  • カラム全体を塗りつぶすように画像を切り抜く
    • 画像をテキストの高さと同じにするかどうか
  • ALTテキスト
    • 画像が表示されなかった場合の代替テキスト
  • 画像サイズ
    • 画像サイズが複数用意されているので、レイアウトに合ったサイズにする
  • メディアの幅
    • お好みで画像の幅を決める

※1モバイル表示の縦と横の比較です。

モバイル縦表示

モバイル縦表示

モバイル横表示

モバイル横表示

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

くうか

設定は以上で、非常に簡単なブロックとなっています。

SWELLのメディアとテキストで透過や画像にテキストを重ねておしゃれにするコツ

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

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

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

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

メディアとテキストのブロークングリッド
グループ化する

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

スタイルや背景色を設定
スタイルや背景色を設定できる

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

くうか

他に背景色グレーも透過のように見えるので、ぜひ試してみてくださいね。

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

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

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

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

くうか

私もお気に入りのブロックで、当ブログのトップページによく採用していますよ。

SWELLってどんなテーマ?

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

楽天ROOMに愛用品を登録しています

楽天ROOM
SWELLのメディアとテキスト

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • いろいろなカスタマイズ、参考になります
    友人だけが見るブログなのですが新しくリニューアルしようと勉強中です。
    昨日SWELL購入させていただきました!
    がんばります!

    • 小6娘パパさん
      コメントありがとうございます!
      ブログのリニューアルにSWELLを使うんですね。
      楽しみですね~!
      記事が少しでも役に立ちますように。

      購入していただいたようで、ありがとうございました…!

コメントする

CAPTCHA


目次