画像ブロックで左右寄せの動作が編集画面と閲覧画面でうまく機能しないときのチェックと対処方法(メモ)

公開日:2022(令和4)年6月29日/最終更新日:

,
WordPress Trouble Shooting and Repair | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



恐らく一般に配布や販売されているテーマではこの問題は起きないとは思いますが、修正方法をメモしておきます。

自作サイトで運営しているWordPressサイトでは同じことが起きてるかも知れませんので確認と修正を!!

WordPressの画像ブロックの仕様

WordPressのブロックエディタにおける画像ブロックは、配置オプションとして「幅広」「全幅」「左寄せ」「中央揃え」「右寄せ」あるいは「なし」が選択できるようになっています。

そして、「左寄せ」「右寄せ」選択時で、本文幅よりも狭い幅の画像だったり、設定で小さいサイズを指定した場合にはそのあとのブロックが画像の右(左)へ回り込んで表示されるようになっています。

こんな時は以下のような記述がテーマのCSSにあるかの確認をし、なければ追加することで解消できます。

画像ブロックの左右中央揃えが効かないときの対策

閲覧画面・編集画面のCSS

テーマのstyle.cssで以下のコードを確認し、なければ追加します

.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

.alignright:after , .alignleft:after{
	clear:both;
}

最後のafter要素は、通常float使った際には入れる(ちなみにdisplay:flexでもafterで解除したほうがよい)のが作法ですが、特に必要ないかも知れません..。

フロントエンド側(閲覧画面側)では、テーマによってパディングやマージンの調整が必要となる場合があります。

ブロックエディタで幅を超える(はみ出てしまう)ときは

画像ブロックは外側に枠(wrap)があるわけではないので、先ほどのコードのfloatでは、画面に表示できる要素の左(または右)に画像を表示させることになり、テーマの仕様によってはエディタの幅からあふれてしまうことがあります。

あふれてしまうかどうかは、ブロックエディタで左右のサイドバーを非表示にしてみると確認できます

まあ、ブロックエディタでいくらプレビューしなくてもコンテンツが作れるとはいえ、実際の画面と完全一致させるのは難しいことではあるものの、実際に画像の回り込みの時だけ横幅が大きくなるのはよくないですから、以下のコードを有効化しているテーマのfunctions.phpへ追加して幅を指定しましょう。

※この措置は閲覧画面側には影響しません

function ha_editor_width_init(){
echo'<style>
.block-editor-block-list__layout {
    max-width: サイトの本文幅;
    margin: 0 auto;
}
</style>';
}
add_action('admin_head','ha_editor_width_init');

コード中の「サイトの本文幅」の部分はご自身のサイトの幅を指定してください

なお、お使いのテーマに管理画面用のスタイル(admin-style.cssなど)がある場合には、上記コードの中のスタイルコード部分だけ(以下)を追記してもOKです。

.block-editor-block-list__layout {
    max-width: サイトの本文幅;
    margin: 0 auto;
}

回り込みを解除したいときは

先に紹介したstyle.cssへ追加するデザインコードでは、画像ブロックで本文幅よりも狭い画像を挿入して左(右)揃えにした場合、画像ブロックの後ろにあるブロックが画像の左(右)へ回り込むようになっています。

これを、画像を左右中央に寄せるだけで、回り込ませたくない(空いた部分は余白にしたい)ときは、以下のコードへ変更します。

.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
	margin-left: auto;
}

あとがき

テーマによっては以下のような追加措置が必要となることがあります。

  • 管理画面側(エディタ側)のスタイルが効かない場合は「editor-style」へスタイルコードを書いて調整
  • 他のスタイルコードによって、エディタ幅の指定が効かない
  • 別の箇所に書かれているスタイルコードによって上書きされ、上記のコードが効かない

これはブロックエディタのスタイルに対する適用方法が多岐にわたることに起因しているためで、うまくいく方法をご自身で模索していただくほか現状では対応方法がないのが実情です。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
プラグインなしで、ユーザー(著者)ページのスラグを変更する方法