スポンサーリンク

カラムブロック(ブロックエディタ― )のレスポンシブ対応を簡単に実現【おすすめの方法~プラグイン使用】

ブロックエディタ―使い方Word Press

ブロックエディターで、レスポンシブ対応の横並びレイアウトを簡単にできる便利な方法をご紹介します。

横並びレイアウトは、カラムブロックを使うのが便利です。

しかし、スマホで表示した際に1カラムで縦に表示されます。

たいていの場合は、これで問題ないと思いますが、コンテンツの内容によっては、1カラム以外で表示させたい場合があるかもしれません。

また、パッドの場合のカラム数も変えたいというケースもあると思います。

CSSによって表示を変えることができますが、初心者には調整がなかなか大変です。

しかし、プラグイン(Snow Monkey Blocks)の「項目ブロック」を使えば、レスポンシブ対応と端末に応じた配置数の設定が自由自在にできます。

その方法をご紹介します。

「項目ブロック」を使うと、PC、パッド、スマホの3つのウィンドウサイズごとに、カラム数を簡単に設定できます。

ブロックエディターの使い方総まとめについてはこちらをご覧ください。

SnowMonkey Blocksについて

ブロックエディター使い方

「Snowmonkey」という国産テーマ用のブロック集です。(モンキーレンチさん制作)

Snowmonkeyテーマを使っていない方でも利用できます。

Snowmonkeyテーマを使っていない場合は、一部使えないブロックもありますが、主要なブロックは利用できます。

様々な装飾ができる数多くのブロックを追加できるので、入れておいて損はないと思います。

Snow Monkey Blocks 公式サイト

カラムブロックを使った横並びレイアウト(上手くいかなかった例)

最初に私が実際に試した、うまくいかなかった例をご紹介します。

1カラムのページで、3カラムの吹き出しブロックを使ってレイアウトしました。
(吹き出しブロックはSnow Monkey Blocksから使いました。)

ブロックエディター(カラム)

PCで見た場合。きれいに並んでいます。

ブロックエディター(カラム)

スマホで見た場合。1カラムでちょうどよい感じ。

ブロックエディター(カラム)

パッドで見た場合。
テキストが縦長になります。テキストがもっと多いとさらに細長くなってしまいます。
これを1カラムにしたいと思いました。

ブロックエディター(カラム)

SnowMonkey Blocks(項目ブロック)でレスポンシブ対応を簡単に実現

この方法はプラグイン「Snow Monkey Blocks」のインストールが必要です。

同じレイアウトでSnow Monkey Blocksを使ってみました。

すると、パッドでもきれいな1カラムのレイアウトが実現できました。

項目ブロックは、4種類ありますが、ここでは項目(自由入力)を使います。

項目ブロック(自由入力)の使い方

Snow Monkey Blocksをインストールすると、ブロック一覧にSnow Monkey Blocksが追加されます。

ブロック一覧からSnow Monkey Blocksの「項目」を選択します。

ブロックエディター(項目)

「項目」を選択すると、「項目(スタンダード)」が挿入されます。
今回は「項目(自由入力)」を使うので、「項目」のアイコンをクリックします。

ブロックエディター(項目)

3つの選択肢が表示されるので、「項目(自由入力)」を選択します。
(※自由入力以外の項目については、後ほど解説します。)

ブロックエディター(項目)

「項目(自由入力)」ブロックが表示されます。
ここで「文章を入力、または/ でブロックを選択」をクリック

ブロックエディター(項目)

すると、+マーク(黒)が表示されるので、希望のブロックを選択します。
今回は、「吹き出しブロック」(Snow Monkey Blocks)を挿入。

ブロックエディター(項目)

「吹き出しブロック」が挿入されたら、画像やテキストを入れます。

ブロックエディター(項目)

次に2つ目の吹き出しを挿入します。
項目ブロック全体を選択すると、下部に+マーク(白)が表示されます。
これをクリックすると、2つ目の項目が追加できます。

ブロックエディター(項目)

各項目ブロックの選択肢から「項目(自由入力)」を選択します。

ブロックエディター(項目)

同様に3つ目のブロックも追加すると、図のように3つの吹き出しブロックが並びます。
デフォルトで2カラムになっているので、右サイドバーのブロック設定で、3カラムに変更します。

ブロックエディター(項目)

3カラムになりました。
PCで見た場合。カラムブロックの時と同様、きれいに並んでいます。
スマホの場合は1カラムでカラムブロックと同様です。

ブロックエディター(カラム)

パッドの場合も1カラムで良い感じで並んでいます。

ブロックエディター(項目)

右のブロック設定で、3つのウィンドサイズごとにカラム数を設定できます。
デフォルトでは、ラージウィンドウ2カラム、ミディアムウィンドウ1カラム、スモールウィンドウ1カラムになっています。

ブロックエディター(項目)

ミディアムウィンドウで2カラムに変更してみると、パッドではこのように表示されました。
自由自在ですね。
スマホでの2列表示なども簡単にできます。

ブロックエディター(項目)

その他の項目ブロックについて

項目ブロックは4種類あります。前述の「自由入力」以外の項目ブロックについて解説します。

  1. 項目(自由入力)
  2. 項目(ブロックリンク)
  3. 項目(スタンダード)
  4. バナー

項目(ブロックリンク)/ 項目(スタンダード)

ブロックエディター(項目)

3カラムの例です。
「項目(ブロックリンク)」は、各パーツが画像とタイトル、テキスト、リンクボタンで構成され、ボタンだけではなく、1つのパーツ全体(画像やテキスト)がリンクになります。

「項目(スタンダード)」は、各パーツは「項目(ブロックリンク)」と同じですが、ボタンのみがリンクとなります。

バナー

ブロックエディター(項目)

3カラムの例です。
「バナー」は、画像リンクを並べるブロックです。
画像の上にテキストを挿入できます。

まとめ

ワードプレス標準のカラムブロックは便利ですが、たまたまIpadでサイトを見た時に、レイアウトがおかしくなっていたのに気づきました。

CSSでレイアウトを整えるのは、初心者にはたいへんなので、この項目ブロックはおすすめです。

今回は吹き出しブロックを挿入した例で解説しましたが、画像とテキストなど様々な組み合わせの場合のレスポンシブ対応にも便利だと思います。

タイトルとURLをコピーしました