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講座
同じカテゴリーの記事
-
WordPressでデータベースアップグレード後にエラーが出た場合の修正方法【さくらサーバー】さくらサーバーでデータベースを5.5→5.7へバージョンアップした際に「データベース接続確立エラー」が出て、修正対応でハマってしまったので参考までにメモしておきます。 基本的な作業の流れはさくらの公式サイトに記載されてい… [続きを読む]
-
WordPressのプラグインを多用するリスクと対策先日、WordPressで作ったサイトのバックアップと、ヘッダー画像を差し替えたいとのご相談があったのですが、 サイトを拝見したところ、レイアウトを含めていたるところに30個以上の大量のプラグインが使用されており、更新も… [続きを読む]
-
初心者おすすめ！ドメイン・レンタルサーバー選び【WEBデザイナー厳選】独自でホームページを作るのに必要になるのが、ドメインとレンタルサーバーです。 たくさんの会社がありますが、なるべく利用者の多いものを選んでおくと、何かあったときにネットですぐ調べたり、周りに聞けるのでおすすめです。 今回… [続きを読む]
-
WordPressでfont-weightが効かないWEBフォントを太字にするCSSでWEB上のフォントを太字にするには、font-weightで指定する方法がありますが、一部のWEBフォントでは対応しておらず、太字にすることができません。 今回はWordPressのグーテンベルク上の段落ブロック… [続きを読む]
最新の投稿
2021年01月19日
2020年12月23日
2020年12月21日
2020年12月17日
カテゴリー
アーカイブ
