紹介ページの画像組み込み

　　この文字をクリックするとサンプルダウンロード出来ます。


紹介ページの記事を入力　←　｜　→　画像を廻り込ます


見出し毎に記事を入力しましたので、各記事に画像を入れて見やすくします。

小見出し１の記事画像　：　pic1.gif　を使用
小見出し２の記事画像　：　pic2.gif　を使用
小見出し３の記事画像　：　pic3.gif　を使用


●　各記事の先頭にimgタグで画像を指定します。

　ここより上のhtmlソースは割愛。


　<h3>高原の中にある工房</h3>

　<p><img　src="pic1.gif"　alt="画像１"/>
　牛乳の工房は、自然豊かな丘の林の中にあります。</p>
　<p>林の入口から細い小道を通り、八ヶ岳に向かって進んでください。しばらくすると、
　　　林に囲まれた広い草原に出てきます。</p>
　<p>その草原の奥にある木造の建物が「牛乳の工房」です。</p>
　<p>この工房はちょうど高原の中程に位置しており、野辺山高原を散歩したり、自然の中で
　　　遊んだりするときにも、ちょうどいい拠点になります。</p>
　<p>高原全体を見渡すことも可能で、夜は満点の星空を鑑賞できます。</p>

　<h3>高原の四季も楽しむことが出来ます</h3>

　<p><img　src="pic2.gif"　alt="画像２"/>
　牛乳の工房では、八ヶ岳の四季折々の自然を体感することができます。<br/>
　<br/>
　　　春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな希望に満ちた緑。<br/>
　<br/>
　　　夏には、緑濃く茂った木々の間から見える八ヶ岳、高原の涼風に吹かれての散策。<br/>
　<br/>
　　　秋には、高原全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、
　　　草が枯れる冬になると、ここは雪に覆われて一面の銀世界になります。</p>

　<h3>工房のまわりにある散策名所</h3>

　<p><img　src="pic3.gif"　alt="画像３"/>
　工房のまわりにはいろいろな名所があります。絶景赤岳、飯盛山、プラネタリウムを
　　　備えた資料館、高原レタス畑、電波望遠鏡を備えた天文台、日本一高い場所にある駅…。１日では
　　　足りず、数日滞在して名所巡りをするグループの方々もいらっしゃいます。ヒョットするとグループ
　　　同士仲良くなって一緒に散策している事もあるのかも知れません。</p>
　<p>高原ですので動物も沢山います、キツネ、タヌキ、イタチ、ウサギ、リス、シカ・・・。
　　　動物達に出会ったら決して驚かせずにそっと眺めて、餌も与えないで下さい。自然にあるがままの姿
　　　で暮らして欲しいからです。</p>

　ここより下のhtmlソースは割愛。

---

imgタグを使用して画像を組み込む作業は、前に行った通りに、ここで行います。

---

サンプルを表示した結果です。１番目の記事部分です。

　　

---

画像と文字が上手く整列していません。

画像牛乳の工房は、・・・・
と表示されてしまいます。

これはhtmlが、左から右、上から下へとコンテンツを段組する為です。

たとえば　”こんにちは”の文字の中で　”こ”　だけ大きくすると
こんにちは　と表示されます。

”こ”の部分が画像であっても同じ事がおこります。

画像を文章の右側や左側に配置するには、小テクニックが必要になります。

次ページでは、廻り込ませる方法を解説します。