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日 / カテゴリー：WordPress

---

<< 次の記事｜トップ｜前の記事 >>

この記事を書いた人

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

同じカテゴリーの記事

• 

  WordPressでデータベースアップグレード後にエラーが出た場合の修正方法【さくらサーバー】

  さくらサーバーでデータベースを5.5→5.7へバージョンアップした際に「データベース接続確立エラー」が出て、修正対応でハ [続きを読む]

• 

  WordPress5.5からのサイトマップ機能を制作案件で使用した感想

  WEBサイトの構造をGoogleに伝えるXMLサイトマップ機能が、WordPress5.5からプラグイン無しで標準機能と [続きを読む]

• 

  WP-Membersでログインしている時のみカスタムフィールドの内容を表示する方法

  WordPressで会員サイトを作るときに入れたWP-Membersプラグインはシンプルで使いやすいプラグインなのですが [続きを読む]

• 

  WordPressの無料テーマを配布しました・日本語スマホ対応

  WordPressでの制作案件で使用しているベーステーマを無料テーマとして配布してみました。主に小規模の制作関係の方に特 [続きを読む]

---

最新の投稿

---

---

---

---

---