ワードプレスのレイアウトを自由にする。決まったレイアウトではなく、自由に作成することができるレイアウトにしませんか。今回は、ワードプレスのレイアウトを自由にするについて書いていきます。
ワードプレスでは、ブロックは縦方向に並びますが、横方向にコンテンツを並べるとレイアウトの魅力が増します。カラムのブロックを使用すると、このようなレイアウトが誰でも簡単に実現することができます。
| 結論を先に話ししておきます |
| 当記事では「ブロックエディター」を用いて図解入りで解説していきます。「クラシックエディター」を使用されている場合、レイアウトの変更はできないので「CSS」などで変更する必要がでてきます。
ブロックエディターでは「カラム」と言うブロックを用いて作成していきます。このカラムを使うと、誰でも簡単にレイアウトの変更をおこなうことが可能となります。そうすることで、ブログも楽しく作成できるのではと思っています。
ワードプレスは、誰もが話ししているように更新しやすいブログツールです。ですが「自由にレイアウトできる」と言う意味ではありません。ワードプレスを触るのであれば、そのような認識を持つのも必要です。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、図解を用いながら解説していきます。ブロックの「カラム」を用いて作成していきますが、その前に、ブロックエディターとして設定されていない方は、下記の図解を参考にしてみて下さい。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次の画面で「オレンジ色枠」で囲まれているブロックエディターを選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。 |
【ブロックエディターのカラムを活用する】
クラシックエディターを使用されていた方は、ブロックエディターへの変更を済まされたかと思います。この章から、ブロックエディターのカラムを使用して、いろいろなレイアウトに挑戦してみましょう。
- まず初めに「投稿」「固定ページ」のどちらでも構わないので新規追加を開きます。次に「緑色枠」で囲まれている「+」を押してみて下さい。
- +を開くと、ブロックの一覧が表示されますので、その中の「紫色枠」で囲まれている「カラム」を開いてみましょう。
- カラムを開くと「水色枠」で囲まれている「カラム」が開きます。コチラでは「緑色枠」で囲まれている「33/33/33」を選択してみました。
- すると「黄色枠」で囲まれている中に、ボックスが3つ並んでいます。コチラの方では最初に「オレンジ色枠」で囲まれているボックスから設定していきます。
- ボックスを開くと「赤色枠」で囲まれているようにプルダウンが表示され、その中の「桃色枠」で囲まれている「画像」を開きます。
- 画像を開くと「オレンジ色枠」の中の「緑色枠」で囲まれている「画像を選択」を開きます。次に「水色枠」で囲まれているようにプルダウンが表示され「桃色枠」で囲まれている「メディアライブラリ」を開きます。
- 次に、コチラの方では「オレンジ色枠」で囲まれている画像を選択した後、右下にある「水色枠」で囲まれている「選択」を押します。
- 選択を押すと「黄色枠」で囲まれているように選択した画像が表示されました。この後「中央」と「右側」にも、同じように画像を入れていきましょう。
- 先に「桃色枠」で囲まれているボックスを押した後「オレンジ色枠」で囲まれているようにプルダウンが表示されます。その中の「緑色枠」で囲まれている「画像」を押しましょう。
- その後「黄色枠」で囲まれている中の「紫色枠」で囲まれている「画像を選択」を押します。
- 画像を選択を押すと「赤色枠」で囲まれているプルダウンが表示され「水色枠」で囲まれている「メディアライブラリ」を開いてみましょう。
- コチラの方では「オレンジ色枠」で囲まれている画像を選択し、右下にある「赤色枠」で囲まれている「選択」を押しました。
- 選択を押すと「紫色枠」で囲まれているように選択した画像が表示されました。次の「右側」のボックスですが、自分でやってみましょう。
- 設定する順番は「ボックスを押す」→「画像」→「画像を選択」→「メディアライブラリ」→「選択したい画像を選択」→「選択を押す」→「右ボックスに画像が表示される」といった流れです。
すると「赤色枠」で囲まれているように右側にも画像が表示されるようになりました。
- 「プレビュー」で確認。「オレンジ色枠」で囲まれている「プレビュー」を押すと「黄色枠」で囲まれているようにプルダウンが表示され「紫色枠」で囲まれている「新しいタブでプレビュー」を押します。
- 「トップページ」での確認。「水色枠」で囲まれているように横並びの画像が3列表示されました。
様々なカラム表示
カラム表示は、上記で紹介した「33/33/33」以外にも、5種類ほどありますが、設定の内容によっては、それ以上もあります。それらを図解入りで紹介してみたいと思います。それでは見ていきましょう。
- 設定方法は割愛しますが「赤色枠」で囲まれている「100」を見てみましょう。
- トップページから見た感じです。
- 次に「桃色枠」で囲まれている「50/50」を見てみましょう。
- トップページから見た感じです。
- 次に「オレンジ色枠」で囲まれている「30/70」を見てみましょう。
- トップページから見た感じです。
- 次に「黄色枠」で囲まれている「70/30」を見てみましょう。
- トップページから見た感じです。
- 次に「緑色枠」で囲まれている「25/50/25」を見てみましょう。
- トップページから見た感じです。
| ここで様々なレイアウトを見ることができたかと思います。これら画像の「横」もしくは「下」にキャプションを付けていく形となります。 |
カラム数の変更
カラム数の変更は、最大で横並び6個まで登録することができます。ですが、画像自体は非常に小さくなり、スマートフォンで見た場合、当然ながら横並び6個は表示されません。では見てみましょう。
- まずは「オレンジ色枠」で囲まれている画像全てを選択します。すると、右側に表示されている「紫色枠」で囲まれている「スライド」と「水色枠」で囲まれている「直接入力」する項目が表示されます。
スライドでも直接入力でも構わないので、画像のボックス(最大6個)を増やしてみて下さい。また念の為「黄色枠」で囲まれている「モバイルでは縦に並べる」を「ON」にするか「OFF」にするか設定できます。
- コチラでは「桃色枠」で囲まれているように「6個の画像」を設定してみました。
- トップページから見た感じです。「水色枠」で囲まれているように画像が6個横並びになっていることが分かります。
| カラムのレイアウトを自由にできるとは言え、画像を横に6個並べるのは無理があり、スマートフォンでは表示されません。 |
画像の下に文字を入れてみよう
この場合、キャプションと言いますが、画像の横もしくは下に文字を入力することを意味します。画像を表示させただけでは、意味がありません。その画像に関連した文字を入力するように心掛けましょう。
- では最初に「水色枠」で囲まれている画像を選択すると「キャプションを追加」が表示されるので文字を入力しましょう。
- 次に「赤色枠」で囲まれている箇所も同じようにやってみましょう。
- 次の「緑色枠」で囲まれている箇所も同じようにやってみましょう。
- トップページから見た感じです。「桃色枠」で囲まれているように画像の直ぐ下に文字が表示されていることが分かります。
今回は以上となります。ワードプレスのレイアウトを自由にするについては理解して頂けたでしょうか。クラシックエディターでは、このようなことはできませんが、ブロックエディターであれば簡単にできます。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
