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を仕事として本格的に使うには、ドメインとサーバーを借りる必要があります。 ドメインとは、自分のホームページの「住所」で、サーバーはデータを置いておく「場所」です。 初めて取得されるかたは、ムームードメイ… [続きを読む]
-
WordPressの【現在メンテナンス中のため、しばらくの間ご利用いただけません】の復旧方法WordPressサイトのシステムやプラグインを更新中に、うっかり管理画面の他のページを触ってしまうと、 このようなエラーが出てしまうことがあります。 そのままにしておいても、待てど暮らせど変化がないので。 初めて見た方… [続きを読む]
-
さくらサーバー常時SSLをラピッドSSLからJPRSへ変更しましたそもそもSSLとは？ ホームページのアドレスにhttpsの「s」が付いているのが「常時SSL」という暗号化されているサイトです。 httpに比べてセキュリティ安全度が高いと言われ、お問い合わせフォームなどで… [続きを読む]
-
WordPressをサーバーにインストールする（ロリポップ！）まずは、ロリポップ！の管理画面にログインします。 （1）サーバー申し込み時の「アカウント」を入力 （2）「ドメイン」を選択 （3）パスワードを入力 「ログイン」をクリック。 ロリポップ！の管理画面の左側、「… [続きを読む]
最新の投稿
2019年11月12日
2019年11月05日
2019年10月23日
2019年10月16日
2019年10月10日
カテゴリー
アーカイブ
