ここから本文です

WordPress、画像を横並びにしたいです。 こんにちは。 現在WP上で書いている...

アバター

ID非公開さん

2018/1/914:14:19

WordPress、画像を横並びにしたいです。

こんにちは。

現在WP上で書いている記事で、画像を2つ横並びにしています。

WPのメディアの追加からalignnoneで2つ並べても
何故か左寄せ縦に2枚並んでしまうため、
alignleftとalignrightにmarginをつけて調整しました。(PC)

《具体的なコード》
<img src="" alt="" width="" height="" class="alignleft size-full wp-image-xxx" /style="margin:10px 10px 10px 50px;">
<img src="" alt="" width="" height="" class="alignright size-full wp-image-xxx" /style="margin:10px 50px 10px 10px;">


ですが、これだとSP時にもleftとrightが適用され、ずれてしまいます。

そこで、
①SP時に中央揃えにできるコード
あるいは
②PCの時点で綺麗に2枚横に並べられる方法
をご教示いただきたいです。

当方コーディングの経験がない者で、
ネットで調べましたが、なかなかわかりませんでした。
過去2年間WPで記事を執筆していたことがあり、
多少のhtmlやcssの知識がある程度です。

どうぞよろしくお願いいたします。

閲覧数:
400
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2018/1/916:14:55

画像は、
インライン配置の要素なんで、放っておいても横並びになる。
ただ、
インライン配置であるから、親の横幅をこえると改行される。
<div> などブロック要素で囲んで、
「white-space:nowrap」を指定すれば改行されない。
センタリングは親ブロックの「text-align:center」で。

━━━━━━━━━━━━━━━━
<div style="
white-space: nowrap;
text-align: center;
">
<img src="" alt=""><img src="" alt="">
</div>
━━━━━━━━━━━━━━━━

<img> のコードが長い場合など、
ソースコード上で <img> と <img> の間を改行すると
半角スペースが入ってしまう。
<img> と <img> の間は改行しないようにするとスペースが入らない。

━━━━━━━━━━━━━━━━
<div style="white-space: nowrap">
<img src="" alt=""
><img src="" alt=""
>
</div>
━━━━━━━━━━━━━━━━

この回答は投票によってベストアンサーに選ばれました!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる