エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

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

time 2016/09/17

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^)/

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー