はじめまして。
あなたが建てたトピックに回答するのは初めてなので質問させていただきます。
この質問の解釈は下記で間違いないでしょうか？
- beauti_plus とは Beautiplus のこと
- デバイス幅がモバイルの範囲内でアイキャッチ画像を文章が回り込むのを解除したい
間違いない場合は下記 CSS コードで解決できると思います。
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-thumb {
width: 100%;
float: none;
}
}
DRILL LANCERさま。
いつもこちらのフォーラムで参考にさせていただいております。
お忙しい中、ご回答をいただきありがとうございます。
せっかく教えていただいたのですが、私の言葉が足らず誤解を招いてしまったようです。申し訳ございません。
お聞きしたかったのは、”文字を回り込みさせない”ということではなく、”余白をなくす”といった感じが近いです。
ブログに自分で撮った写真を投稿した際に、現状だと画像の両脇に余白ができてしまうのを、0に指定できないものかな？といったご相談でした。
marginないしは、padding等でやるのだと思うのですが、投稿した画像のimgごとに指定するのは難しいので、何か良いやり方があれば教えていただけないでしょうか？
どうぞ、よろしくお願いします。
記事エリアには margin で中央揃えになるように調整されています。
該当の画像は記事エリアの内側にあるので画像だけというのはかなり難しいです。
しかし、記事エリア全体の幅を変えるということであればできなくもないです。
ネガティブマージンを使用するのはどうでしょうか。
@media screen and (max-width: 767px) {
.wp-block-image {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
}
.wp-block-image img {
width: 100vw;
}
}
投稿ページのみ適用する場合は、
@media screen and (max-width: 767px) {
body.single-post .wp-block-image {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
}
body.single-post .wp-block-image img {
width: 100vw;
}
}
※ セレクタを適当に調整してください。
DRILL LANCERさま
真剣に考えていただき、ありがとうございました。
また質問の際にはお付き合いください。
よろしくお願いします。
ishitakaさま
いつもお忙しい中、お答えいただきありがとうございます。
教えていただいたコードを追加してみました。
投稿ページのみのコードを使わせてもらったのですが、上手く反映されませんでした。
上のコードも合わせて追加してみたところ、希望通りにはなったのですが、やはり固定ページにも反映されてしまいます。
やはり難しいのでしょうか？？
仮に、このまま適用させるとして、サムネイルには”効かせない”というような指定もできるものでしょうか？
よろしくお願いします。
投稿ページのみのコードを使わせてもらったのですが、上手く反映されませんでした。
投稿ページで間違いないでしょうか？投稿の一覧（アーカイブページ）ではないでしょうか。
アーカイブページと投稿ページの場合は、
@media screen and (max-width: 767px) {
body.single-post .wp-block-image,
body.archive .wp-block-image {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
}
body.single-post .wp-block-image img,
body.archive .wp-block-image img {
width: 100vw;
}
}
画像サイズで切り替える場合は、
大サイズのみ全幅表示する場合の例:
@media screen and (max-width: 767px) {
.wp-block-image.size-large {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
}
.wp-block-image.size-large img {
width: 100vw;
}
}
ishitakaさま
見ていた部分がアーカイブでした。。。早とちりでした、すみません。
おかげさまで、無事に実装できました！
希望通りで、いい感じです。
“ネガティブマージン”とても勉強になりました。
サムネイルに適用しない方法も教えていただき、ありがとうございました。
お二方とも1月のお忙しい時期にお付き合いいただき、本当にありがとうございました。
また、よろしくお願いします。
