●画像を縦にふたつ並べる方法 |
【写真その一】

↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
【写真その二】

↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
ソース
【写真その一】
<img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg">
↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
【写真その二】
<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg">
↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
赤字の src="" のなかが、画像ファイルの URL (画像の保存場所のアドレス ... といえばいいのでしょうか)。
じぶんが表示させたい画像の URL を入力します。
goo BLOG の画像フォルダにアップした場合は、管理画面の [画像フォルダ] を開き、任意の画像をクリックすると、画像が別ウィンドウで表示されます。 その表示されたウィンドウのアドレスバーの URL をコピーして、src="" の引用符のなかに貼り付ければ、OK.
●画像を横にふたつ並べる方法 |

← は、某公園にて。 董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。

→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
ソース
<img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg" align="left">【写真その一】
← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
<br style="clear: both;">
<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right">【写真その二】
→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
画像をテキストの左側に表示させたい場合、赤字のように align="left" を指定。 画像をテキストの右側に表示させたい場合、align="right" を。
* tom-chan さんの blog 『なせば成る』 - 「写真をうまくレイアウトしてみよう!」 のコメント欄を拝見し、<br clear="all"> とした場合、goo ブログ仕様により、clear 要素が無効となってしまうということがわかったので、変更しました。
●テキストの回りこみ解除指定なし |

← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。

→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
ソース
<img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg" align="left">【写真その一】
← は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right">【写真その二】
→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
<br style="clear: both;"> の指定をしない場合、画像の底辺まで、テキストが回り込まれます。
●画像のサイズ (高さ・幅) |
なお、画像の高さ (height)、幅 (width) などを指定したほうが、読み込みが早くなります。
(容量や、高さ・幅が大きい場合は、指定しておいたほうがヨイ)
高さ・幅を指定することで、表示時のサイズを変えることができます。
(下の例、もとは、120 × 120 ピクセル)

→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
ソース
<img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg" align="right" height="80" width="80">【写真その二】
→ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
●div 要素 (タグ) との組み合わせ |
【写真その一】

↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
【写真その二】

→↑ は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
ソース
【写真その一】
<div align="center"><img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg"></div>
(<center><img src="https://blogimg.goo.ne.jp/user_image/3f/03/ef2c999378580f5a5e57b4d9bf7ff134.jpg"></center> でも可)
↑ は、某公園にて。 骨董市かなんかやっていた。 骨董ちょっと見たかった。 でも見なかった。 山羊もいた。 山羊ってかわいいよね。 山羊ってほんとうに紙を食べるのかな。 中原中也の 『山羊の唄』 にからめてみようというわけではない。
【写真その二】
<div align="right"><img src="https://blogimg.goo.ne.jp/user_image/04/37/19e7a64064e7b4313ed71bc1e58c3fdf.jpg"></div>
→↑は、先日お散歩中に。 あああいい天気だったなあ。 川沿いを歩いたんだけど、川に鯉がいて、かわいかった。 二匹いた。 夫婦かな。 うらやましい。 ちょっとまえ、別の川で、つがいの鴨見たことがある。 夫婦で仲睦まじく泳いでいるのだけど、そこへ、一匹だけの鴨が、つつつとやってきて、夫婦にちょっかいを出しはじめた。 いっしゅん、その新参者について行きそうになる 鴨子。 しかし、鴨男がそれを、だまって見過ごすはずがなく、サシで勝負することになった。 結局は、なんだかぐちゃぐちゃになってわけがわからず、pwふぁjf;あj;あふぁ。 川を見ていると、いろいろおもしろい。
その他、表組み (テーブル) を利用すると、さらに柔軟なレイアウトが可能です。
詳しい解説がなされている web ページや、拙筆の 「タグで遊ぼう - テーブル編 2」 を参照いただければ、さいわいです。
関連リンク:
・「初めてのホームページ講座 - 逆引きHTMLリファレンス - イメージ」
・「初めてのホームページ講座 - 逆引きHTMLリファレンス - テーブル」