ちょっと長くなりますが我慢してくださいね。ｆ＾＾；
ブログを表示するブラウザにはインターネットエクスプローラを使用します。ちなみに実際に使用しているバージョンは「８」ですが、特に８である必要はありません。
では、実際にフリースペースに次に示した「すーちゃんのどら焼き」を表示してみましょう。画像はすでにブログに表示している、または画像フォルダにアップされているものとします。
１．フリースペースへの表示に使用する画像
画像上でマウスの右ボタンをクリックし、表示されるメニューの一番下にある「プロパティ(R)」をクリックします。
２．画像上でマウスを右ボタンクリック
すると３．のようなプロパティ画面が表示されます。
そこで、画面中央付近に表示されている画像のアドレス(URL)をドラグします。ドラグは、「http～」の先頭でマウスの左ボタンをクリックし、クリックしたまま末尾の「～.jpg」まで動かします。
画像によっては ～.jpg ではなく .png などの場合もあります。
ドラグした部分が３．のように反転していますね。ここでマウスの左ボタンから指を離しても反転したままです。
ただし、画面上のどこかをクリックしてしまうと元に戻ってしまいますので注意してくださいね。
ここで反転した文字列上で今度はマウスの右ボタンをクリックします。表示されたメニューの「コピー」をクリックします。これで画像のアドレスが入手できました。実際にはクリップボードと呼ばれる領域にURLが保存されています。
３．画像の保存されているURLを入手
では、画像のアドレス(URL)にアクセスし、画像が表示されることを確認しておきましょう。
インターネットエクスプローラの一番上の段 (この領域を変更していなければ一番上にあります) に先ほど３．でコピーしたアドレスを貼りつけます。入力欄の上にマウスカーソルを移動し、右ボタンをクリックします。表示されたメニューの「貼り付け」をクリックします。
ここで間違って「コピー」をクリックしてしまうと、先ほどのアドレスが消え現在表示されているアドレスをクリップボードに取り込んでしまいます。その場合はあらためて画像のプロパティからアドレスをコピーしてください。
アドレスを貼りつけたらエンターキーを押すか、またはその右にある「→」の矢印ボタンを押します。画像へのアクセスに成功すれば、４．のようにどら焼きの画像が表示されます。このとき表示される画像の大きさは、何ら拡大縮小をおこなわない画像本来のものとなります。
４．コピーした画像のURLにアクセス
最後にフリースペースに画像を表示するためのHTMLを記述しましょう。
次に示したHTMLは実際に現在わたしのブログに記述している内容です。このページ内の右側をみれば一目瞭然です。＾＾
すーちゃんどら焼き
<center><img src="http://stat.ameba.jp/user_images/20120920/16/mr-mak/f1/67/j/t02200165_0640048012197327955.jpg" width="90%" alt="スーちゃんどら焼き" /></center>
<center>～</center>で囲ってる部分は表示画像をセンタリングしています。<img src=”・・・” ～>で画像を表示しています。
３．で入手したアドレスを src="・・・" の""で挟まれた・・・部分に書き込みます。
なお、<img srv=" ～>だけでもかまわないのですが、widthで表示サイズを表示領域の９０％に指定し、altで画像部分にマウスをのせた時に表示する文字列を指定しています。画像が表示されなかった時でもこの文字列は表示されます。
５．画想を表示するHTMLを記述
HTMLを記述し終えたら保存する前にまず「プレビュー」してみましょう。
HTMLの記述が間違っていても表示されないだけかもしれませんが、トラブルを避けるためにも事前に表示イメージを確認しておきましょう。
期待したとおりにブログが表示されたら「保存」しましょう。
６．実際にブログを表示
さて、ちゃんと期待したとおりに画像は表示されたでしょうか。
あとはHTMLで様々なデコレーションや配置など工夫できます。
HTMLを勉強しないといけないですが、がんばりましょう。
画像上でマウスの右ボタンをクリックし、表示されるメニューの一番下にある「プロパティ(R)」をクリックします。
２．画像上でマウスを右ボタンクリック
すると３．のようなプロパティ画面が表示されます。
そこで、画面中央付近に表示されている画像のアドレス(URL)をドラグします。ドラグは、「http～」の先頭でマウスの左ボタンをクリックし、クリックしたまま末尾の「～.jpg」まで動かします。
画像によっては ～.jpg ではなく .png などの場合もあります。
ドラグした部分が３．のように反転していますね。ここでマウスの左ボタンから指を離しても反転したままです。
ただし、画面上のどこかをクリックしてしまうと元に戻ってしまいますので注意してくださいね。
ここで反転した文字列上で今度はマウスの右ボタンをクリックします。表示されたメニューの「コピー」をクリックします。これで画像のアドレスが入手できました。実際にはクリップボードと呼ばれる領域にURLが保存されています。
３．画像の保存されているURLを入手
では、画像のアドレス(URL)にアクセスし、画像が表示されることを確認しておきましょう。
インターネットエクスプローラの一番上の段 (この領域を変更していなければ一番上にあります) に先ほど３．でコピーしたアドレスを貼りつけます。入力欄の上にマウスカーソルを移動し、右ボタンをクリックします。表示されたメニューの「貼り付け」をクリックします。
ここで間違って「コピー」をクリックしてしまうと、先ほどのアドレスが消え現在表示されているアドレスをクリップボードに取り込んでしまいます。その場合はあらためて画像のプロパティからアドレスをコピーしてください。
アドレスを貼りつけたらエンターキーを押すか、またはその右にある「→」の矢印ボタンを押します。画像へのアクセスに成功すれば、４．のようにどら焼きの画像が表示されます。このとき表示される画像の大きさは、何ら拡大縮小をおこなわない画像本来のものとなります。
４．コピーした画像のURLにアクセス
最後にフリースペースに画像を表示するためのHTMLを記述しましょう。
次に示したHTMLは実際に現在わたしのブログに記述している内容です。このページ内の右側をみれば一目瞭然です。＾＾
すーちゃんどら焼き
<center><img src="http://stat.ameba.jp/user_images/20120920/16/mr-mak/f1/67/j/t02200165_0640048012197327955.jpg" width="90%" alt="スーちゃんどら焼き" /></center>
<center>～</center>で囲ってる部分は表示画像をセンタリングしています。<img src=”・・・” ～>で画像を表示しています。
３．で入手したアドレスを src="・・・" の""で挟まれた・・・部分に書き込みます。
なお、<img srv=" ～>だけでもかまわないのですが、widthで表示サイズを表示領域の９０％に指定し、altで画像部分にマウスをのせた時に表示する文字列を指定しています。画像が表示されなかった時でもこの文字列は表示されます。
５．画想を表示するHTMLを記述
HTMLを記述し終えたら保存する前にまず「プレビュー」してみましょう。
HTMLの記述が間違っていても表示されないだけかもしれませんが、トラブルを避けるためにも事前に表示イメージを確認しておきましょう。
期待したとおりにブログが表示されたら「保存」しましょう。
６．実際にブログを表示
さて、ちゃんと期待したとおりに画像は表示されたでしょうか。
あとはHTMLで様々なデコレーションや配置など工夫できます。
HTMLを勉強しないといけないですが、がんばりましょう。
