神戸グルメゲリラ

神戸生活での日常雑記、神戸の風景や野良猫たちの写真、たま~にグルメブログ書いてます。

2つの画像を簡単に横並びで表示する方法です。(ieのdisplay: flexのバグを暫定回避してflexboxを積極利用する試み)

スポンサーリンク

はてなブログで画像を横並びで表示できないと諦めてる人いませんか?

簡単にできますよ!

 

※この方法の関連記事が少ないのは、ieのあるバグに理由があるようです。その現象については、最後に記述します。

 

記事コンテンツ幅内で自動的に縮小して、2つの画像を簡単に横並びにする方法です。

はてなブログの場合、例えば画像を2つ貼ってHTML編集画面に切り替えてみると

以下のHTMLコードになっていると思います。

<p>タグに囲まれた<img>タグが2行あります。

|HTML|>

<p><img class="hatena-fotolife" なんちゃら~かんちゃら~ /></p>
<p><img class="hatena-fotolife" なんちゃら~かんちゃら~ /></p>

<|HTML|

この2行を<div class="img-yokolist">タグで囲むだけで、できちゃいます。

まずダッシュボードのデザイン設定のデザインCSSに以下のCSSを追加しておきます。

|CSS|>

.img-yokolist {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.img-yokolist p {
padding-right: 5px;
width: 100%;
}

<|CSS|

ブログ記事の2つ画像のHTMLタグの2行を<div class="img-yokolist">タグで囲む

※HTML編集画面で行って下さいね

|HTML|>

<div class="img-yokolist">

<p><img class="hatena-fotolife" なんちゃら~かんちゃら~ /></p>
<p><img class="hatena-fotolife" なんちゃら~かんちゃら~ /></p>

</div>

<|HTML|

横へ並べたい<p>要素の行を挟み込むだけです。こんな感じで並びます。

f:id:tommyoctopas:20170831153007j:plain

f:id:tommyoctopas:20170831153020j:plain

3つでも4つでもフレキシブルに並びます。ただし画像が小さくなります。

例えば4つの場合、これを2セットの2段組みにした方がいいでしょうか

あと縦長の画像を2つ連続で表示するなら、横に2つ並べた方が間延びしなくて済むます。

 

画像並べるのに、imgタグ内に width=300pxとか設定して苦労されるケース見かけます。この数値を指定して行う方法は非常にNGな方法でして、自分のブラウザでは、うまく並んでも、他の人の環境では、実は並んでないケースと思われるブログをよく見かけます。さらに3つ4つとなると、さらに面倒です。

このdivタグとflexの方法が一番シンプルで確実に並びますので、ご活用下さい。

 

応用編

画像の真横に文章を添える事にも応用出来ます。

f:id:tommyoctopas:20170831153007j:plain

画像の横に文書を置きたい時にも応用できます。つまり2枚目の画像があった部分、この部分の<p>タグ内に文書を書いてあげればいいのです。さすれば、このように画像の横に文章を添えるとこが出来ます。結構めんどうなリッチな表現も実は簡単に出来ちゃうのだ!

 

スマフォでは、どうか

f:id:tommyoctopas:20170906044323j:plain

うまくいってるみたいです。

 

※ただし、スマフォ向けデザインでレスポンシブデザインを選択していない場合は、今回のCSSを<style>~</style>で囲って、スマフォ向けデザインの方にもセットする必要があります。セットする場所はこちらの記事をご覧下さい。

 

以上、「2つの画像を簡単に横並びで表示する方法」についてです。

flexboxを使うと簡単便利に出来るのですが、いざ使うとなると結構難しい記事が多いのが実情でして、もっと簡単に使ってみましょうという記事を書いてみました。

最後に、ieのバグ回避のお話しです。

 

display: flexのCSS、flexboxを積極的に利用したい

flexboxという便利機能があります。より少ないコードで、要素のサイズが不明でもダイナミックにフレキシブルにレイアウト対応してくれる機能です。

とても便利なので、ブログで積極利用したいですが、ieにバグあるのか、はてなブログで使用すると、ieの場合、うまく表示されないのです。

もったいないです。こんな便利機能あるのに!

 

今回、ieのバグを暫定回避しつつ積極利用する試みです。とりあえずIeでも、うまく表示できているようです。(※ie11でしか確認できていませんが)

どうしたらこの便利機能を積極利用できるか、ある挙動を発見しました。

css内にwidth: 100%を仕込んでいます。これをieに実行させると、flexboxが、ちゃんと作動する!?

では元から問題のない、ie以外ではどうか

結局は、flexboxでダイナミックな幅で並べられてしまうので、指定したwidthの値は無効となり、ちゃんと動作する!!

結局、100%は無視されるので、値はなんでもOKなんですが、chromeブラウザでも変な挙動が発生するようなので、さらにバグ回避の為、とりあえず100%にしてます。

暫定バグ対応で、この挙動を利用して、簡単にflexboxが使えるじゃんってなった訳です。

 

暫定バグ回避しないと、ieでは、こうなります

ieの場合、どうもこのflexboxは、幅の認識で問題を起こすようです。左フレームの記事コンテンツ幅が認識できていないのと、デバイス幅を遥かに飛び越えて認識してしまってる。

 

f:id:tommyoctopas:20170906100918j:plain

バグではなく「画面幅が狭くて収まりきらない場合の救済措置」が発動って事らしいのです。この救済措置が、はてなブログでは発生しちゃうみたいです。

このブログのデザインテーマに起因している可能性もあるので、他のテーマでも試してみました。同じ現象が発生します。

ブログシステム全般で、このie問題が発生しているか解りませんが、はてなブログでは今回のCSSで正常に表示されます。将来、ieのバグが修正され、知らぬ間に直っても、またいつ最新バージョンのieでバグ復活するか解らないですから、このCSSままでOKかと思われます。※あとmacでもOKなのか、検証を終えてませんが、webkit系のブラウザでは、OKみたいです。

 

※対策を施していない場合、ieではどんな感じになるのか、以下の記事をieで見てみて下さい。

 

では高さが違う画像で、3つではどうか

f:id:tommyoctopas:20170831153007j:plain

f:id:tommyoctopas:20170831153020j:plain

f:id:tommyoctopas:20170906044323j:plain

ieでもOKのようです。

 

あとこんなのも簡単に出来ちゃうのだ!

縦長の画像をブログで従来どうり縦方向に貼っていくと、画面が下方向へすっごく間延びしてしまいます。そんな時はこの方法もありでしょうか

f:id:tommyoctopas:20170717075307j:plain

f:id:tommyoctopas:20170717075315j:plain

f:id:tommyoctopas:20170717075327j:plain

f:id:tommyoctopas:20170717075251j:plain

f:id:tommyoctopas:20170717075338j:plain

f:id:tommyoctopas:20170717075348j:plain

それではまたね(^^)/