SSブログ

アクセスアップのためのブログで使えるHTML研究 【その1】 うまく写真を貼り付けるには? [HTML & CSS]

アクセスアップのための
ブログで使えるHTML研究 【その1】 
うまく写真を貼り付けるには?

まずサンプルとして11月3日に書いた次の記事を見てください。


秋の行楽といえば、やっぱり紅葉狩りですよね。
でしょう?

あたしは日本に行ったのはわずかに3度だけですけれど、紅葉の見事なのには本当に息を飲み込むほど圧倒されたことを今でも鮮やかに記憶しています。

紅葉は9月中旬ごろ北海道の高地から始まるそうですよね。

徐々に南下して、11月ごろ関東地方の紅葉も各所で見ごろを迎えるそうですよ。
桜前線とは逆向きになるわけですよね。

今年は平年より気温が高めだということです。
そういうわけで、見ごろの時期は例年より遅くなるそうです。

紅葉は、気温の低下と日光に関係するのですって。
気温が低くなると木は冬支度を始めます。
葉と枝の間の養分と水分の流れが少なくなり、光合成で作られる糖分は葉にたまります。

この糖分が赤い色素に変化する一方で、夏の間光合成を行っていた葉緑体の緑の色素は壊れていくのだそうです。
赤い色素が増えて緑の色素が減ってゆきます。
それで、葉が赤く色づくわけです。

ところで、昼間お天気がよく夜にぐっと冷え込むと、鮮やかに紅葉するといわれています。

美しく色づくには適度の水分の必要です。
この水分が欠乏すると、色づく前に枯れてしまうのです。

そういうわけで、紅葉の名所といわれる場所に渓谷が多いのは、日当たりと水分、そして夜間の冷え込みを兼ね備えた場所だからなのですね。

これから見ごろとなる関東の紅葉スポットをいくつか紹介しますね。

群馬県の妙義山、
栃木県の日光東照宮周辺、
茨城県の袋田の滝。
いずれも見ごろ予想は11月上旬~中旬。

埼玉県の長瀞は11月中旬~下旬、
千葉県の養老渓谷は11月中旬~12月上旬が見ごろと予想されています。

大自然の中の圧倒されるような紅葉は素晴らしいですが、
神奈川県の鶴岡八幡宮や東京の神宮外苑のイチョウも風情がありますよ。
どちらも見ごろは11月中旬~12月中旬ということです。
イチョウやブナなどは緑の色素が減少して
もとからあった黄色の色素だけが残ることで黄色く色づくのだそうですよ。

では、あなたもぜひ紅葉狩りを楽しんでくださいね。
ええっ?安くて快適なホテルや旅館を知っていたら紹介して欲しいのですか?
あなたもネットで調べたらいかがですか?

きっとお忙しいのでしょうね。
たまたま、あたしが調べたばかりですから、ここにご紹介します。

【 関東地区 】 

 ◆ホテル塩原ガーデン (栃木県 塩原温泉郷)
  ◎紅葉と塩原温泉、秋の味覚を満喫する[激安]プランも大好評!
  1泊朝食付 通常 9975円~ → 会員 4987円~
  最大50%OFF!
 
 ◆山のホテル ASANO (群馬県 嬬恋)
  ◎草津白根山は紅葉の見頃です!地元産食材たっぷりの料理もどうぞ!
  1泊食事なし 通常 5000円~ → 会員 2500円~
  最大50%OFF!
 
 ◆ホテルニュー川治 (栃木県 川治温泉)
  ◎龍王峡の紅葉は鬼怒川の渓谷美と相まって、その美しさは格別です!
  1泊2食付 通常 10500円~ → 会員 6930円~
  最大34%OFF!
 
 ◆風花の宿 寶ホテル (群馬県 水上)
  ◎奥利根の坤六峠~奈良俣ダムへと日ごとに南下していく紅葉前線を満喫
  1泊食事なし 通常 8201円~ → 会員 4389円~
  最大46%OFF!
 
 ◆湯の家 (栃木県 奥日光湯元温泉)
  ◎奥日光は今が見頃!湯の湖畔を散策しながら紅葉狩りを楽しめます!
  1泊2食付 通常 8400円~ → 会員 4872円~
  最大42%OFF!


ええっ?
どのようにしたら会員になれて
安く利用できるの?
そう、お聞きですか?
次のリンクを
クリックしてくださいね。
『あなたがお得な旅をできるように。。。』
じゃあ、あなたも
日本のすばらしい紅葉を
満喫してくださいね。
Have a good trip!



長くて申し訳ありませんでした。ここまでがサンプルです。

画像(あるいは写真やイラスト)のないウェブページというのは“クリープの入らないコーヒー”のようなものですよね。
何かが物足りない!
ネットがここまで爆発的に広まったのはGUI(graphical user interface)によるところが大きいですよね。
つまり、今あなたが見ているブラウザーのトップ・バーやボトム・バーにある小さな画像(アイコン)をクリックすることで、いろいろなプログラムを起動することができます。

今から15年程前にはGUIはまだ目新しかった。
どうしていたかというと黒い画面の一番下に点滅するカーソルが現れます。
そこに起動したいプログラム名をキーボードをたたいて書き込みます。
そしてEnterキーをたたいて初めてプログラムが動きます。

現れるプログラムも文字がほとんどでした。
画像らしきものといえば文字で書いた次のような落書き程度のものでした。

        ,,,--─===─ヽ/へ 
      /iiiiiiiiiiiiii彡≡≡≡|≡ヾ ヽ 
     iiiiiiiiiiiiiiiiiii彡≡≡≡≡|≡ミミヾ丶 
    iiiiiiiiiiiiiiiiiiii/ ̄ ̄ ̄ ̄ ̄ ̄\ミiiiiiヽ 
   iiiiiiiiiiiiiiiiii/             \iiiiiiiゞ 
   iiiiiiiiiiii/                \iiヽ 
  iiiiiiiiiiiiiii《    ━━━'/  ヽ━━━ ヽミヽ 
 ...iiiiiiiiii彡/      __,.::  :: __  ヽiiiii| 
 ..iiiiiiiiiiiii》|             :::      |iiiii| 
 iiiiiiiiiiiiiiii|,                     |iii| 
..iiiiiiiiiiiiiiiiii,         ( ● ● )      .|iiii| 
iiiiiiiiiiiiiiiiiiiiiii       》━━━━《       |iiiii| 
iiiiiiiiiiiiiii《《《ヽ     》 / ̄ ̄\ 《     |iiiiiiii| 
iiiiiiiii《《《《《《《《    《《 \ ̄ ̄/ 》》   |iiiiiiiiiii| 
iiiiiiiiiiii《《《《《《《《《《《 》》   ̄ ̄  《《 》》》》》iiiii| 
iiiiiiiiii《《《《《《《《《《《《《《《《《《《《》》》》》》》》》》》》》》iii| 
iiiiiiiiiiiiiii巛巛巛巛巛巛巛巛巛》》》》》》》》》》》》》》IIII 
iiiiiiiiiiiiiiiiiiiiii巛巛巛巛巛巛巛巛》》》》》》》》》》》》iiiiiii 

現在では、上のサンプルに見るようなすばらしいシャロンさんの写真を載せることができます。
どうせ載せるなら、きれいにページに貼り付けたいですよね。
僕は上のシャロンさんのドレスが紅葉の写真に引っかかって隠れてしまっているのが気になりませんが、あなたは、もしかすると、重なっているのが気になるかもしれません。

ではどうしたらよいのか?
そのことを示すために上の長いページを書き出したというわけなのです。

では、重ならないようにして次に表示してみます。

秋の行楽といえば、やっぱり紅葉狩りですよね。
でしょう?

あたしは日本に行ったのはわずかに3度だけですけれど、紅葉の見事なのには本当に息を飲み込むほど圧倒されたことを今でも鮮やかに記憶しています。

紅葉は9月中旬ごろ北海道の高地から始まるそうですよね。

徐々に南下して、11月ごろ関東地方の紅葉も各所で見ごろを迎えるそうですよ。
桜前線とは逆向きになるわけですよね。

今年は平年より気温が高めだということです。
そういうわけで、見ごろの時期は例年より遅くなるそうです。

紅葉は、気温の低下と日光に関係するのですって。
気温が低くなると木は冬支度を始めます。
葉と枝の間の養分と水分の流れが少なくなり、光合成で作られる糖分は葉にたまります。

この糖分が赤い色素に変化する一方で、夏の間光合成を行っていた葉緑体の緑の色素は壊れていくのだそうです。
赤い色素が増えて緑の色素が減ってゆきます。
それで、葉が赤く色づくわけです。

ところで、昼間お天気がよく夜にぐっと冷え込むと、鮮やかに紅葉するといわれています。

美しく色づくには適度の水分の必要です。
この水分が欠乏すると、色づく前に枯れてしまうのです。


どのようにすたかというと次のように clear=right をブレイク(改行)・タグと一緒に使いました。

<br clear=right>
<img src="../images/redleaf5.jpg">

場合によってはページ・タグを使っても同様な効果があります。

<p clear=right>
<img src="../images/redleaf5.jpg">

この clear=right の意味は“画像の右側が他の文字や画像と重ならないようにしなさい(障害物を片付けなさい;きれいにしなさい)”という命令です。
この命令をブラウザーが受け取って、上のように重ならないように表示するわけです。

シャロンさんの写真が、左側にある場合には次のようにします。

<br clear=left>
<img src="../images/redleaf5.jpg">

この clear=left を取り外すと2番目のシャロンさんの写真と文章ブロックは次のようになってしまいます。

ええっ?
どのようにしたら会員になれて
安く利用できるの?
そう、お聞きですか?
次のリンクを
クリックしてくださいね。
『あなたがお得な旅をできるように。。。』
じゃあ、あなたも
日本のすばらしい紅葉を
満喫してくださいね。
Have a good trip!

<br clear=left> これが取り外されています。

長くて申し訳ありませんでした。ここまでがサンプルです。



片方だけじゃなく、もし両側が重ならないようにしたいのであれば次のように書きます。

<br clear=all>
<img src="../images/redleaf5.jpg">

あなたもぜひ試してみてください。

注意: “<” と “>” は実際に使う時にはすべて半角を使ってください!


ところでシャロンさんの写真が文字列(文字ブロック)の右側にはってありますよね。
このように写真を貼るにはどのようにしたら良いのか?

つまり、写真を“右回り込み”あるいは“左回り込み”に貼るのってどうするの?
それはこのシリーズの次の回 【その2】 でお伝えします。
楽しみにしていてください。


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。