スキルアップを始める!

【WordPress】右寄せイメージをスマホ・画面解像度が小さなブラウザで横幅一杯に表示させる方法

WordPress(ワードプレス)
WordPress(ワードプレス)
この記事は約1分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

class=”alignright”

WordPressではイメージを右寄せにすると自動的に

class=”alignright”

というクラスがイメージタグに付きます。

例えば右寄せの小さいイメージ(横幅300pix)ですと、スマホで見ると文章が左側に配置され見辛いです。

パソコンで見た画面

スマホで見た画面

スマホでは横幅一杯に表示させたい。

スマホの場合は文章の回り込みを無くして横幅一杯に表示されるようにする方法です。

.alignright{
float:none;
width: 100%;
height: auto;
}

@media screen

@media screen and (min-width: 480px){
.alignright{
float:right;
width:inherit;
height:inherit;
}
}

@より上がスマホに適用され、下がパソコンやタブレットに適用されます!

ぜひ設定して頂くと、スマホでも見やすくなるかと思います。

スマホで見た場合の表示

20160917122800

これでスマホの場合は画像が画面の横幅に合わせられますので、スッキリ改行されました!

ご参考下さい(^o^)

URLをコピーしました!