サポート » 使い方全般 » 投稿ページの写真を横幅いっぱいに

  • 解決済 Chanchan.

    (@eureka20080321)


    いつも大変お世話になっております。

    テーマはbeauti_plusで子テーマを作成してカスタマイズしています。

    初歩的な質問ですみません。
    投稿ページで作成したブログ記事に追加した写真だけを、モバイルで表示させた時に画面ヨコ幅いっぱいにする方法を教えてください。

    よろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • DRILL LANCER

    (@rickaddison7634)

    はじめまして。
    あなたが建てたトピックに回答するのは初めてなので質問させていただきます。

    この質問の解釈は下記で間違いないでしょうか?

    • beauti_plus とは Beautiplus のこと
    • デバイス幅がモバイルの範囲内でアイキャッチ画像を文章が回り込むのを解除したい

    間違いない場合は下記 CSS コードで解決できると思います。

    @media screen and (min-width: 481px) and (max-width: 767px) {
    	.post-thumb {
    	    width: 100%;
    	    float: none;
    	}
    }
    • この返信は8ヶ月前にDRILL LANCERが編集しました。
    Chanchan.

    (@eureka20080321)

    DRILL LANCERさま。

    いつもこちらのフォーラムで参考にさせていただいております。
    お忙しい中、ご回答をいただきありがとうございます。

    せっかく教えていただいたのですが、私の言葉が足らず誤解を招いてしまったようです。申し訳ございません。

    お聞きしたかったのは、”文字を回り込みさせない”ということではなく、”余白をなくす”といった感じが近いです。
    ブログに自分で撮った写真を投稿した際に、現状だと画像の両脇に余白ができてしまうのを、0に指定できないものかな?といったご相談でした。

    marginないしは、padding等でやるのだと思うのですが、投稿した画像のimgごとに指定するのは難しいので、何か良いやり方があれば教えていただけないでしょうか?


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

    DRILL LANCER

    (@rickaddison7634)

    記事エリアには margin で中央揃えになるように調整されています。
    該当の画像は記事エリアの内側にあるので画像だけというのはかなり難しいです。
    しかし、記事エリア全体の幅を変えるということであればできなくもないです。

    • この返信は8ヶ月前にDRILL LANCERが編集しました。
    ishitaka

    (@ishitaka)

    ネガティブマージンを使用するのはどうでしょうか。

    @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;
    	}
    }

    ※ セレクタを適当に調整してください。

    Chanchan.

    (@eureka20080321)

    DRILL LANCERさま

    真剣に考えていただき、ありがとうございました。
    また質問の際にはお付き合いください。
    よろしくお願いします。

    ishitakaさま

    いつもお忙しい中、お答えいただきありがとうございます。
    教えていただいたコードを追加してみました。

    投稿ページのみのコードを使わせてもらったのですが、上手く反映されませんでした。
    上のコードも合わせて追加してみたところ、希望通りにはなったのですが、やはり固定ページにも反映されてしまいます。

    やはり難しいのでしょうか??

    仮に、このまま適用させるとして、サムネイルには”効かせない”というような指定もできるものでしょうか?


    よろしくお願いします。

    ishitaka

    (@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;
    	}
    }
    Chanchan.

    (@eureka20080321)

    ishitakaさま

    見ていた部分がアーカイブでした。。。早とちりでした、すみません。

    おかげさまで、無事に実装できました!
    希望通りで、いい感じです。

    “ネガティブマージン”とても勉強になりました。

    サムネイルに適用しない方法も教えていただき、ありがとうございました。

    お二方とも1月のお忙しい時期にお付き合いいただき、本当にありがとうございました。
    また、よろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「投稿ページの写真を横幅いっぱいに」には新たに返信することはできません。