WordPress スマホで表示した時に画像の回り込みを回避するには?

画像の回り込みとは?

画像に文字を回り込ませて表示することはよくあると思います。
こんな感じ。

これは、画像に文字を回り込ませたときの例です。

pcview Wordpress スマホで表示した時に画像の回り込みを回避するには?

 

スマホでの回り込み表示は?

スマホで表示した時にこんな風になってしまって困ることありませんか?

smartview Wordpress スマホで表示した時に画像の回り込みを回避するには?

 

解決策

俗に言うレスポンシブ対応というやつです。

下記をStyleSheetに追記するとこんな風になります。

successview Wordpress スマホで表示した時に画像の回り込みを回避するには?

 

css:

@media only screen and (max-width: 413px) {
img.alignright {
padding: 0 0 10px 0;
margin: 0 auto;
display: block;
}

img.alignleft {
padding: 0 0 10px 0;
margin: 0 auto;
display: block;
}
.alignright {
float: none;
}

.alignleft {
float: none;
}
}

 


仕事以外でも収入が欲しい方

まずは、こちらを読んでみてください。読むのはもちろんタダです。自分にあったものがきっと見つかるはず。



無在庫販売でお小遣い稼ぎしませんか?






初心者も多数使っているので安心して始められます。




2 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    モットーはスティーブ・ジョブズのStay hungry Stay Foolish. 野心を持って正しい方法を身につければ誰でも成功できることを証明していきます。 本職以外で収入を得たい方の手助けができればと思います。

    WordPress スマホで表示した時に画像の回り込みを回避するには?

    画像の回り込みとは?

    画像に文字を回り込ませて表示することはよくあると思います。
    こんな感じ。

    これは、画像に文字を回り込ませたときの例です。

    pcview Wordpress スマホで表示した時に画像の回り込みを回避するには?

     

    スマホでの回り込み表示は?

    スマホで表示した時にこんな風になってしまって困ることありませんか?

    smartview Wordpress スマホで表示した時に画像の回り込みを回避するには?

     

    解決策

    俗に言うレスポンシブ対応というやつです。

    下記をStyleSheetに追記するとこんな風になります。

    successview Wordpress スマホで表示した時に画像の回り込みを回避するには?

     

    css:

    @media only screen and (max-width: 413px) {
    img.alignright {
    padding: 0 0 10px 0;
    margin: 0 auto;
    display: block;
    }
    
    img.alignleft {
    padding: 0 0 10px 0;
    margin: 0 auto;
    display: block;
    }
    .alignright {
    float: none;
    }
    
    .alignleft {
    float: none;
    }
    }

     


    仕事以外でも収入が欲しい方

    まずは、こちらを読んでみてください。読むのはもちろんタダです。自分にあったものがきっと見つかるはず。



    無在庫販売でお小遣い稼ぎしませんか?






    初心者も多数使っているので安心して始められます。




    2 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    モットーはスティーブ・ジョブズのStay hungry Stay Foolish. 野心を持って正しい方法を身につければ誰でも成功できることを証明していきます。 本職以外で収入を得たい方の手助けができればと思います。