PCソフトウェア＞bloggerで画像を並べて表示

bloggerでやりにくいのが、画像のaタグに必ず　style="display: block; padding: 1em 0; text-align: center;"が入ってきて、自由が効かなくなる点だ。また、これが入っているとスマホの表示エリアから少しはみ出てちょっと気になる。

まず、エディッタをHTMLビューに切り替える。いろいろ調べてみたが、やり方として3通りほどあるようだ。

(1)display:flex を使用する

画像の間隔を指定しなくても、適当にあけてくれる。間隔の事が無ければ(3)を使えばいいかなと思うが････。

①並べる画像のグループを、以下のdivタグのコードでくくる。

< div style="clear: both; display: flex; height: auto; justify-content: space-around;" >

　　～

< div >

②各画像個別に付いている divタグ　を削除する。

③aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。

④このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで指定する。

(2)表の　tableタグ　を使用する

画像の途中で改行しないが画面からはみだす事がある。説明を画像個別に入れたい時は、もう一列セルを入れそこに書き込む。ほとんど使われないと思うが、説明を入れたい時に便利だ。

①tableタグで表を作る

②tableタグの要素部分は以下のようにする

border="0" bordercolor="#000000" cellpadding="3" cellspacing="0"
style="border-collapse: collapse; width:100%; "

③tdタグ間に、必要な数だけセル(tr)を作る

④各セルに、divタグを除いた、aタグとimgタグの部分を入れる

⑤aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。しないと不自然に間隔があいて、全体が画面からはみ出る。

⑥このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで指定する。

(3)img要素をそのまま並べる

特に余計なCSSやHTMLを書かなくても良い。最もオーソドックスなやり方だと思う。

①各画像個別に付いている divタグ　を削除する。

②画像全体を divタグ　で囲む。画像をセンター表示したい時は、style="tetx-align:center;"　を入れる

③aタグのstyle要素(display: block; padding: 1em 0; text-align: center;)を削除する。ただ、画像間を空けたいときは、2枚目以降の　padding: 1em 0;　を残す。1枚目にいれてしまうとスマホで見た時に、余計なスペースが入り画面からはみ出してしまう。特に「display: block;」の部分が1枚で改行されてしまう原因となっている。。

④このままだと、スマホで表示した時に画像が歪んでしまうので、imgタグ中の height要素は削除しておく。画像の大きさは、widthで決める。

⑤説明を入れたいときは、spanタグで記載し、style要素を　(display:block; text-align: left;)　とする。spanタグの前後は br タグではさむ。

(4)おしゃれなボックスデザインのcssを応用する

画面が広い場合は画像ごとに改行しない、画面が狭い場合(スマホ)は改行する。写真単体毎に説明文が入れられ、改行しても説明文が泣き別れしない。画像のheightは削除、widthのみ残す。感覚的にはimgタグをそのまま並べたような感じになる。

--------CSSのコード------

.box29 {
    display: inline-block;
    text-align: left;
}

@media screen and (max-width: 300px) {
.box29{
     display: inline;
     text-align: left;
  }
}

.box29 .box-title {
     text-align: left;
}

.box29 p {
}

------HTMLのコード-------

<div class="box29">
  <div class="box-title">ここに写真の説明</div>
  <p>imgタグを書き込む</p>
</div>