２枚以上の画像を表示させるには・・・
引き続き、裏ワザ紹介の「イトウちゃん。の職卓」をお送りします。
２枚以上表示させている私のブログ記事「春気分」を例に
話を進めてゆきますね。
上の画像で、青丸で囲んでいるところが、
通常の画像指定ではないやり方で表示
させている画像です。
それでは、青丸で囲まれている画像が
どこにあるかというと、
私は、ふらっとアルバムに置いています。
それでは、ふらっとアルバムに置いたファイルを
どうやってブログに読み込むのか。
それは、「タグ」と呼ばれるものを使います。
前回のお話の中で少し出てきた、
[画像を挿入する]ボタンで現れる＜file2:left＞も
（ざっくり言うと、）タグです。
このタグは本来、＜＞の部分が半角です。
システムに対して、
半角の＜＞で囲まれた部分は、文章ではなく、
こういうふうに表示して、という指示ですよ、
と伝えるためのしくみです。
ですので、ここで説明するときに半角の＜＞を
使うと、画面に現れなくなってしまいますので、
全角の＜＞で説明します。
がっ！みなさんが実際に入力するときは、半角で
入力してくださいませ(^^ゞ
また＜＞以外も、タグは全て、半角英数字のみで
書きます。
さて、では、実際に使うタグは何かというと、
イメージタグと呼ばれるものです。
＜img src="○○○"＞
「img」と「src」の間は半角スペースがありますので、
続けてしまわないでください。
それから、「○○○」の部分は、表示させたい画像ファイルの
置いてあるURLを指定します。
ここで大事なのは、自分のPC内にある画像は
表示できないということです。
URL、つまり、公に見られる場所、インターネット上に
置いてあるファイルを指定することになります。
今回は、ふらっとアルバムにおいている画像を
読み込みますので、そのURLをまず確認しましょう。
まず、アルバムの画像を表示します。
今、ブラウザのアドレスバーに表示されているのは、
その写真が表示されているページのURLですので、
画像のURLではありません。
それではどうしたらいいのか。。。
ブラウザがInternetExplorerをお使いの方は、
画像の上でマウスを右クリックしてください。
すると、ショートカットメニューが表示されると
思いますので、その中から「プロパティ」をクリック
してください。
プロパティ画面が開きます。
プロパティ画面にURLが表示されていますので、
ドラッグしてコピーしてください。
（「ドラッグしてコピー」については、こちらのページをご覧ください。）
ブラウザがFirefoxの方は、ショートカットメニューの
中にある、「画像のURLをコピー」をクリックしてください。
これ以外のブラウザをお使いの方で、URLの
調べ方が分からないという方は、メールをくださいませ(^^ゞ
さて、URLがわかりましたので、先ほどのタグで説明した
「○○○」の部分を画像のURLにしてください。
URLは半角のダブルクォーテーションで囲まれている必要が
ありますので、閉じ忘れなどないように気をつけてください。
あとは、ブログを保存してみて、ちゃんと表示されるか、
確認してみてください。
そして、最後に大事なお願いがあります。
この方法を使うと、画像のURLさえ分かれば、
自分の写真でなくても表示させることが出来てしまいます。
著作権を守って、楽しみましょう(^^ゞ
説明がわかりにくかったり、間違っているんではないかという
ところがあったら、メールでお知らせいただけるとたすかります。
わたしも勉強になりますので、ご協力をお願いしますm(__)m
２枚以上表示させている私のブログ記事「春気分」を例に
話を進めてゆきますね。
上の画像で、青丸で囲んでいるところが、
通常の画像指定ではないやり方で表示
させている画像です。
それでは、青丸で囲まれている画像が
どこにあるかというと、
私は、ふらっとアルバムに置いています。
それでは、ふらっとアルバムに置いたファイルを
どうやってブログに読み込むのか。
それは、「タグ」と呼ばれるものを使います。
前回のお話の中で少し出てきた、
[画像を挿入する]ボタンで現れる＜file2:left＞も
（ざっくり言うと、）タグです。
このタグは本来、＜＞の部分が半角です。
システムに対して、
半角の＜＞で囲まれた部分は、文章ではなく、
こういうふうに表示して、という指示ですよ、
と伝えるためのしくみです。
ですので、ここで説明するときに半角の＜＞を
使うと、画面に現れなくなってしまいますので、
全角の＜＞で説明します。
がっ！みなさんが実際に入力するときは、半角で
入力してくださいませ(^^ゞ
また＜＞以外も、タグは全て、半角英数字のみで
書きます。
さて、では、実際に使うタグは何かというと、
イメージタグと呼ばれるものです。
＜img src="○○○"＞
「img」と「src」の間は半角スペースがありますので、
続けてしまわないでください。
それから、「○○○」の部分は、表示させたい画像ファイルの
置いてあるURLを指定します。
ここで大事なのは、自分のPC内にある画像は
表示できないということです。
URL、つまり、公に見られる場所、インターネット上に
置いてあるファイルを指定することになります。
今回は、ふらっとアルバムにおいている画像を
読み込みますので、そのURLをまず確認しましょう。
まず、アルバムの画像を表示します。
今、ブラウザのアドレスバーに表示されているのは、
その写真が表示されているページのURLですので、
画像のURLではありません。
それではどうしたらいいのか。。。
ブラウザがInternetExplorerをお使いの方は、
画像の上でマウスを右クリックしてください。
すると、ショートカットメニューが表示されると
思いますので、その中から「プロパティ」をクリック
してください。
プロパティ画面が開きます。
プロパティ画面にURLが表示されていますので、
ドラッグしてコピーしてください。
（「ドラッグしてコピー」については、こちらのページをご覧ください。）
ブラウザがFirefoxの方は、ショートカットメニューの
中にある、「画像のURLをコピー」をクリックしてください。
これ以外のブラウザをお使いの方で、URLの
調べ方が分からないという方は、メールをくださいませ(^^ゞ
さて、URLがわかりましたので、先ほどのタグで説明した
「○○○」の部分を画像のURLにしてください。
URLは半角のダブルクォーテーションで囲まれている必要が
ありますので、閉じ忘れなどないように気をつけてください。
あとは、ブログを保存してみて、ちゃんと表示されるか、
確認してみてください。
そして、最後に大事なお願いがあります。
この方法を使うと、画像のURLさえ分かれば、
自分の写真でなくても表示させることが出来てしまいます。
著作権を守って、楽しみましょう(^^ゞ
説明がわかりにくかったり、間違っているんではないかという
ところがあったら、メールでお知らせいただけるとたすかります。
わたしも勉強になりますので、ご協力をお願いしますm(__)m
