初心者画像にテキストを重ねて表示する方法ってどうやるの？
オシャレなカスタマイズテクニックを教えて欲しい
そんな疑問に答えます。
SWELLは標準機能として、画像とテキストを重ねる「ブロークングリッド」という機能があります。まずはブロークングリッドのサンプルです↓
サンプル
本記事ではSWELLのブロークングリッドの基本的な使い方と、オシャレ度をアップするカスタマイズ方法を紹介します！
【サンプル】SWELLで作ったブロークンなデザイン要素
ブロークンなデザイン要素を取り入れたSWELLのサンプルサイトです。
メディアとテキストブロックで作るブロークングリッド
SWELLで画像とテキストを重ねて表示するには「メディアとテキスト」ブロックを使います。メディアとテキストはWordPress標準ブロックです。
かんたプラグインのインストール、CSS、フックなどプログラムの知識は不要です。
メディアとテキストブロックの挿入方法
ブロックエディターで、メディアとテキストブロックを挿入する方法は2つあります。
2つの方法
- ブロック一覧から選択する
- ショートカットで挿入する
かんたそれぞれ解説します。
【方法①】ブロック一覧から選択する方法
左上の「＋」のアイコンをクリック。
ブロックの一覧が表示されます。少し下にスクロールして「メディアとテキスト」をクリック。
【方法②】ショートカットを使う方法
一覧からブロックを探すのはちょっと面倒。そんな時は「ショートカット」を使いましょう。
エディター上で「/」（スラッシュ）を入力。
「メディア」と入力すると、メディアとテキストが表示されるので、クリック。
やり方はどちらでも構いませんが、ショートカットを覚えたほうが作業時間が短縮できるのでおすすめ！
画像をアップロード
引き続きメディアとテキスト上ので作業です。
メディアとテキストブロックを挿入後からの解説です。
「アップロード」をクリックし、表示する画像を選択しアップロード。
配置を選択
メディアとテキストで挿入すると、画像の位置を「右」「左」好きな方に表示できます。
メディアと画像ブロックのツールバーにある、「配置アイコン」をクリック。
表示幅を選択
メディアとテキストの表示幅を指定する方法です。
横幅を画面いっぱいに最大化する場合を解説します。
メディアと画像ブロックのツールバーにある、「配置を変更アイコン」をクリックし、「全幅」を選択。
任意のテキストを入力。
コンテンツエリアに任意のテキストを入力しましょう。
テキスト部分をクリックし、テキストを入力。
テキスト部分はテキスト以外にも、ブロックを追加できます。
SWELLボタンや画像なんかも追加できるので、自由にアレンジしてみましょう！
ブロークングリッドを適用
画像と文章の入力が完了したら、ブロークングリッドを適用します。
メディアとテキストブロックを選択した状態で、右側のブロックオプション内の「ブロークングリッド」を選択。
以上の作業で終了です。ブロークングリッドになっているか確認しましょう！
完成形
ブロークングリッド関連カスタマイズ
ブロークングリッドをさらにオシャレに見せるテクニックです！
オシャレ度アップなカスタマイズ
- テキスト部分の背景色を変更する
- テキストの重なり具合の調整
- テキストの余白を広げる
- カバーブロックに重ねる
かんたそれぞれ紹介します。
テキスト部分の背景色を変更する
| カスタマイズ | 評価 |
|---|---|
| 実用度 | 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固有の機能ではなく、WordPress標準機能です。
デフォルトテーマを有効化した状態のテキストとメディアブロックには「デフォルト」と「枠線」の2種類のスタイルが用意されていますが、ブロークングリッドはありません。
「SWELL以外のテーマでブロークングリッドを実装したい！」そんな場合のカスタマイズ方法をします。
かんたテーマに依存しない方法です。
ブロークングリッド用CSSコード
ブロックエディターテーマでの作業です。仕組みはシンプルにネガティブマージンを使う方法です。
画像の配置を「左」にする場合
メディアとテキストブロックを挿入。
メディアとテキストブロックに、任意のクラス名を付ける。
テキスト部分をグループ化する。
以下の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が少し違うので注意しましょう。
/* 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ユーザーの皆さんは、ぜひブロークングリッドを使いこなしてオシャレなデザインを実現させてください！