◆７枚のマウスオンアルバムのタグソース
（大きな画像の520×390ピクセルを基本として、サムネイル横55×縦41ピクセルの例）
（10月７日投稿の「御殿か舟か」で使用したタグソースです）
【追記】 （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="１サムネイル"width="55" alt="１コメント" height="41"onmouseover="psr26.src=’１画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="２サムネイル"width="55" alt="２コメント" height="41"onmouseover="psr26.src=’２画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="３サムネイル"width="55" alt="３コメント" height="41"onmouseover="psr26.src=’３画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="４サムネイル"width="55" alt="４コメント" height="41"onmouseover="psr26.src=’４画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="５サムネイル"width="55" alt="５コメント" height="41"onmouseover="psr26.src=’５画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="６サムネイル"width="55" alt="６コメント" height="41"onmouseover="psr26.src=’６画像’"＞＜/TD＞＜TD align="center"＞＜font color=white＞＜＜img src="７サムネイル"width="55" alt="７コメント" height="41"onmouseover="psr26.src=’７画像’"＞＞＜/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＞ |
★注意１
＜ ＞ ’ は全て１バイト文字（半角文字）にしてください。
（メモ帳等のエディタやワープロソフトの検索置換で変換してください）
★注意２
「.src」の前の「psr26」は、各自で変更してください。
（マウスオンアルバムを作成されていた方はご存知だと思います）
★注意３
gooブログの記事投稿の編集画面には「TEXTエディター」と「HTMLエディター」の
二つがありますが、必ず「TEXTエディター」で編集してください。
「HTMLエディター」は便利ですが、マウスオンアルバムのタグを挿入しますと、
goo独自のモジュールが入り、プレビューで成功していても記事投稿すると、
マウスオンタグが無効になることが多いです。 |
◆今までのマウスオンアルバムに追加したタグは、
「＜font color=white＞＜」と「＞＜/font＞」です。
今回はupplain氏の裏技タグを使用しました。
二重にくくった余分な「＜」と「＞」をいかに隠すかがポイントでした。
文字色をホワイトにして隠す裏技です。
（注）バックが白のテンプレートに限ります。シンプルなソースにするために上記に公開したソースには、バックの色づけタグはありません。
大事なことは
●「＜font color=white＞＜」は各マウスオングループに必ず入れること。
●最後のマウスオングループには「＞＜/font＞」も必ず入れること。
上記のソースは、７枚のサムネイルの例ですが、５枚、６枚と減らすこともできますし、
９枚10枚と増やすこともできます。
この場合大事なことは、１つのマウスオングループはどこからどこまでかを知ることです。
上記ソースでは、分かり易くグループ毎に色を変えています。
↓これがひとつのマウスオングループです。
（７つのマウスオングループの内、１～６までの共通タグソース）
＜TD align="center"＞＜font color=white＞＜＜img src="１サムネイル"width="55" alt="１コメント" height="41"onmouseover="psr26.src=’１画像’"＞＜/TD＞
↓最後のマウスオングループ。
＜TD align="center"＞＜font color=white＞＜＜img src="７サムネイル"width="55" alt="７コメント" height="41"onmouseover="psr26.src=’７画像’"＞＞＜/font＞＜/TD＞
このグループがわかれば、パセリ倶楽部のマウスオンアルバムにも適用できますね。
（但し裏技タグの挿入箇所に注意してください。またテーブルバックの色は白に変えてください）
◆マウスオンアルバムのサムネイル数を変更する場合の注意点。
ここで大事なことは、マウスオングループの数を増減する場合はサムネイルの横幅と高さを変える必要があることです。
上のソース例は、全体の枠幅520ピクセルに対して、７枚のサムネイルなので、
横幅は「55」ピクセル、高さは「41」ピクセルにしていますが、数を増減する時はここの数字を変えなければいけません。
大事なのはサムネイルの横幅なのです。この計算をきっちりしないと表示が崩れます。
（画像のサイズを加工されている方はご存知ですが、横幅を変えると高さは自動的に決まります）
裏技タグの挿入によって、サムネイル幅を以前より少なく設定する必要があります。
５枚のサムネイルの場合、
以前は、 520÷５＝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と設定できます。 |
テーブル幅（全体の枠幅）を変更する場合は、サムネイル幅も大きな画像幅も変更する必要があるので注意してください。
（１）テーブル枠タグは、上記ソースの最初のほうにあるこれ↓
＜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"＞
（２）大きな画像幅のタグは上記ソースの下の方にあるこれ↓
＜td bgcolor="white" align="center"＞＜IMG src="表紙画像" ALT="表紙コメント" name="psr26"width="520" height="390"＞
※（１）、（２）の中の「width="520"」と「height="390"」のサイズを変更します。
520ピクセルから600ピクセルに変更したい場合、サムネイル幅を変更する時と同じように検索置換で、
width="520" → width="600"
height="390" → height="450"
とすると間違いなく置換できます。
画像サイズとタグサイズが違うと画像が荒れますのでご注意ください。
↓テーブルタグについてはここに詳細があります。
http://www.tohoho-web.com/html/table.htm
アレンジする時に参照すると便利かと思います。
上に表示したソースは、まだ完全じゃないかもしれません。ここをこうした方がいいよと言う箇所があれば教えていただければ嬉しいです。
このソースでよろしければ自由に使ってください。
私自身、パセリ倶楽部や、裏技タグを教えて頂いた熊子女史並びにupplain氏のタグを使ってアルバムを復活することが出来たのですから。
また、上記のソース並びにサムネイル数の増減に関して書きましたことは、あくまで私個人が使って崩れないことを確かめたものですが、これを流用する場合は、個人責任でお願いします。一切の責任は負いかねます。
※この記事内容をコピーペーストする時は、Word等のワープロソフトをお勧めします。
色・表をそのままの状態でペーストできます。
