サポートバージョン Raindrops 1.348以降 WordPressは、画像の表示のために、左寄せや右寄せで表示するメディアの挿入、ギャラリーショートコードを使う2種類の表示方法があります。 メディアの挿入から、簡単にそれらをつかうことが出来、おそらく説明の必要もないと思います。 しかしこれらの機能は画像に特化されていて、また、標準ではレスポンシブに対応する事もありません。 このページでは、コンテンツの均等配置についてYoutubeを例にとりながら、どのようにすれば均等配置とレスポンシブ設定が可能なのかについて、説明をしていきたいと思います。 まず、Youtubeビデオを横方向に均等配置してみましょう。
<div class="youtube"> <div class="rd-medium"></div> <div class="rd-medium"> </div> <div class="rd-medium"> </div> </div>
YoutubeのURLがrd-mediumクラスを使って、囲まれていますが明示的に幅を設定、（heightは指定しないでください）する必要があります。
これを行わない場合は、Youtube動画の幅計算がうまくいかなくなり正常に表示できません。
詳細は 「CSS 幅指定クラス」を確認してください。
この投稿のカスタムCSSには、以下のようにスタイルを指定します。
.youtube,.caption-image{
display:flex;
}
@media screen and (max-width :800px){
.entry-content .youtube, .entry-content .caption-image{
display:block;
}
.rd-medium{
margin:auto;
}
}
.caption-imageというクラスが指定されていますが、これは次に、お見せする画像の均等割り付けのためのスタイルルールです。
この表示は、ギャラリーではなく前出の、カスタムCSSを使った表示例です。
ブラウザサイズを狭めていくと一列表示になるのが確認できると思います。
<div class="caption-image"> <a href="https://www.tenman.info/wp3/manualraindrops/images-representation-of-raindrops/dsc_0064" rel="attachment wp-att-1390"><img src="https://www.tenman.info/wp3/manualraindrops/files/DSC_0064-300x169.jpg" alt="狛犬" width="300" height="169" class="size-medium wp-image-1390" /></a> 狛犬 <a href="https://www.tenman.info/wp3/manualraindrops/images-representation-of-raindrops/dsc_0041" rel="attachment wp-att-1385"><img src="https://www.tenman.info/wp3/manualraindrops/files/DSC_0041-300x169.jpg" alt="善光寺" width="300" height="169" class="size-medium wp-image-1385" /></a> 善光寺 <a href="https://www.tenman.info/wp3/manualraindrops/images-representation-of-raindrops/dsc_0069" rel="attachment wp-att-1392"><img src="https://www.tenman.info/wp3/manualraindrops/files/DSC_0069-300x169.jpg" alt="zenkouji" width="300" height="169" class="size-medium wp-image-1392" /></a> zenkouji </div>
この場合は、幅が明示的に設定されているので、rd-mediumで囲む必要はありません。
（画像が左寄せなのは、画像のalignleftクラスによるものです。メディアの挿入で指定してください）
以上のように、display:flexとdisplay:blockの切り替えにより、均等割り付けとその解除が可能になります。
応用例
