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のバックアップ【Updraft Plus】WordPressは標準でバックアップ機能が付いていないので、バックアップする方法を記載しました。 バックアップだけでなく復元も簡単にできるものは限られてくるので、 ここでは「Updraft Plus」というプラグインを… [続きを読む]
-
TwentyTwentyのWordPressテーマの横幅を変更する・初心者も簡単！WordPressのデフォルトテーマ、TwentyTwentyテーマはシンプルなデザインで使い勝手が良さそうなのですが、コンテンツの横幅がなぜか580pxと狭いので、CSSを追記して横幅を広くしてみることにしました。 今… [続きを読む]
-
ロリポップ！のサーバーに独自ドメインを設定する独自ドメインとレンタルサーバーの申し込みができたら、ドメインをサーバーに設定しましょう。 ロリポップの管理画面から独自ドメインを設定 「【ロリポップ！】お申込み完了のお知らせ」のメールの中から、「ユーザー専… [続きを読む]
-
WordPressを多言語化する簡単プラグイン！GTranslateの使い方日本語だけでなく多言語化したホームページを作る場合、手動だと２つサイトを作らないといけないので時間も手間もかかります。 今回は自動でWordPressで作ったサイトを翻訳してくれるプラグイン「GTranslate」をご紹… [続きを読む]
最新の投稿
2020年05月18日
2020年04月30日
2020年04月13日
2020年04月06日
2020年03月25日
カテゴリー
アーカイブ
