インフォトップ:ブログ作成入門

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

人気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 を投稿するをクリックし、追記の部分へペースト(貼り付け)します。２枚目の写真もファイルのアップロード画面から投稿をクリック、ソースの反転、コピーをします。

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



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

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

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


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

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

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


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

　　　

メルマガ登録 ID: 0000160275 ブログ作成入門講座 登録  バックナンバー powered by