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

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

私だけかも知れませんが、2サイト制作時に同じ現象が起きたので修正方法を書いておきます。
カラムの修正方法
ブロックが落ちるところで、スマホ表示に切り替えてしまえば良いので。
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講座
同じカテゴリーの記事
-
ポチッと押すだけ!初心者も簡単WordPressのバックアップ【Updraft Plus】
WordPressは標準でバックアップ機能が付いていないので、バックアップする方法を記載しました。 バックアップだけでなく復元も簡単にできるものは限られてくるので、 ここでは「Updraft Plus」というプラグインを… [続きを読む]
-
WordPressの自動更新機能を案件で使用したことについて
WordPress5.5から標準機能でシステムとプラグイン、テーマの自動更新ができるようになったので、昨年頃から実際の制作案件でも取り入れています。 これまでもfunctions.phpに追記やプラグインを追加するなどで… [続きを読む]
-
WordPressのどのphpファイルを読み込んでいるか確認できるプラグイン【What The File】
WEBサイトをカスタマイズしていると、このファイルはどこのphpファイル??? という疑問が出ることは、特に他人様が作ったサイトをカスタマイズする時に出てくると思いますが、現在表示しているページがどのphpファイルかを教… [続きを読む]
-
WordPressの初期設定をする
WordPressをインストールできたら、初期設定をしましょう まずは管理画面にログインして、左メニュー「設定」→「一般」を開きます。 (1)「サイトのタイトル」変更する場合は、書き換えます (2)「キャッ… [続きを読む]
最新の投稿
2022年05月16日
2022年05月10日
2022年04月18日
2022年04月12日
2022年04月12日
カテゴリー
アーカイブ

このサイトはさくらのレンタルサーバを使用しています。
