このブログは 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 」が追加されている。
の２点です。
コメント部は実質影響ないので、
「 has-media-on-the-right 」 で指示されていることになります。
<div>タグ内の説明
<div>タグとは
そもそも<div>タグはどのようなものか、
以下のページを参考に調べました。
<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”を適用したタグ内の左側の余白を０にします。
です。
ここで決めたクラスセレクタを緑の<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 」のほうが優先度が高いのかもしれません。
コメント