2018/07/09 Bloggerカスタム

画像を横に並べて表示する【Blogger】

Bloggerでは、画像を横に並べたい時に上手く出来なくてイライラすることがありますよね。

どうしてもこんな感じに↓縦になります。

 これを簡単なコードで横並びにしてみましょう。

スポンサーリンク

横並びにするための手順

まず、記事作成画面を「HTML」モードにします。
画像を貼り付けたい場所に以下のコードをコピペしましょう。

横並びテーブルタグ

1 2 3 4 5 6 7 8 9 10

<table cellpadding="0" cellspacing="0"><tbody> <tr> <td> ここを全選択で画像を追加 </td> <td> ここを全選択で画像を追加 </td> </tr> </tbody></table>

「ここを全選択して画像を追加」というところをドラッグで全選択し、後は普段通り上の画像追加ボタンから画像を選択するだけです。

２つ画像を入れてみると、



こうなります。

サイズが違う？それは適時調整するしかないですね…

※HTML編集画面から画像を貼り付ける場合、Bloggerでは「レイアウトを選択してください」と出ますが、特に何も変更はしなくてOKです。

コードを改変して貼り方を変える

コード内の「cellpadding="0"」は、セルと画像の余白です。「cellpadding="10"」にすると、こんな感じです。

「cellspacing="0"」は、セル同士の間隔です。「cellspacing="10"」にすると以下のようになります。

隙間だけ変わったように見えるかもしれませんが、例えば上のコードに「borderタグ」を付けて枠線を表示したりする際、「cellpadding」の値を変更した時は真ん中にセルの境界線が表示されます。

さらに、コードのテーブルタグを増やすことで何個も並べられたりします。

色を変えないと見辛かったことに貼ってから気付きましたが、これのコードは以下のようになっています。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<table cellpadding="0" cellspacing="0"><tbody> <tr> <td> ここに１の画像 </td> <td> ここに２の画像 </td> </tr> <tr>  <td> ここに３の画像 </td> <td> ここに４の画像 </td> </tr> <tr>  <td> ここに５の画像 </td> <td> ここに６の画像 </td> </tr> </tbody></table>

テーブルタグを追加している箇所がお分かりになるでしょうか？
貼り方によって改変してお試し下さい。


この記事でご紹介したコードは、プゥ二郎さんの日記を参考にさせていただいています。
ありがとうございます。


　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事