インスタの写真を小さくして横に並べるには

走り納め。 #helenscycles #panaracer #stansnotubes #cyclocross #cxjp #cyclingphoto
instagramの写真と動画の埋め込みが可能になったのは以前にお伝えした通りですが、埋め込みのコードはちょっとずつ仕様が変わっていて最近では写真の大きさが658pxの固定になっています。Girls on Bike #2でも紹介した通り、ちょっと工夫してあげれば、写真を沢山貼ることができます。

instagram1

コード内にある最大幅がデフォルトでは658pxになっていますが、これを任意の値に変えてあげることで、画像の大きさが調整できます。

instagram2

半分の329pxにしてみました。そうすると

@osamuitocomが投稿した写真

これが、

 

@osamuitocomが投稿した写真

こうなります。で、これをさらに横に並べるにはもうひと工夫必要です。埋め込みコードを単純に改行無しに貼付けただけでは、うまくいきません。おそらく一番簡単なのは、表をつくります。

表を入れるには頭に <table> 最後に </table> をつけます。
行ごとに <tr> と </tr> を入れて、
セルごとに <td> と </td> を入れる仕組みです。つまり、

<table> (表の始まり)
<tr> (一行目の始まり)
<td> (ひとつ目のデータの始まり)
ひとつめの埋め込みコード
</td> (ひとつ目のデータの終わり)
<td> (ふたつ目のデータの始まり)
ふたつめの埋め込みコード
</td> (ふたつ目のデータの終わり)
</tr> (一行目の終わり)
<tr> (二行目の始まり)
<td> (みっつ目のデータの始まり)
みっつめの埋め込みコード
</td> (みっつ目のデータの終わり)
<td> (よっつ目のデータの始まり)
よっつめの埋め込みコード
</td> (よっつ目のデータの終わり)
</tr> (二行目の終わり)
</table> (表の終わり)

みたいになります。

これを使って埋め込みコードをいれていくと、

@osamuitocomが投稿した写真

@osamuitocomが投稿した写真

@osamuitocomが投稿した写真

@osamuitocomが投稿した写真

こうなります。2行目の背景がグレーになるのは、表を入れたときデフォルトでなるようです。どこかいじれば変えられそうですが、いまのところわかってません。

今回はインスタでやってみましたが、もちろん他の埋め込みコードを貼る際にも使えます。

関連日記:
Instagram、写真と動画のWebページへの組み込みが可能に

コメントを残す

メールアドレスが公開されることはありません。