WordPressグーテンベルク(Gutenberg)のカラム落ちを調整
![グーテンベルクのカラム](https://popo-design.net/wp/wp-content/uploads/2018/12/g-colomn2.jpg)
グーテンベルクを使い始めてページ作成が早くなりとても便利なのですが、
「カラム」ボックスで2カラムのブロックを作り、画像とテキストを並べるとPC表示とスマホ表示の間くらいで表示が崩れてしまいます。
![カラム落ち](https://popo-design.net/wp/wp-content/uploads/2018/12/g-column.jpg)
私だけかも知れませんが、2サイト制作時に同じ現象が起きたので修正方法を書いておきます。
カラムの修正方法
ブロックが落ちるところで、スマホ表示に切り替えてしまえば良いので。
style.cssに下記のコードを追記しました。
- /*グーテンベルク カラムのズレを直す 表示幅が800px以下のとき
- -----------------------------------*/
- @media only screen and (max-width:800px) {
- .wp-block-columns {
- display: flex;
- flex-direction: column; /* ブロックを縦に表示させる */
- }
- }
max-width:〇〇;
の横幅は、サイトによって異なるので変更してください。
どこに書き加えるのかわからない場合は、
管理画面の「外観」→「カスタマイズ」→「追加CSS」に
コードを追加して「公開」ボタンを押してください。
![カラム調整](https://popo-design.net/wp/wp-content/uploads/2018/12/g-column3.jpg)
これでタブレット表示でもうまく表示できました。
もっと良い方法があるのかも知れませんが、よく分からなかったのでこれで良しとします。
ご参考になれば幸いです。
[公開日] 2019年1月7日 / カテゴリー:WordPress
同じカテゴリーの記事
-
WordPressでデータベースアップグレード後にエラーが出た場合の修正方法【さくらサーバー】
さくらサーバーでデータベースを5.5→5.7へバージョンアップした際に「データベース接続確立エラー」が出て、修正対応でハ [続きを読む]
-
Twenty Seventeen(無料テーマ)でホームページを作る
WordPressは「テーマ」と呼ばれるテンプレートでデザインを変更することができます。 無料のものから有料のものまであ [続きを読む]
-
レンタルサーバーの借り方(ロリポップ!)
サーバーとはホームぺージのデータを置いておく「場所」のことです。 レンタルサーバーを借りることで、自分で作ったホームペー [続きを読む]
-
XWRITE子テーマの作り方備忘録
WordPressをカスタマイズする際に使う「子テーマ」ですが、作り方の備忘録を書いておきます。XWRITEテーマ向けに [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)