簡易アルバムに挑戦! ブログ入門 中級編 

前回は、サムネイル(縮小画像)のチェックをはずし、大きめの写真をアップしましたが、今回は逆にサムネイルを使って簡易的なアルバムの作り方を解説してみたいと思います。

人気blogランキング参加中!現在17位!

今回の簡易アルバムを作るにあたり、--カメラコゾウ--/フリー写真素材さんより写真をお借りしました。ありがとうございます。

空と海と陸 曇り 鯉のぼり

蒼い空 夏の空 夕暮れ

木漏れ日 空と山 花火

このような感じになります。説明文も欲しいところですが、表を使用すれば出来るのですが、簡単に説明文をつけるには、ファイルのアップロード時にファイルタイトルに説明文・日付などを入れれば、マウスを写真上に持ってくると代替テキストが出ますので、それを利用すればよいと思います。

2005年2月25日:追記
上記のオレンジ文字のことについて、またまた当ブログの
コメディアンテーター(^^;) Kota さん( Under The Red Sky )から教えていただきました。 ※コメディアンテーターについてはコチラ(^^;)
これはalt属性を利用したものですが、altのテキストがポップアップで出てくるのは IE (インターネットエクスプローラー)の仕様で、html の文法的には少し誤作動的な表示です。。あくまで「画像が表示されない、あるいは画像を見ることができない場合」の代替物( alternate )ですので。実際 IE 以外のブラウザではこういう動作は起きません。

ただ、ご承知の通り IE が 9 割以上のシェアを占めていますから、実際はもう「そういうもの」として世間的に通っちゃってるんですよね。だから他のブラウザも、オプション設定やプラグインとかでこの動作を再現させてるものもあります。

どのブラウザでもマウスオーバーで説明文を表示させるには、alt 属性ではなく title 属性を使うのが正解です。
とのことです。私も最近、当ブログへもコメントしてくださる茜さん(犬日記~犬と暮らす、365日。)のブログのコメントで、Mac だからダウンロードできない!を見て、OS ・ ブラウザ・バージョンの違いにより表現の出来る、出来ないがあることは、気づいていましたが、このことは知りませんでした。

いつもながら Kota さんのご指導には感謝します。ありがとうございました。

ちなみに私の PC 環境は、OS は Microsoft Widows XP Home Editon Ver.2002。ブラウザは Microsoft Internet Explorer Ver.6.0 です。

そこへ Kota さんから Firefox というブラウザを紹介していただきました。
現状のブラウザで一番 html とスタイルシート文法解釈が正確だと思います(ときどき私のブログで取り上げてるOperaもいい
線行ってます)

さらに Firefox は、他の OS バージョンとの差があまりないんです。
ですので Win の Firefox で表示確認して問題なければ、Mac でもまず問題はないだろう、という判断が下せます。
とのことです。皆さん全員へおススメするわけではないそうですが、私は、早速、導入してみたいと思います。

▼簡易アルバムの作り方

まず、Blog の投稿画面:ファイルのアップロードよりサムネイルにチェックをいれたまま(デフォルト)でタイトルを入力して写真画像をアップします。
新規ファイルの追加を繰り返して、アップしてください。

ファイルのアップロード サムネイル

アップできましたら、ファイルのアップロード画面で、投稿をクリックして、

写真ファイルのアップロード

ソースを反転&コピーします。

画像の投稿

別ウィンドウを開き、新しく Blog を投稿するをクリックし、追記の部分へペースト(貼り付け)します。2枚目の写真もファイルのアップロード画面から投稿をクリック、ソースの反転、コピーをします。

この2枚目をペーストする時は、下記ののように半角スペースをあけてペーストしてください。
でないと写真が隙間なく、くっついてしまいます。

HTML ソース

上記のソースは9枚目の花火の部分ですが、このブログの追記の部分ですと3枚並びますので、3枚目は赤線部のように右側に文字の回りこみを禁止するタグを青線部のタグから書き換えます。

 align="left" ⇒ br clear="right"

ブログのデザイン、トップページによって並ぶ数は変わりますので、確認しながら作ってみてください。


▼簡易アルバム作りのポイント

・ 写真画像を一気に繰り返しで、アップする。
・ ファイルタイトルに説明文、日付などを記入する。
・ 画像のソースを開くウィンドウと記事を投稿するウィンドウと2つウィンドウを開いて作業する。
・ 3枚目はタグを bclear="right" に書き換える。
・ 4枚もの下段に移る時は、1行あける。

少し手間は掛かりますが、是非、挑戦してみてください!!


人気blogランキング参加中!現在17位! トップ10目指して頑張ります!

サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
 
   
メルマガ登録 ID: 0000160275
ブログ作成入門講座
 
バックナンバー powered by まぐまぐトップページへ
Posted by ブログ作成入門講座 at 09:03│Comments(8)TrackBack(4) | Edit
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/blomal/15008929
この記事へのトラックバック
湯島天神の秋【柴犬しゅりの気まぐれ日記】at 2005年02月27日 21:19
oKi様のブログを見て、簡易アルバムに挑戦してみました。
アルバムできるかな?【How is Rikimaru ?】at 2005年03月10日 23:12
oKi様のブログを見て、簡易アルバムに挑戦してみました。 キレイに出来て、うれしいです。
簡易アルバムできるかな?【How is Rikimaru ?】at 2005年03月10日 23:49
前回、簡易アルバムがキレイに出来たので、うれしくて、もっかいやります。 oKi様の疑問点について、私には分かりません。すいません。
「寒かった自然」なカンジで。【How is Rikimaru ?】at 2005年03月12日 09:12
この記事へのコメント
oKi先生 おはようございます!shizukaです。
昨日は、お手数をお掛けいたしました。
先ほど、ーーカメラコゾウーー/フリー写真素材さんへ
お伺いいたしました。
これもまた、先生からのshizukaへの、沈黙の贈り物だと
思います<(_ _)> 先生に教えていただいた通り、
きちんと、コメント書き込んでまいりました(*^_^*)
ランキング:写真に移動いたしました。
頑張って(ちょっとだけですが・・・)可能性に挑戦してみます。
Posted by shizuka at 2005年02月25日 09:48
shizuka さん、こんばんは。oKi です。

> 先ほど、ーーカメラコゾウーー/フリー写真素材さんへ
> お伺いいたしました。

そうですか。こうしてネット上でいろいろな出会いが出来るなんて、素晴らしいことですね。

ドンドン、楽しんでください♪
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月25日 23:35
こんばんは。ご丁寧なメールをありがとうございます。
ブログって日記のようなものだけかと思っていたら、アルバムも作れたり、なかなか奥の深いものなんですね。
私はブログは持っていないんですけど、開設の際にはまずこちらで勉強させていただこうと思います。
こちらこそよろしくお願いいたしますね。
Posted by カメラコゾウ at 2005年02月26日 00:22
カメラコゾウさん、いらっしゃいませ(^^)。oKi です。
写真をありがとうございました。

> 私はブログは持っていないんですけど、開設の際にはまずこちらで勉強させていただこうと思います。

是非、開設してください!カメラコゾウさんは、すでに HTML の知識がおありなんで、いろいろとおもしろいことも出来ると思います。
その際は、是非、ご連絡ください。遊びに行きます♪
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月26日 01:02
oKiさん、お久です!

この写真の、良さそう!やりたいー!

今回のインド、今さら写真はいいかっ、と思ってたんだけど、これ見てデジカメ用意しました。

帰ってきたら、先生よろしく!

それとインドからコメントするね。
文字化けしなかったら、メルマガも配信してみようかな?

ではでは。
Posted by うさぎのpeko at 2005年03月01日 23:29
peko さん、お久しぶり!

> この写真の、良さそう!やりたいー!

ここの説明で、seesaa ブログで、出来るかな?
うまくいかなかった連絡してください。

インド旅行、気をつけていってらっしゃい♪
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年03月02日 07:07
はじめまして。
アルバムを作りたい!と思いさまよっていました。^^;
oKi様の素敵なブログにたどり着くことができ、早速試してみました。
非常にわかりやすく書かれていたので、初心者の私でも出来て大満足です。

これからもお邪魔させてください。
ありがとうございました。
Posted by 【STEELERS】冷やし中華始めました! at 2005年04月22日 22:12
STEELERS さん、いらっしゃいませ。(^^)

お役に立ちまして何よりです。
ステキなドライフラワーショップですね♪
今後ともよろしくお願いいたします! oKi
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年04月23日 08:02
 
 
AX