WordPressグーテンベルク(Gutenberg)のカラム落ちを調整

グーテンベルクのカラム

グーテンベルクを使い始めてページ作成が早くなりとても便利なのですが、
「カラム」ボックスで2カラムのブロックを作り、画像とテキストを並べるとPC表示とスマホ表示の間くらいで表示が崩れてしまいます。

カラム落ち

私だけかも知れませんが、2サイト制作時に同じ現象が起きたので修正方法を書いておきます。

カラムの修正方法

ブロックが落ちるところで、スマホ表示に切り替えてしまえば良いので。

style.cssに下記のコードを追記しました。

  1. /*グーテンベルク カラムのズレを直す 表示幅が800px以下のとき
  2. -----------------------------------*/
  3. @media only screen and (max-width:800px) {
  4. .wp-block-columns {
  5.     display: flex;
  6.     flex-direction: column; /* ブロックを縦に表示させる */
  7. }
  8. }

max-width:〇〇;
の横幅は、サイトによって異なるので変更してください。

どこに書き加えるのかわからない場合は、
管理画面の「外観」→「カスタマイズ」→「追加CSS」に
コードを追加して「公開」ボタンを押してください。

カラム調整

これでタブレット表示でもうまく表示できました。
もっと良い方法があるのかも知れませんが、よく分からなかったのでこれで良しとします。

ご参考になれば幸いです。

[公開日] 2019年1月7日 / [最終更新日] 2019年1月7日 カテゴリー:WordPress講座


トップ

同じカテゴリーの記事