【SWELL】画像とテキストを重ねるブロークングリッドの設定方法とカスタマイズテクニックを紹介します!

【レビュー】JIN:Rを使って分かったこと
初心者

画像にテキストを重ねて表示する方法ってどうやるの?
オシャレなカスタマイズテクニックを教えて欲しい

そんな疑問に答えます。

SWELLは標準機能として、画像とテキストを重ねる「ブロークングリッド」という機能があります。まずはブロークングリッドのサンプルです↓

サンプル

ブロークングリッドのサンプル
ブロークングリッドのサンプル
ブロークングリッドのサンプル

本記事ではSWELLのブロークングリッドの基本的な使い方と、オシャレ度をアップするカスタマイズ方法を紹介します!

SWELL公式サイト
この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【サンプル】SWELLで作ったブロークンなデザイン要素

ブロークンなデザイン要素を取り入れたSWELLのサンプルサイトです。

メディアとテキストブロックで作るブロークングリッド

ブロークングリッドの基本操作

SWELLで画像とテキストを重ねて表示するには「メディアとテキスト」ブロックを使います。メディアとテキストはWordPress標準ブロックです。

かんた

プラグインのインストール、CSS、フックなどプログラムの知識は不要です。

メディアとテキストブロックの挿入方法

ブロックエディターで、メディアとテキストブロックを挿入する方法は2つあります。

2つの方法

  1. ブロック一覧から選択する
  2. ショートカットで挿入する
かんた

それぞれ解説します。

【方法①】ブロック一覧から選択する方法

操作内容

左上の「」のアイコンをクリック。

ブロックの一覧が表示されます。少し下にスクロールして「メディアとテキスト」をクリック。


【方法②】ショートカットを使う方法

一覧からブロックを探すのはちょっと面倒。そんな時は「ショートカット」を使いましょう。

操作内容

エディター上で「/」(スラッシュ)を入力。

スラッシュ

メディア」と入力すると、メディアとテキストが表示されるので、クリック。

入力は英文字「media」でも構いません。

やり方はどちらでも構いませんが、ショートカットを覚えたほうが作業時間が短縮できるのでおすすめ!

画像をアップロード

引き続きメディアとテキスト上ので作業です。

メディアとテキストブロックを挿入後からの解説です。

操作内容

アップロード」をクリックし、表示する画像を選択しアップロード。

メディアをアップロード

配置を選択

メディアとテキストで挿入すると、画像の位置を「右」「左」好きな方に表示できます。

操作内容

メディアと画像ブロックのツールバーにある、「配置アイコン」をクリック。

表示幅を選択

メディアとテキストの表示幅を指定する方法です。

横幅を画面いっぱいに最大化する場合を解説します。

操作内容

メディアと画像ブロックのツールバーにある、「配置を変更アイコン」をクリックし、「全幅」を選択。

全幅を選択

任意のテキストを入力。

コンテンツエリアに任意のテキストを入力しましょう。

操作内容

テキスト部分をクリックし、テキストを入力。

テキストを入力

テキスト部分はテキスト以外にも、ブロックを追加できます。

SWELLボタンや画像なんかも追加できるので、自由にアレンジしてみましょう!

ブロークングリッドを適用

画像と文章の入力が完了したら、ブロークングリッドを適用します。

操作内容

メディアとテキストブロックを選択した状態で、右側のブロックオプション内の「ブロークングリッド」を選択。

グリッド

以上の作業で終了です。ブロークングリッドになっているか確認しましょう!

完成形

ブロークングリッド

ブロークングリッド関連カスタマイズ

ブロークングリッド関連カスタマイズ

ブロークングリッドをさらにオシャレに見せるテクニックです!

オシャレ度アップなカスタマイズ

  1. テキスト部分の背景色を変更する
  2. テキストの重なり具合の調整
  3. テキストの余白を広げる
  4. カバーブロックに重ねる
かんた

それぞれ紹介します。

テキスト部分の背景色を変更する

カスタマイズ評価
実用度 5.0 / 5
オシャレ度 4.5 / 5
テキスト部分の背景色を変更する

まずはサンプルです↓

テキスト部分の背景色が紺色、フォントを白に変更しています。

テキスト部分がハッキリ見えますよね?

背景とテキストの色が似ていると、重なっているテキスト部分が読みにくくなることがあります。背景に色を指定することで、テキストがハッキリ読めるデザインに仕上がります。

操作内容

テキスト部分の「段落ブロック」を全て選択。

テキスト部分の「段落ブロック」を全て選択。

グループブロックを選択し、ツールバー「右端のアイコン」をクリックし、「グループ化」をクリック。

ツールバー「右端のアイコン」をクリックし、「グループ化」を選択。

右側のブロックオプションにある、「テキスト色」「背景色」で好きな色を選択。

フォントと背景色を変える

テキストの重なり具合の調整

カスタマイズ評価
実用度 4.5 / 5
オシャレ度 4.5 / 5
ブロークングリッドの重なり具合

ブロークングリッドを選択したけど、もうすこしテキスト部分を画像側に載せたい…..

色々設定確認しましたが、管理画面から重なり具合を調整するオプションはありません。独自にコードを追加する作業が必要です。

かんた

後日記事を用意します!

テキストの余白を広げる

カスタマイズ評価
実用度 5.0 / 5
オシャレ度 4.0 / 5
テキストの余白を広げる

標準のメディアとテキストブロックのテキスト部分ですが、標準だと少し余白が狭い感じがしませんか?

メディアとテキストブロックはSWELLではなく、WordPressの機能です。残念ながらこのブロック内に余白の値を設定するオプションはありません。

PCでちょうどよく見える余白を設定し、さらにスマホでも余白を調整するコードが必要になります。

かんた

詳しくは次の記事で解説しています。

カバーブロックに重ねる

カスタマイズ評価
実用度 4.0 / 5
オシャレ度 5.0 / 5
テキストの余白を広げる

まずはサンプルです↓

このカスタマイズを実装しているデモサイトです。

カバーブロクを設置し、そのうえに少しだけ重なる用にテキストを配置しています。

少しずらしたブロークンなデザインって、オシャレ度がグイっとあがりますね?何ていうか「プロっぽい仕上がり」。

SWELLの機能だけではこのデザインは実現できないので、少し独自のカスタマイズをしています。ちなみに、上記デモサイトではカバーブロックに動画を配置していますが、静止画像でも同じことができます。

かんた

このカスタマイズは次の記事で解説しています。

【備考】SWELL以外でブロークングリッドを実装する方法

【備考】SWELL以外でブロークングリッドを実装する方法

テキストとメディアブロックはSWELL固有の機能ではなく、WordPress標準機能です。

デフォルトテーマを有効化した状態のテキストとメディアブロックには「デフォルト」と「枠線」の2種類のスタイルが用意されていますが、ブロークングリッドはありません。

「SWELL以外のテーマでブロークングリッドを実装したい!」そんな場合のカスタマイズ方法をします。

かんた

テーマに依存しない方法です。

ブロークングリッド用CSSコード

ブロックエディターテーマでの作業です。仕組みはシンプルにネガティブマージンを使う方法です。

画像の配置を「左」にする場合

メディアとテキストブロックを挿入。

メディアとテキストブロックに、任意のクラス名を付ける。

クラス名を「broken-left」とします。

テキスト部分をグループ化する。

以下のCSSコードを追加する。

.broken-right .wp-block-group__inner-container{
margin-left: -250px !important;
}

このコードを設置すると、テキスト部分が左側に移動し画像部分と重って表示されます。

ネガティブマージンで指定している250pxの数値を調整することで、テキストがより画像側に重なります。例えば300pxにすれば、テキスト部分が左によります。

.broken-right .wp-block-group__inner-container{
margin-left: -250px !important;
padding:60px 0px 60px 80px !important;  ←余白用のコード
}

レスポンシブコード

上記コードだと、スマホなど解像度の小さい端末で閲覧するとバランスが悪くなります。

メディアクエリを使い、ある程度解像度のある端末のみ今回のCSSコードを適用させるほうが良いでしょう。

/* PCのみ表示*/
@media (min-width: 960px){

.broken-right .wp-block-group__inner-container{
margin-left: -250px !important;
padding:50px 0 50px 80px;
}

}

画像の配置を「右」にする場合

やることは画像を「左」にするとの同じです。CSSが少し違うので注意しましょう。

メディアとテキストブロックのクラス名を「broken-right」とします。


/* PCのみ表示*/
@media (min-width: 960px){

.broken-left .wp-block-group__inner-container{
margin-right: -250px !important;
padding:50px 80px 50px 0px;
}

}

以上で作業終了です。

このカスタマイズテクニックを使うとLightningなどブロークングリッドのないテーマでも簡単にブロークングリッドを導入できます。

まとめ

WordPressテーマ「SWELL」のブロークングリッドについての紹介でした。

ブロークングリッドはSWELL固有の機能です。SWELLユーザーの皆さんは、ぜひブロークングリッドを使いこなしてオシャレなデザインを実現させてください!

公式 WordPressテーマSWELL

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