ブログで複数枚の画像を表示する
(プリントアウトすることをお勧めします)
まず、 Public Photo Gallery に登録をしてください。

登録は、ユーザーネームもパスワードも、半角英数字で行ってください。
登録すると、メールが届きます。

その中のURLをクリックすると、登録が完了します。


この6枚をアップするとします。



A.jpg 




B.jpg




C.jpg




D.jpg




E.jpg




F.jpg


おのおのの写真の名前が 

「 A.jpg 」
「 B.jpg 」
「 C.jpg 」
「 D.jpg 」
「 E.jpg 」
「 F.jpg 」


だとします


サムネイル用の画像も準備します。

(縮小の仕方は こちら をクリックしてください)

STAGEブログは、横幅が狭いので、
1つのサムネイルは 横150ピクセル 程度の
大きさにしてください。


As.jpg


Bs.jpg


Cs.jpg


Ds.jpg


Es.jpg


Fs.jpg


サムネイル画像は、対比しやすい名前にしてください。

    「アイテム追加」をクリックしてください。





「参照」をクリックして、アップロードする画像を選んでください。

「キャプション」には、写真の説明などの覚え書きを書いてください。





画像が Public Photo Gallery にアップロードされました。



各画像の名前ををクリックして開きます。




プロパティを開きます。




画像のURLを取ります。



メモ帳にコピペして一時的に保存します。


基本のタグ(命令文)は、次の通りです。
(必ず半角で書いてください)

<a href="大きい写真のURL" target="_blank"><img src="サムネイルのURL"></a>
では、実際にタグを書いてみましょう。
例題は、サムネイルを横に3枚、縦に2枚の場合です。

(ヒント)タグが長くなりますので、 <a href=""><img src=""></a> を単語登録しておくと良いでしょう。

<a href="http://photo.thi.jp/d/4153014-1/A.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153017-1/As.jpg"></a><a href="http://photo.thi.jp/d/4153019-1/B.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153021-1/Bs.jpg"></a><a href="http://photo.thi.jp/d/4153023-1/C.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153025-1/Cs.jpg"></a>

<a href="http://photo.thi.jp/d/4153027-1/D.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153029-1/Ds.jpg"></a><a href="http://photo.thi.jp/d/4153031-1/E.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153033-1/Es.jpg"></a><a href="http://photo.thi.jp/d/4153035-1/F.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153037-1/Fs.jpg"></a>

この2つの塊は、おのおのが1行でなければなりません。
メモ帳に書くと、次の図のように複数行に分かれますが、1つの塊はちゃんと1行ですので、「Enter」キーで改行しないでください。

このままでアップしますと、次のような配置になります。



横同士がくっついています。
それを解決するには、お互いの間に「全角のスペース」を1つ入れます。

タグは次のように書きます。
( ■ を、全角スペースの代わりに入れてあります)

<a href="http://photo.thi.jp/d/4153014-1/A.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153017-1/As.jpg"></a>■<a href="http://photo.thi.jp/d/4153019-1/B.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153021-1/Bs.jpg"></a>■<a href="http://photo.thi.jp/d/4153023-1/C.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153025-1/Cs.jpg"></a>

<a href="http://photo.thi.jp/d/4153027-1/D.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153029-1/Ds.jpg"></a>■<a href="http://photo.thi.jp/d/4153031-1/E.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153033-1/Es.jpg"></a>■<a href="http://photo.thi.jp/d/4153035-1/F.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153037-1/Fs.jpg"></a>


これでおのおののサムネイルが離れました。

ここでは、一挙に6枚をアップする方法を記しましたが、練習として、まず1枚をアップしてみてください。

<a href="http://photo.thi.jp/d/4153014-1/A.jpg" target="_blank"><img src="http://photo.thi.jp/d/4153017-1/As.jpg"></a>



この基本が出来たら、あとは連結していくだけです。
 







inserted by FC2 system