instagramの写真と動画の埋め込みが可能になったのは以前にお伝えした通りですが、埋め込みのコードはちょっとずつ仕様が変わっていて最近では写真の大きさが658pxの固定になっています。Girls on Bike #2でも紹介した通り、ちょっと工夫してあげれば、写真を沢山貼ることができます。
コード内にある最大幅がデフォルトでは658pxになっていますが、これを任意の値に変えてあげることで、画像の大きさが調整できます。
半分の329pxにしてみました。そうすると
これが、
こうなります。で、これをさらに横に並べるにはもうひと工夫必要です。埋め込みコードを単純に改行無しに貼付けただけでは、うまくいきません。おそらく一番簡単なのは、表をつくります。
表を入れるには頭に <table> 最後に </table> をつけます。
行ごとに <tr> と </tr> を入れて、
セルごとに <td> と </td> を入れる仕組みです。つまり、
<table> (表の始まり)
<tr> (一行目の始まり)
<td> (ひとつ目のデータの始まり)
ひとつめの埋め込みコード
</td> (ひとつ目のデータの終わり)
<td> (ふたつ目のデータの始まり)
ふたつめの埋め込みコード
</td> (ふたつ目のデータの終わり)
</tr> (一行目の終わり)
<tr> (二行目の始まり)
<td> (みっつ目のデータの始まり)
みっつめの埋め込みコード
</td> (みっつ目のデータの終わり)
<td> (よっつ目のデータの始まり)
よっつめの埋め込みコード
</td> (よっつ目のデータの終わり)
</tr> (二行目の終わり)
</table> (表の終わり)
みたいになります。
これを使って埋め込みコードをいれていくと、
|
|
|
|
こうなります。2行目の背景がグレーになるのは、表を入れたときデフォルトでなるようです。どこかいじれば変えられそうですが、いまのところわかってません。
今回はインスタでやってみましたが、もちろん他の埋め込みコードを貼る際にも使えます。