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

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

恐らく一般に配布や販売されているテーマではこの問題は起きないとは思いますが、このサイトで配布している【HABONE】では設定不足の大チョンボ..だったので、修正方法をメモしておきます。

配布しているかどうかに関わらず、自作サイトで運営しているWordPressサイトでは同じことが起きてるかも知れませんので確認と修正を!!

ページ上部へ戻る▲

WordPressの画像ブロックの仕様

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

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

もしも使っているテーマが【HABONE】と同じチョンボをしてしまっている場合には以下のような現象が発生します。

  • 「左寄せ」「右寄せ」を選択しても、編集画面・閲覧画面上とも寄らない(当然回り込みもしない)
  • 「中央寄せ」を選択すると、編集画面のみ中央揃えになり、閲覧画面には反映されない

こんな時は以下のような記述がテーマの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;
}

ページ上部へ戻る▲

あとがき

本ページの内容は、冒頭でも書いている通り、あくまでもこのサイトで配布している【HABONE】での対応例です(【HABONE】テーマではバージョン3.4で修正済です)ので、テーマによっては以下のような追加措置が必要となることがあります。

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

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

このページは役に立ちましたか?

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/08/11 01:26時点 | Amazon調べ)
著:Mana
¥2,200 (2022/08/11 01:26時点 | Amazon調べ)

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球