Ads By Google
画像を3枚、たて並びにしたいのですが。
画像の並べ方で、苦労しております。一枚の画像をブログ内にアップロードはできるのですが、3枚の写真をブログ本文の左にたてに並べてみたいのです。今までの質問もすべて読んでみました。似たような質問も確かにあったのですが、私は3枚たてにならべて、その横に文章を書き入れたいと思っています。それぞれの写真の説明を入れる場合はPタグでかこむとよい、というのがありましたが、私は写真一枚一枚に対応する説明をいれるのではなくて、3枚たて並びの写真の右に普通の長い文章を書きたいのです。どなたか、お教えいただければ幸いです。
2006-03-22 14:51の質問
この質問は、30日間解決しなかったために自動的に質問が一旦閉じられました。
回答(2)
1.
2006-03-22 17:12:19
表示を崩さず綺麗に並べようと思うのなら、テーブルを組んでいく方法しか思いつかないですね。
次のテーブルタグを投稿する記事本文に入れて下さい。
<div align="left">
上から6行目の <td...> ~ </td> の間に文字を書き込んでいくと写真が左に並び、その写真の右側にテキストが並びます。
でもこのままだと、テーブルの中に組み込んだテキストに基本のスタイルが適用されませんので、新たにスタイルシートに次の指示を追加します。
td.setsumei{
font-size:12px
}
setsumei の文字は、こちらで仮に作った文字です。
お好きなネーミングに変えてください。
この td.setsumei{} の中には、フォントサイズだけでなく、フォントカラーやパディングなど色々な指示を書き込めますが、あなたのブログに合わせて、適宜、必要な指示項目を考えて入れて下さい。
次のテーブルタグを投稿する記事本文に入れて下さい。
<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>上から6行目の <td...> ~ </td> の間に文字を書き込んでいくと写真が左に並び、その写真の右側にテキストが並びます。
でもこのままだと、テーブルの中に組み込んだテキストに基本のスタイルが適用されませんので、新たにスタイルシートに次の指示を追加します。
td.setsumei{
font-size:12px
}
setsumei の文字は、こちらで仮に作った文字です。
お好きなネーミングに変えてください。
この td.setsumei{} の中には、フォントサイズだけでなく、フォントカラーやパディングなど色々な指示を書き込めますが、あなたのブログに合わせて、適宜、必要な指示項目を考えて入れて下さい。
回答レベル : 回答
2.
2006-03-22 19:52:22
単純な方法ですけれど、JTrimなどのフリーの画像編集ソフトを使って、縦に3枚連結した画像を作ってアップすればいいですよ。
jpg画像のサイズの変更や、加工が簡単にできます。
編集のところから連結を選択して、縦、横どちらの方向か指定、画像間のスペースなどを設定できます。その画像をファイルのアップロードからアップしてみてください。
アップされた画像のコマンドは以下のようになりますが
<a href=" ~~ JPG" target="_blank"><img src=" ~~.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"なら上に配置されます。
参照として私が前にアップした画像のアドレスを記載しておきます。
jpg画像のサイズの変更や、加工が簡単にできます。
編集のところから連結を選択して、縦、横どちらの方向か指定、画像間のスペースなどを設定できます。その画像をファイルのアップロードからアップしてみてください。
アップされた画像のコマンドは以下のようになりますが
<a href=" ~~ JPG" target="_blank"><img src=" ~~.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"なら上に配置されます。
参照として私が前にアップした画像のアドレスを記載しておきます。
回答レベル : アドバイス
Ads By Google
コメント(2)
#1. AQ
2006-03-22 17:14:50
すみません。↑のfont-size:12pxの右横に ; が入ります。
font-size:12px; ← こうです。
#2. えりり
2006-03-23 00:38:20
AQさん、575さん、とてもていねいなご説明ありがとうございます。私にもできそうですので、さっそくやってみます。
トラックバック(3)
ブログの画像の下に説明文をつける方法
今朝(けさ)、中谷彰宏(なかたにあきひろ)さんの2008年の「今月の言葉」を縦(たて)に並べた記事を書いた。画像の下に「2008年4月」などという言葉を入れる方法が、最初はわからなか...
相生関係と両面太極八卦鏡 at 2009年10月19日 17:00:43
ブログの画像に説明文を入れる方法
今朝、中谷彰宏(なかたにあきひろ)さんの2009年の「今月の言葉」を縦に並べた記事を書いた。画像の下に「2008年4月」という言葉を入れる方法が、最初はわからなかった。うろうろしてい...
相生関係と両面太極八卦鏡 at 2009年10月18日 09:05:59





