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

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

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

カラムの修正方法

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

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



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

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

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

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

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

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

この記事を書いた人

ポポデザイン
西宮市在住のWEBデザイナー・クリエイター。ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜Twitter｜Instagram

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

TwentyTwentyのWordPressテーマの横幅を変更する・初心者も簡単！
WordPressのデフォルトテーマ、TwentyTwentyテーマはシンプルなデザインで使い勝手が良さそうなのですが、コンテンツの横幅がなぜか580pxと狭いので、CSSを追記して横幅を広くしてみることにしました。今… [続きを読む]
WordPressを多言語化する簡単プラグイン！GTranslateの使い方
日本語だけでなく多言語化したホームページを作る場合、手動だと２つサイトを作らないといけないので時間も手間もかかります。今回は自動でWordPressで作ったサイトを翻訳してくれるプラグイン「GTranslate」をご紹… [続きを読む]
ポチッと押すだけ！初心者も簡単WordPressのバックアップ【Updraft Plus】
WordPressは標準でバックアップ機能が付いていないので、バックアップする方法を記載しました。バックアップだけでなく復元も簡単にできるものは限られてくるので、ここでは「Updraft Plus」というプラグインを… [続きを読む]
WordPressをサーバーにインストールする（ロリポップ！）
まずは、ロリポップ！の管理画面にログインします。（1）サーバー申し込み時の「アカウント」を入力（2）「ドメイン」を選択（3）パスワードを入力「ログイン」をクリック。ロリポップ！の管理画面の左側、「… [続きを読む]