WordPress / メディアを右に表示した時、テキストの左の余白を消す方法

WordPress

このブログは WordPress + Cocoon で作成しています。
“メディアとテキスト”のブロックをよく使うのですが、
メディア(画像)を右に表示した時に、
左側に来るテキストの先頭に少し余白ができてしまいます。

テキストの左側の余白をなくし、
左側を同じラインに揃える方法を紹介します。

メディアとテキストのブロック

メディアとテキストのブロックを使用すると
以下のような配置になります。
ここではメディアに画像を使用しています。

メディアを左に表示

次にメディアを右側に表示に変更します。
すると以下のようになります。
左側のテキストの先頭に余白ができています。
ココです

メディアを右に表示

コードはどうなっているか

それぞれのコードをコードエディターで見てみます。
コードエディターで表示されたコードに、改行を入れ、色分けしました。
また、一部省略したり、書き換えています。

コード内の色分けの説明は以下の通りです。
黒:コメント部分
緑:[メディアとテキスト] 全体の<div>タグ
青:[メディアとテキスト] 内部の<figure>と<div>タグ
赤:<figure>タグ内の画像と<div>内のテキスト部分

メディアを左側に表示 [■=]

<!– wp:media-text {“mediaId”:1234,”mediaType”:”image”,”mediaWidth”:24} –>

<div class=”wp-block-media-text alignwide is-stacked-on-mobile”
style=”grid-template-columns:24% auto”>

<figure class=”wp-block-media-text__media”>
<img src=”https://tobiinu.com/ … /test.png” alt=”” class=”wp-image-1234 size-full”/>
</figure>

<div class=”wp-block-media-text__content”>
<!– wp:paragraph {“placeholder”:”コンテンツ…”,”fontSize”:”large”} –>
<p class=”has-large-font-size”>メディアを左に表示</p>
<!– /wp:paragraph –>
</div>

</div>

<!– /wp:media-text –>

メディアを左側に表示がデフォルトになります。

メディアを右側に表示 [=■]

<!– wp:media-text {“mediaPosition”:”right”,”mediaId”:1234,”mediaType”:”image”,”mediaWidth”:24} –>

<div class=”wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile”
style=”grid-template-columns:24% auto”>

<figure class=”wp-block-media-text__media”>
<img src=”https://tobiinu.com/ … /test.png” alt=”” class=”wp-image-1234 size-full”/>
</figure>

<div class=”wp-block-media-text__content”>
<!– wp:paragraph {“placeholder”:”コンテンツ…”,”fontSize”:”large”} –>
<p class=”has-large-font-size”>メディアを右に表示</p>
<!– /wp:paragraph –>
</div>

</div>

<!– /wp:media-text –>

[メディアを左側に表示] と違うところは

・最初のコメント内に「 “mediaPosition”:”right” 」が追加されている。
・全体を括っている緑の<div>のclassに「 has-media-on-the-right 」が追加されている。

の2点です。
コメント部は実質影響ないので、
has-media-on-the-right 」 で指示されていることになります。

<div>タグ内の説明

<div>タグとは

そもそも<div>タグはどのようなものか、
以下のページを参考に調べました。

: コンテンツ区分要素 - HTML: HyperText Markup Language | MDN
HTML の コンテンツ区分要素 () は、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる (例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど) までは、コンテンツやレイアウトには影響を与えません。

<div>そのものでは左右の配置などは行っておらず、
“class”内で配置を決めているようです。
今回の場合は、 「 has-media-on-the-right 」 です。

classとは

“class”というのはすべてのHTML要素に共通のグローバル属性です。
<div>にも<p>にも<table>にも使うことができます。

CSSファイルに書かれた、クラスセレクタ( .クラス名 )のスタイルを
青の<figure>と<div>に適用させるため、
緑の<div>内の”class”の中に記述しています。

~略語の説明~
CSS = Cascading Style Sheets :カスケーディング スタイル シート
    ウェブページの見た目(スタイル)を設定するための言語。
PHP = PHP: Hypertext Preprocessor : ハイパーテキスト プリプロセッサー
PHPの元はPersonal Home Page らしい。
HTML内に記述できるプログラミング言語。

クラスセレクタ

CSSファイルに 「 .has-media-on-the-right 」 というクラスセレクタがあるはず。
と思ったのですが、そうではなくて、
探してみるどうも load-styles.php という所に記述されているようです。
そこに 「 padding:0 8% 」とあるので、これが余白がある理由かと思います。

左側の余白を消す方法

どうやって余白を消すかですが、
元の設定内容を書き換えるのはちょっと怖いので、
テーマエディターでCocoonの子テーマの
スタイルシート (style.css)に追記したいと思います。

padding:0 8% 」の左右の余白を指示している ” 8% ” の部分を ” 0 “にする
クラスセレクタが作れれば余白はなくなるはずです。

それがこちらになります

.article .left-space-zero :last-child {padding-left: 0;}

日本語に訳すと、

本文の中でclassに”left-space-zero”を適用したタグ内の左側の余白を0にします。

です。
ここで決めたクラスセレクタを緑の<div>のclassに追記します。

<!– wp:media-text {“mediaPosition”:”right”,”mediaId”:1234,”mediaType”:”image”,”mediaWidth”:24} –>

<div class=”wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile left-space-zero
style=”grid-template-columns:24% auto”>

<figure class=”wp-block-media-text__media”>
<img src=”https://tobiinu.com/ … /test.png” alt=”” class=”wp-image-1234 size-full”/>
</figure>

<div class=”wp-block-media-text__content”>
<!– wp:paragraph {“placeholder”:”コンテンツ…”,”fontSize”:”large”} –>
<p class=”has-large-font-size”>メディアを右に表示</p>
<!– /wp:paragraph –>
</div>

</div>

<!– /wp:media-text –>

その結果、以下のように追記した方は余白がなくなりました。

メディアを右に表示(余白なし)

メディアを右に表示(余白あり)

ちなみに、「 .article 」と「 :last-child 」がなくても実現できそうですが、
うまくいきませんでした。
.has-media-on-the-right 」のほうが優先度が高いのかもしれません。

コメント