あまもりのなんやかんや

しがらみから離れてたまには身近な自然と親しみたい

アルバムのアレンジ

2006年10月11日 | PC

◆7枚のマウスオンアルバムのタグソース
(大きな画像の520×390ピクセルを基本として、サムネイル横55×縦41ピクセルの例)
(10月7日投稿の「御殿か舟か」で使用したタグソースです)

【追記】 (10/12 13:00 現在)
下記のソースに<font style="font-size:0px;">のタグを追加し、サムネイルサイズを増やしたソースを10/12にUPしました。
新ヴァージョンの方がサムネイルのバランスが取れていると思います。
ちなみに10/7の「御殿か舟か」は、新ヴァージョンのソースに変えました。

<table width="520"><tr><td><table width="520" border="1" cellpadding="2" cellspacing="0" bordercolor="660066"><tr><td align="center"><TABLE width="520 align="center" CELLPADDING="0"><TR><TD align="center"><font color=white><<img src="1サムネイル"width="55" alt="1コメント" height="41"onmouseover="psr26.src=’1画像’"></TD><TD align="center"><font color=white><<img src="2サムネイル"width="55" alt="2コメント" height="41"onmouseover="psr26.src=’2画像’"></TD><TD align="center"><font color=white><<img src="3サムネイル"width="55" alt="3コメント" height="41"onmouseover="psr26.src=’3画像’"></TD><TD align="center"><font color=white><<img src="4サムネイル"width="55" alt="4コメント" height="41"onmouseover="psr26.src=’4画像’"></TD><TD align="center"><font color=white><<img src="5サムネイル"width="55" alt="5コメント" height="41"onmouseover="psr26.src=’5画像’"></TD><TD align="center"><font color=white><<img src="6サムネイル"width="55" alt="6コメント" height="41"onmouseover="psr26.src=’6画像’"></TD><TD align="center"><font color=white><<img src="7サムネイル"width="55" alt="7コメント" height="41"onmouseover="psr26.src=’7画像’">></font></TD></TR></TABLE></td></tr><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="white" align="center"><IMG src="表紙画像" ALT="表紙コメント" name="psr26"width="520" height="390"></td></tr></table></td></tr></table></td></tr></table>

★注意1
 < > ’ は全て1バイト文字(半角文字)にしてください。
 (メモ帳等のエディタやワープロソフトの検索置換で変換してください)
★注意2
 「.src」の前の「psr26」は、各自で変更してください。
 (マウスオンアルバムを作成されていた方はご存知だと思います)
★注意3
 gooブログの記事投稿の編集画面には「TEXTエディター」と「HTMLエディター」の
 二つがありますが、必ず「TEXTエディター」で編集してください。
 「HTMLエディター」は便利ですが、マウスオンアルバムのタグを挿入しますと、
 goo独自のモジュールが入り、プレビューで成功していても記事投稿すると、
 マウスオンタグが無効になることが多いです。


◆今までのマウスオンアルバムに追加したタグは、
<font color=white><」と「></font>」です。
今回はupplain氏の裏技タグを使用しました。
二重にくくった余分な「<」と「>」をいかに隠すかがポイントでした。
文字色をホワイトにして隠す裏技です。
(注)バックが白のテンプレートに限ります。シンプルなソースにするために上記に公開したソースには、バックの色づけタグはありません。
大事なことは
<font color=white><」は各マウスオングループに必ず入れること。
最後のマウスオングループには「></font>」も必ず入れること。
上記のソースは、7枚のサムネイルの例ですが、5枚、6枚と減らすこともできますし、
9枚10枚と増やすこともできます。
この場合大事なことは、1つのマウスオングループはどこからどこまでかを知ることです。
上記ソースでは、分かり易くグループ毎に色を変えています。

↓これがひとつのマウスオングループです。
 (7つのマウスオングループの内、1~6までの共通タグソース)
<TD align="center"><font color=white><<img src="1サムネイル"width="55" alt="1コメント" height="41"onmouseover="psr26.src=’1画像’"></TD>

↓最後のマウスオングループ。
<TD align="center"><font color=white><<img src="7サムネイル"width="55" alt="7コメント" height="41"onmouseover="psr26.src=’7画像’">></font></TD>

このグループがわかれば、パセリ倶楽部のマウスオンアルバムにも適用できますね。
(但し裏技タグの挿入箇所に注意してください。またテーブルバックの色は白に変えてください)


◆マウスオンアルバムのサムネイル数を変更する場合の注意点。

ここで大事なことは、マウスオングループの数を増減する場合はサムネイルの横幅と高さを変える必要があることです。
上のソース例は、全体の枠幅520ピクセルに対して、7枚のサムネイルなので、
横幅は「55」ピクセル、高さは「41」ピクセルにしていますが、数を増減する時はここの数字を変えなければいけません。
大事なのはサムネイルの横幅なのです。この計算をきっちりしないと表示が崩れます。
(画像のサイズを加工されている方はご存知ですが、横幅を変えると高さは自動的に決まります)

裏技タグの挿入によって、サムネイル幅を以前より少なく設定する必要があります。
5枚のサムネイルの場合、
以前は、 520÷5=104。
サムネイルとサムネイルの空白を考慮して、横幅は95ピクセルに設定していましたが、裏技タグの挿入によって、85ピクセルほどに下げなければなりません。
サムネイルの数が増えれば、サムネイル間の数も増えるので、サムネイル幅はますます小さくなります。しかしサムネイルはあくまでサムネイル。大事なのは大きな画像なので、この件に関してはあきらめています。
抹消線を引いた項目は<font style="font-size:0px;">を挿入することで解決しました。

サムネイルサイズの変更は、マウスオングループ内の「width」と「height」です。
マウスオングループ以外の「width」と「height」を変更すると、テーブルの全体枠や、肝心の大きな画像サイズが狂ってしまいます。
ここで変更するのはサムネイルサイズなので、マウスオングループ内であることが肝心です。
●間違いなくサムネイルの幅、高さだけを変える検索置換のポイント。
 例 : 横幅55、高さ41を、横幅80、高さ60に変更する場合
 width="55" → width="80"
 height="41" → height="60"
とすれば、大きな画像のwidthとheightを間違えて置換することはありません。


◆アルバムの設定を変える時に知っておかなければいけないタグ

bordercolor="660066" 枠カラーの設定タグ。
green、red、brown等と英文でも色を設定できます。
HTMLで使える色の参考はこちら↓
http://www.ezbbs.net/chart.html
数字をコピーするだけで可。「#」はいりません。
width= 横幅を設定するタグ
height= 高さを設定するタグ
table width="520" テーブル枠全体の横幅サイズを設定するタグ。
これは枠幅520ピクセルということです。
align="center" 表示位置を設定するタグ。
これはセンターを示しています。他に、right、leftと設定できます。

テーブル幅(全体の枠幅)を変更する場合は、サムネイル幅も大きな画像幅も変更する必要があるので注意してください。

(1)テーブル枠タグは、上記ソースの最初のほうにあるこれ↓
<table width="520"><tr><td><table width="520" border="1" cellpadding="2" cellspacing="0" bordercolor="660066"><tr><td align="center"><TABLE width="520 align="center" CELLPADDING="0">

(2)大きな画像幅のタグは上記ソースの下の方にあるこれ↓
<td bgcolor="white" align="center"><IMG src="表紙画像" ALT="表紙コメント" name="psr26"width="520" height="390">

※(1)、(2)の中の「width="520"」と「height="390"」のサイズを変更します。
520ピクセルから600ピクセルに変更したい場合、サムネイル幅を変更する時と同じように検索置換で、
width="520" → width="600"
height="390" → height="450"
とすると間違いなく置換できます。
画像サイズとタグサイズが違うと画像が荒れますのでご注意ください。


↓テーブルタグについてはここに詳細があります。
http://www.tohoho-web.com/html/table.htm
アレンジする時に参照すると便利かと思います。

 

上に表示したソースは、まだ完全じゃないかもしれません。ここをこうした方がいいよと言う箇所があれば教えていただければ嬉しいです。

このソースでよろしければ自由に使ってください。
私自身、パセリ倶楽部や、裏技タグを教えて頂いた熊子女史並びにupplain氏のタグを使ってアルバムを復活することが出来たのですから。

また、上記のソース並びにサムネイル数の増減に関して書きましたことは、あくまで私個人が使って崩れないことを確かめたものですが、これを流用する場合は、個人責任でお願いします。一切の責任は負いかねます。

※この記事内容をコピーペーストする時は、Word等のワープロソフトをお勧めします。
 色・表をそのままの状態でペーストできます。

コメント (16)    この記事についてブログを書く
  • Twitterでシェアする
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする
goo blogユーザーが出品しています
他の出品作品をマルシェルで見る
« 御殿か舟か | トップ | アルバムタグ更新ソース »
最新の画像もっと見る

16 コメント

コメント日が  古い順  |   新しい順
あまもりさん、こんにちは (polo181)
2006-10-11 15:59:08
あれまぁ、一挙大公開ですね。これで随分と大勢の人が助かることでしょう。

私は、今日は8枚のアルバムを利用して、コサギとダイサギの写真を掲載しました。宜しかったらご覧下さい。
有難うございます (おみや)
2006-10-11 16:15:10
こんにちわ

大切なタグを公開していただき有難うございます。実は今日庭の花を写して、あまもりさんがタグを公開したら早速試してみようと準備していました。今夜試してみます。

本当に有難うございます。上手く出来ると良いのですが。
poloさんこんばんは(あまもり) (polo181さんへ)
2006-10-11 18:30:54
どう書こうかと内容に苦労しました(笑)

タグソースを使ってない方にはチンプンカンプンだと思ったのですが、うちに来てくださる方の中にも、今まで使っていたマウスオンアルバムが使えなくなり困っている方もいらっしゃったので。

何もかも熊子さんにおんぶにだっこさせるのは申し訳ないという気持ちもありました。

poloさんも自分なりにアレンジしたアルバムを昨日UPされていましたね。

今日は8枚に増やしたのですか。

poloさんは理数系に強いようで、タグソースは有る程度みればアレンジも簡単にできるのですね。

はい、お邪魔させていただきます。
おみやさんこんばんは(あまもり) (おみやさんへ)
2006-10-11 18:31:23
お待たせいたしました。

間違いがないか、漏れがないか、このタグソースで大丈夫かと何度も試しそれに時間を費やしました。

多分、これでOKと思いますが、うまくいかない場合はすぐにポイしてくださいね。
大変な努力で (横浜のおーちゃん)
2006-10-11 19:06:16
タグを工夫された上に、懇切丁寧な解説つきで公開されたことに敬意を表します。

前回のコメントの返信でも教えていただきましたが、これですっかり理解できました。

今度何かのときに使わせていただきます。

ありがとうございました。
皆様此処にお越しの方々はお偉い! (sakura)
2006-10-11 19:36:45
残念ながら難しくて一人ではワカリマセン。

何時も先生に来てもらって教わりながらやっていますので先ずはプリントさせていただきました。有難う御座いました。

あまもりさんはすごい方ですね。

何時も思っていますがこの「チンプンカンプン」

を見て 本当に尊敬してしまいましたよ。

あまもりさんは賢いな~ (酔歩)
2006-10-11 22:12:58
あまもりさんもタグ教室の開講ですね。

凄い労力の詰まった力作です。これで助かる人が大勢いる事でしょう。

実のところ私にはチンプンカンプンなのです。教えていただいたタグ?なるものをコピ-して、ここまでなんとかやってきた状態です。

素人の私にとっては簡単便利が一番です。コピ-して貼り付けるだけで使えるのが良い

だからマウスオン・ワンクリックがもっとも使い易かった。

このあまもりさんの方法も一度ゆっくりと挑戦させていただきます。

sakuraさんこんばんは(あまもり) (sakuraさんへ)
2006-10-11 23:29:33
ごめんなさい。sakuraさんのブログでは関係ないタグですね。

「チンプンカンプン」で尊敬・・・

じゃ、これからパソコン用語を駆使して並べてみよかなぁ。

ますます尊敬される?

パソコン歴だけは古いのです。(中身は無し)

まだWindowsのない時代に、真っ黒けの画面に文字を打ち込んでいました。

その打ち込む命令文字をコマンドと言っていましたが、このタグもよく似たものなんですよ。
酔歩さんこんばんは(あまもり) (酔歩さんへ)
2006-10-11 23:30:01
とんでもない。タグ教室など開くつもりはおません。

タグに関してはこの記事で終わるつもりです。

タグは基本的には著作権のないもの。誰が使おうと自由だし。

だから自分の知っていることは公開しようとそう思っただけ。

そうそう、面倒なタグで四苦八苦するより、短時間でUPできる方がベストなのは確か。

自分なり、それが大事。

UPしたソースや使い方は、どうしてもアルバムを使いたい人のためのもの。

それからね、私はかしこないで~。

これも人の言葉をかき集めたようなもんやで。

私はやっぱりペテン師かもしれへん(笑)←ゼンジーあまもり
おーちゃんこんばんは(あまもり) (横浜のおーちゃんへ)
2006-10-11 23:36:18
おーちゃんに敬意を表されたら縮こまってしまいます。

決してそんなたいそうなもんじゃありません。

人から貰ったタグで、アレンジしたものを公開しただけです。

このソースは、もう少し研究が必要かもしれませんが、ブログ上はこのままでも可能だと判断したので公開しました。

こちらこそ恐縮です。

コメントを投稿

PC」カテゴリの最新記事