レスポンシブテンプレートで画像を上手に横並びにする方法

投稿 2018年01月14日
2
レスポンシブ
CSSレスポンシブテンプレート2枚画像横並べ

弊ブログをPCから閲覧の場合マイクロソフトのIEでは正しく表示しておりません! 閲覧ブラウザは Chrome や Firefox をお勧め致します。

多くのブロガーさんは、その話題に沿う画像を記事中に貼ったりしてビジュアル的に表現しますよね。 筆者もそのうちの1人ですが ^^

それは、文字の羅列一辺倒よりも閲覧者さんを読み飽きさせない意味合いも含まれますし、スペースを埋めるための挿絵的要素として貼ったり、弊ブログ記事のように説明を要する場面にサンプル的に貼ったりしますよね。

ただ、FC2ブログの記事編集欄にある画像貼り付け機能を利用して、単純にペタペタと連続して貼り付けるだけですと、いろいろと思いも寄らない表示になってしまうことも多々あるんです、得に「 レスポンシブテンプレート+スマートフォンからの閲覧 」の条件の場合は。

それでは事例的に2枚の富士山画像を横並びに貼り付けてみましたが、 パソコンからですと綺麗に横並びに表示出来ておりますよね。(実寸横サイズ1000px画像を250px表示に設定してある画像です)

 

ところが、この部分を私のスマホ(iPhone X)から覗いてみると ↓ なんとこんな表示になっております(爆)

iPhoneX

あららら、なんだこりゃ?って感じで、不自然な2枚の画像の引っ付き具合になっちゃってるでしょ(爆)
これ、けっこう大勢の皆さんがやってしまっていて気がついてないブロガーさんが多いんです。
この記事をいまスマホから閲覧している方は、スマホを横倒ししてご覧戴くと意味が分かります(笑)

つまりは、2枚横並びにした画像幅の合計サイズよりもスマホ画面サイズの方が狭いことから、レスポンシブテンプレートの特性で、スマホ画面幅に収まりきれない右側画像が左側画像の下に回り込んできている為にこのような表示になっているんですね。

それはそれで良いんです(笑)けど、これじゃやっぱり表示的に見映えがよくないですよね? 今はもうブログ閲覧ってスマホからの方が多くなっている時代なんですから (^_^; アハハ…

レスポンシブテンプレートで2枚の横並べ画像をスマホから閲覧した時にこのような表示になってしまう原因は、実は画像の貼り付け方に原因があるんです。 それは ↓ このように貼り付けた場合なんです。

<img src="左の画像のURL"> <img src="右の画像のURL">

これ、単純な画像貼り付け方法なんですが、レスポンシブテンプレートではこういう不本意な表示になってしまうことが起こりえると言う事例です。

こうならない方法をCSSで設定することが出来るんですが、その方法は1つしかないのではなくて、いろいろな方法があるのがCSSの面白いところなんです(笑)
パソコンやスマホから視覚的に同じように見えていても、まったく違うCSSの書き方もあったりします(笑)

それではその方法でもう一度同じ画像を並べてみますね ^^
参考に、この2枚の画像の実寸は横サイズ1000pxですから、クリックするとドーンと拡大画像が見られます 。
注) 画像拡大表示にはjQueryプラグインのFancyBoxを利用しております。

今度は ↑ こちらをスマホ(iPhone X)から覗いてみます ^^

ほらほらぁ、見て下さい♪ 今度は下に回り込んでいても見映え良く画像が分離して表示されてるでしょ~(笑)
やっぱりこんなふうに表示された方が自然でしょ(笑)

レスポンシブテンプレートで2枚の画像を横並びさせる方法

■ 枠内をクリックで”全選択”されますからそれをコピーすると簡単です

HTML

<div id="two-pic">
    <div id="left-pic">
   ここに左の画像を貼る
    </div><div id="right-pic">
   ここに右の画像を貼る
    </div>
</div>

記事内の画像を貼る箇所に ↑ 上記全てをコピペしてから、それぞれの部分に画像を挿入します。

■ 下記のCSSをあなたのテンプレートの「スタイルシート編集」欄の一番下にコピペ追記します。

CSS

/* レスポンシブテンプレートでの画像の横並べとスマホで解除 */
div#two-pic {
    margin: auto;
    text-align: center;
    width: 100%;
}
div#left-pic {
    display: inline-block;
    padding: 10px;
}
div#right-pic {
    display: inline-block;
    padding: 10px;
}

これで記事内に2枚の画像を横並び表示する準備は整いましたが、画像挿入する時の注意点があります。

画像挿入時の注意点

  • 「左の画像・右の画像・真ん中のスペース」の合計の横サイズが、記事欄の幅を超えてはいけません。
    超えてしまうと、パソコンからの閲覧でも右画像が下に回り込みます。
  • 大判の画像でも「サムネイルで記事を書く」からの画像投稿して、記事内表示サイズ設定をすることが必要です。

これで目出度く(笑)レスポンシブでの2枚画像の横並べが完了です ^^


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ

[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

2 COMMENTS

There are no comments yet.

はんのすず  

いつもありがとうございます。

ぼっちん先生、こんにちわ!
今回の記事、まるで私のブログのために書いてくださったみたいです!! 
画像は、全角スペースをはさんで横に並べていました。スマホだと、くずれるのですね?
私の(iphone6)では、とくにずれた様子もなかったので何事もなくスルーしていました。
続きの記事も、楽しみにしています。

2018/01/15 (Mon) 11:38

ぼっちん  

To はんのすずさん

はんのすずさん、こんにちは~ ^^

今回の記事、まるで私のブログのために書いてくださったみたいです!! 
おやおや、はんのすずさんも(笑)心当たりがあるんですねぇ、この画像の貼り方 (^_^; アハハ…
でも、実際にそういうブロガーさんが多いんです ^^

画像は、全角スペースをはさんで横に並べていました。スマホだと、くずれるのですね?
私の(iphone6)では、とくにずれた様子もなかったので何事もなくスルーしていました。

要は横並びにした「2枚の画像の横サイズと全角スペース」の合計サイズが、はんのすずさんのiPhone6の画面のサイズを超えない小さいサイズ設定でしたら表示崩れしないで横に並んで見えていると言うことなんです ^^

続きの記事も、楽しみにしています。
きっとたぶん、へ~ なるほどぉ♪って思ってもらえると思いますよ(笑)
楽しみにしてて下さいね~♪

2018/01/15 (Mon) 14:20

LEAVE A REPLY