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

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

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

カラムの修正方法

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

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講座

---

｜トップ｜前の記事 >>

同じカテゴリーの記事

• 

  ロリポップ！のサーバーに独自ドメインを設定する

  独自ドメインとレンタルサーバーの申し込みができたら、ドメインをサーバーに設定しましょう。   ロリポップの管理画面から独自ドメインを設定 「【ロリポップ！】お申込み完了のお知らせ」のメールの中から、「ユーザー専… [続きを読む]

• 

  WordPressをサーバーにインストールする（ロリポップ！）

  まずは、ロリポップ！の管理画面にログインします。 （1）サーバー申し込み時の「アカウント」を入力 （2）「ドメイン」を選択 （3）パスワードを入力 「ログイン」をクリック。   ロリポップ！の管理画面の左側、「… [続きを読む]

• 

  WordPressの初期設定をする

  WordPressをインストールできたら、初期設定をしましょう まずは管理画面にログインして、左メニュー「設定」→「一般」を開きます。   （1）「サイトのタイトル」変更する場合は、書き換えます （2）「キャッ… [続きを読む]

• 

  Twenty Seventeen（無料テーマ）でホームページを作る

  WordPressは「テーマ」と呼ばれるテンプレートでデザインを変更することができます。 無料のものから有料のものまでありますが、今回はWordPressの公式テーマ「Twenty Seventeen」というデフォルトの… [続きを読む]