livedoor ナレッジ

画像を３枚、たて並びにしたいのですが。

画像の並べ方で、苦労しております。一枚の画像をブログ内にアップロードはできるのですが、３枚の写真をブログ本文の左にたてに並べてみたいのです。今までの質問もすべて読んでみました。似たような質問も確かにあったのですが、私は３枚たてにならべて、その横に文章を書き入れたいと思っています。それぞれの写真の説明を入れる場合はＰタグでかこむとよい、というのがありましたが、私は写真一枚一枚に対応する説明をいれるのではなくて、３枚たて並びの写真の右に普通の長い文章を書きたいのです。
どなたか、お教えいただければ幸いです。

表示を崩さず綺麗に並べようと思うのなら、テーブルを組んでいく方法しか思いつかないですね。

次のテーブルタグを投稿する記事本文に入れて下さい。

<div align="left">

 <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; float: left" align="left">
   <tr>
     <td>
     <img hspace="0" src="画像 a のアドレス" align="left" border="0" width="画像 a の横幅" height="画像 a の縦幅"></td>
     <td rowspan="3" valign="top" class="setsumei">なんかの文字</td>
   </tr>
   <tr>
     <td>
     <img hspace="0" src="画像 b のアドレス" align="left" border="0" width="画像 b の横幅" height="画像 b の縦幅"></td>
   </tr>
   <tr>
     <td>
     <img hspace="0" src="画像 c のアドレス" align="left" border="0" width="画像 c の横幅" height="画像 c の縦幅"></td>
   </tr>
 </table>

</div>

上から６行目の <td...> ～ </td> の間に文字を書き込んでいくと写真が左に並び、その写真の右側にテキストが並びます。

でもこのままだと、テーブルの中に組み込んだテキストに基本のスタイルが適用されませんので、新たにスタイルシートに次の指示を追加します。

td.setsumei{
font-size:12px
}

setsumei の文字は、こちらで仮に作った文字です。
お好きなネーミングに変えてください。

この td.setsumei{} の中には、フォントサイズだけでなく、フォントカラーやパディングなど色々な指示を書き込めますが、あなたのブログに合わせて、適宜、必要な指示項目を考えて入れて下さい。

単純な方法ですけれど、JTrimなどのフリーの画像編集ソフトを使って、縦に３枚連結した画像を作ってアップすればいいですよ。
http://www.woodybells.com/jtrim.html

jpg画像のサイズの変更や、加工が簡単にできます。
編集のところから連結を選択して、縦、横どちらの方向か指定、画像間のスペースなどを設定できます。その画像をファイルのアップロードからアップしてみてください。

アップされた画像のコマンドは以下のようになりますが

<a href="http://image.blog.livedoor.jp/～～ JPG" target="_blank"><img src="http://image.blog.livedoor.jp/～～.JPG" width="160" height="160" border="0" alt="画像の名前" hspace="5" class="pict" align="left" /></a><br />

画像の反映が小さいと思ったら、width="160" height="160" border="0"の部分の数字をいろいろ変えて見るといいです。

ちなみに、このalign="left"を align="right"にすれば、画像は右側に　 align="top"なら上に配置されます。　

参照として私が前にアップした画像のアドレスを記載しておきます。
http://image.blog.livedoor.jp/honamikp61/imgs/9/b/...