ワードプレスで画像の配置を左右交互にしよう。ブロックエディターを用いて、画像の配置を左右交互にレイアウトしましょう。今回は、ワードプレスで画像の配置を左右交互にしようについて書いていきます。
以前、画像とテキストを横並びにする投稿を書いた訳ですが、これを応用し、画像とテキストの配置を左右交互にすることができます。そうすることで、デザインにリズムが生まれる為、是非取り入れてやってみて下さい。
| 結論を先に話ししておきます |
| クラシックエディターで記事を書いている場合、その記事の中に、画像とテキストを横並びに表示させることはできない「(CSS)を使えば別」と以前の投稿で書いたことがあります。ですがブロックエディターであれば簡単にできます。
しかも、画像を左右交互に入れ替えながら、その画像に見合った文章を書くことができるのです。当記事のアイキャッチ画像を参考にしてみて下さい。そんな感じです。画像を左右交互にすることで、記事全体が華やかになります。
Webのデザインレイアウトの中では、メジャーな手法と言われてますが、同じようなレイアウトが続くと単調になり過ぎて、何のリズム感もありません。画像が左右交互に配置されることでリズム感が生まれると言う訳です。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
またブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、図解を用いながら解説していきます。ブロックの「メディアとテキスト」を用いて作成していきますが、その前に、ブロックエディターとして設定されていない方は、下記の図解を参考にしてみて下さい。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次の画面で「オレンジ色枠」で囲まれているブロックエディターを選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。 |
【横並びブロックの組み合わせ】
前回投稿した「ワードプレスで画像の横に文字を入力する方法」を参考に、まずは画像の横に文字が入力してある状態で、次のステップへ進ませて下さい。この章では、図解を用いて解説していきます。
「ワードプレスで画像の横に文字を入力する方法」を開くと「メディアとテキスト」で作成した下記の図解に似たような記事があるので、その記事を参考に設定し、下記の図解から読み進めてみて下さい。
- では「ワードプレスで画像の横に文字を入力する方法」を参考に、下記の似たような画面を見つけることができたら「黄色枠」で囲まれているようにブロックを選択した状態にしておきましょう。
- 次に「緑色枠」で囲まれている「アイコン」が表示されるので押します。すると「水色枠」で囲まれているようにプルダウンが表示され、その中の「赤色枠」で囲まれている「複製」を押しましょう。
- 複製を押すと「オレンジ色枠」で囲まれているように同じブロックが下の方に表示されました。複製されたブロックはそのまま選択されている状態にしておきましょう。
- 次に「紫色枠」で囲まれている「アイコン」があるので押してみて下さい。すると左側に表示されていた画像が右側に表示されるようになりました。
- ではもう一度。ブロックを選択した状態で「赤色枠」で囲まれている「アイコン」を開くと「桃色枠」で囲まれているようにプルダウンが表示され「オレンジ色枠」で囲まれている「複製」を押します。
- すると「紫色枠」で囲まれているように、3つ目のブロックが表示されました。そして「緑色枠」で囲まれている「アイコン」を押すと、画像が左側へ移動されたことが分かります。
- では逆に、余計なブロックを削除してみたいと思います。現在「黄色枠」で囲まれている中には、3つのブロックがあります。その中の「水色枠」で囲まれている「画像」を削除してみたいと思います。
削除したいブロックを選択した状態のままキーボードの「Back Space」を押せば削除されます。
- すると、3つ表示されていたブロックが「オレンジ色枠」で囲まれているように2つしかないことが分かります。
| 「複製元」のブロックから、画像を複製し、画像とテキストの入れ替えをする。不要となったブロックは、ブロックを選択後、キーボードの「Back Space」で削除。ここまでの流れについては、理解して頂けたかと思います。 |
【背景色とテキスト色の変更】
次に、複製元のブロックと、複製されたブロックで「テキストエリア」の色を変更してみましょう。背景色もテキスト色も簡単にできます。上記と同じくこちらも図解を見ながら最初はやってみて下さい。
ブロックエディターは、様々なブロックがあり、幅広く使えるのでブログ自体が華やかになり、レイアウトも自由自在に変更することができるので、訪問者に良い印象を与えることができるようになります。
- まず初めに、上のブロックからいきます。「赤色枠」で囲まれているブロックを選択し「オレンジ色枠」で囲まれている「背景」を開きます。すると「黄色枠」で囲まれているようにプルダウンが表示されます。
その中のこちらでは「水色枠」で囲まれている色(水色)を選択してみました。
- その下のブロックもやってみましょう。「緑色枠」で囲まれているブロックを選択し「水色枠」で囲まれている「背景」を開いてみましょう。すると「紫色枠」で囲まれているようにプルダウンが表示されます。
下のブロックは「桃色枠」で囲まれている色(桃色)を選択してみました。
- 「桃色枠」で囲まれている「プレビュー」を開いてみましょう。すると「黄色枠」で囲まれているようにプルダウンが表示されます。その中の「緑色枠」で囲まれている「新しいタブでプレビュー」を開いてみよう。
- 下記の図解は、トップページから見た感じです。「黄色枠」で囲まれているように背景色が付きました。では文字色も変えてみましょう。
- 次も上のブロックからいきます。「紫色枠」で囲まれているブロックを選択し「水色枠」で囲まれている「テキスト」を開きます。すると「緑色枠」で囲まれているようにプルダウンが表示されます。
その中のこちらでは「茶色枠」で囲まれている色(白色)を選択してみました。
- その下のブロックもやってみましょう。「オレンジ色枠」で囲まれているブロックを選択し「桃色枠」で囲まれている「背景」を開きます。すると「緑色枠」で囲まれているようにプルダウンが表示されます。
下のブロックは「青色枠」で囲まれている色(青色)を選択してみました。
- 「桃色枠」で囲まれている「プレビュー」を開いてみましょう。すると「赤色枠」で囲まれているようにプルダウンが表示されます。その中の「緑色枠」で囲まれている「新しいタブでプレビュー」を開いてみよう。
- 下記の図解は、トップページから見た感じです。「赤色枠」で囲まれているように「上のテキスト文字は白」「下のテキスト文字は青」それぞれ色を付けることができました。
| このように、背景色や文字色をつけることで、文章自体が美しく左右交互に表示される為、訪問者に良い印象を与えることができます。また背景色には、グラデーションもあるので、いろいろ試してみると良いかも知れません。 |
今回は以上となります。ワードプレスで画像の配置を左右交互にしようについては難しいと感じなかったかと思います。ブロックエディターは、沢山のブロックがあるので少しずつでも使い方を覚えていきましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
