Bloggerでは、画像を横に並べたい時に上手く出来なくてイライラすることがありますよね。
どうしてもこんな感じに↓縦になります。
横並びにするための手順
まず、記事作成画面を「HTML」モードにします。
画像を貼り付けたい場所に以下のコードをコピペしましょう。
<table cellpadding="0" cellspacing="0"><tbody> <tr> <td> ここを全選択で画像を追加 </td> <td> ここを全選択で画像を追加 </td> </tr> </tbody></table>
「ここを全選択して画像を追加」というところをドラッグで全選択し、後は普段通り上の画像追加ボタンから画像を選択するだけです。
2つ画像を入れてみると、
こうなります。
サイズが違う?それは適時調整するしかないですね…
※HTML編集画面から画像を貼り付ける場合、Bloggerでは「レイアウトを選択してください」と出ますが、特に何も変更はしなくてOKです。
コードを改変して貼り方を変える
コード内の「cellpadding="0"」は、セルと画像の余白です。「cellpadding="10"」にすると、こんな感じです。
「cellspacing="0"」は、セル同士の間隔です。「cellspacing="10"」にすると以下のようになります。
隙間だけ変わったように見えるかもしれませんが、例えば上のコードに「borderタグ」を付けて枠線を表示したりする際、「cellpadding」の値を変更した時は真ん中にセルの境界線が表示されます。
さらに、コードのテーブルタグを増やすことで何個も並べられたりします。
<table cellpadding="0" cellspacing="0"><tbody> <tr> <td> ここに1の画像 </td> <td> ここに2の画像 </td> </tr> <tr> <td> ここに3の画像 </td> <td> ここに4の画像 </td> </tr> <tr> <td> ここに5の画像 </td> <td> ここに6の画像 </td> </tr> </tbody></table>
テーブルタグを追加している箇所がお分かりになるでしょうか?
貼り方によって改変してお試し下さい。
この記事でご紹介したコードは、プゥ二郎さんの日記を参考にさせていただいています。
ありがとうございます。
|
|
これで困ってました!ありがとうございます(*´ω`*)
返信削除つらつらブログさん
返信削除利用させて頂きました。
ありがとうございます。