紹介ページabout.htmlに画像を組込む

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 紹介ページに画像を組込む


速攻HTML

紹介ページの記事内に画像を組み込みます

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



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


小見出し1の記事画像 : pic1.gif を使用
小見出し2の記事画像 : pic2.gif を使用
小見出し3の記事画像 : pic3.gif を使用



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



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


 <h2>湖畔の工房について</h2>

 <p>河口湖観光社では、湖畔の中にある「体験の工房」を運営しています。体験の工房では、四季おりおりのイベントを開催したり、さまざまな商品の開発を行っています。</p>

 <h3>河口湖クラフトパーク</h3>

<img src="pic1.gif" alt="河口湖クラフトパーク"/>
<p>河口湖クラフトパークは、自然豊かな湖畔にあります。</p>
<p>クラフトパークはいろんな楽しい作品が作れる体験工房。どなたにも、かんたんに素敵なオリジナル作品が作れます。</p>
<p>ガラスは熱を加えると、美しい色を帯びて簡単に変形します。</p>
<p>どこにもあるジュースやお酒のボトル、コップなどはちょっと手を加えることで、世界にたった一つのガラスアートに生まれ変わります。</p>
<p>伸ばす、曲げる、ふくらます。ガラス工芸品の美しさをあなたの感性で存分に楽しんでください。</p>

 <h3>河口湖大石紬伝統工芸館</h3>

<img src="pic2.gif" alt="大石紬伝統工芸館"/>
<p>館内には大石紬の着物が展示され、機織り機が並んでいます。機織の実演も見学出来ます(要予約)。</p>
<p>また、選繭から座繰製糸、、染色などの工程をパネルとビデオで紹介しています。</p>
<p>大石紬の着尺や小物などを販売するコーナーもあります。</p>
<p>大石紬伝統工芸館では古から受け継いだ技術や繭を使った体験教室、自然素材の草木染めなどの体験教室を開催しております。</p>
<p>貴方だけのオリジナルアイテムを作ってみませ んか?</p>

 <h3>河口湖畔のまわりにある散策名所</h3>

<p>湖畔のまわりにはいろいろな名所があります。</p>
<img src="pic3.gif" alt="散策名所" />
<p>9世紀後半に起こった噴火をきっかけに、富士山の北麓に初めて建立された浅間神社。</p>
<p>標高800mでとれるサクランボは、寒暖の差が大きいので糖度が高く、鮮やかな色をしている河口湖サクランボ農園。高砂、紅秀峰など4種類のサクランボが食べ放題</p>
<p>河口湖美術館常設展のテーマは富士山。富士山を描いた日本画や、岡田紅陽の富士の写真を展示している。常設展のほか、年数回の企画展も開催。河口湖を望むティーラウンジも有ります。</p>



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




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





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


  個別ページ



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


画像
河口湖クラフトパークは、・・・・
と表示されてしまいます。


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


たとえば ”こんにちは”の文字の中で ”こ” だけ大きくして独立に段組すると

んにちは と表示されます。


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


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


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