どりーみー

先日（2008/06/11）の「CSS だけでサムネイルギャラリー」
のcssを勉強しました。
マウスオーバーで展開、更にサムネイル画像に触れると拡大
と言うところのCSSがだいたい解かりました。面白いですね。
忘れないように書いて置きます。
サンプル



CSS部分

 /*メニューの文字に触れたら展開する　ここから*/
  /*サムネイル画像が入るtable*/
.album ul :hover table{ 
 padding:0;
 margin-top:-2px;
 display:block;
 border:1px solid red;
 border-width:0px 1px 1px 1px;}

/* メニューの一個一個のtable   文字だけの囲みになった*/
.album ul li table {    
 margin:0;
 padding:0;
 display:none;
}

/*  transparentが背景色を透過させる指定*/
.album ul li a.set:hover {
background:transparent;    
}

/*  transparentが背景色を透過させる指定*/
.album ul li:hover a.set {  
background:transparent;    
}


 /*メニューの文字に触れたら展開する　ここまで*/



/*展開したサムネイル画像の上にマウスオーバーで拡大　ここから*/

.album ul li a.set:hover li a:hover
{
	background-color: #fff;
}

.album ul li a.set:hover li a:hover img{
	width:auto;
	height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*展開したサムネイル画像の上にマウスオーバーで拡大　ここまで*/

HTML部分
<div class="album">

<ul>
<li><a class="set" href="#nogo">アジアンタム#1</a><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="代替" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins>
</li>

</ul>
<br class="clear" />
</div>

もしメニューの文字をクリックしたら展開する
と言う場合は
「hover」ではなく「active」を使う

コメント♪ 　(0) コメントお待ちしています♪ 【記事-Close】

テンプレートで記事の部分が下に下がらないようにするには

2008-06-15-06-43-日 | com(0) | tb(0)
この場で記事を開く

CSS だけでサムネイルギャラリー

2008-06-11-16-17-水 | com(0) | tb(0)
この場で記事を開く

JavaScriptやFlashを使わずにスタイルシートだけで
サムネール画像にマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。
固定した画像にリンクを入れられます。

JavaScriptやFlashを禁止されているサーバーの方も使えますね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>title</title>
<style type="text/css">

</style>
</head>
<body>

<ul id="gallery">
<li><a href="#">
<img src="#1画像のURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2画像のURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3画像のURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4画像のURL" alt="#4" title="#4" /></a></li>

<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5画像のURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6画像のURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7画像のURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8画像のURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>

参考にさせていただいたサイト
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
ありがとうございます。

コメント♪ 　(0) コメントお待ちしています♪ 【記事-Close】

１枚の画像に複数のリンクを貼る

2008-06-04-17-22-水 | com(0) | tb(0)
この場で記事を開く

indexにtitleだけのテンプレートってどうよ？

2008-05-15-15-12-木 | com(6) | tb(0)
この場で記事を開く

テンプレートで
トップページにはタイトルだけっていうの
どうでしょう？
この場で記事を開くには頂いたコメントも入れてみました。

やりすぎですね。うふふ

これは公開していません。きっと使われないと想うからです。
でも様子を見たい方は画像をクリックしてみてね。

コメント♪ 　(6)

♪paruparu
はじめまして。
自分のブログでtitle="<%rcent_body>"を使っていますが改行がされてしまい、見た目が悪いのが気になっていました。

title="<%recomment_body"> ではある方のブログを参考に<br>表示を消すことに成功しましたが。。。

こちらのサイトでは記事がマウスオーバーによって見やすく表示されるので羨ましいです。

♪どりーみー
こんにちは
<%recent_body>
を使っていらっしゃるんですね。
よくいろいろと勉強なさっているんですね。
これを使うとクリックせずに内容がおおよそわかって良いですね。
私のこのテンプレートでindexにあるtitleをマウスオーバーでは title="<%topentry_discription>"というのを使っています。
これと<%recent_body> に違いがあるか解かりませんが、

メニューのところへ

<ul>

<li &align>
<%topentry_year>-<%topentry_month>-<%topentry_day><br><a href="<%topentry_link>" title="<%topentry_discription>"><%topentry_title> </a>
</li>

</ul>

とやってみました。
表示はこのテンプレートの右側一番下「最近の記事」にトップページでは出ていますね。
ただ個別ページだけはその個別記事のタイトルだけになってしまいますね。

paruparuさんがなさったように
<%recent_body>
をメニュー上から４番目「最新の記事」につけてみました。
コメントなどが無いTOPページで比べてみてください。あまり違わないような気がしますね。

♪paruparu
早々に回答ありがとうございました。
実は以前の書き込みをした後...記事編集の自動改行をOFFにしてひたすら過去記事を<br><br>だけでの改行のみに修正していったら、気になっていた点は改善できました。

どりーみーさんに教えて頂いた方法も早速試してみましたが、これだと自動改行ONなどにして記事を編集しても title では改行は無視して表示してくれるみたいですね。

自動改行OFFだと過去記事の編集の時（私はしょっちゅう修正しています

）にちょっと編集画面が見づらいので、どちらを使うか悩むところです。

どりーみーさんのブログのようなトップページには title="<%topentry_discription>" の方がたくさん表示出来て良いと思いますが、私のブログのような形態だと（最近の記事で）逆にそこまで内容を見せる必要がなさそうなので、とりあえず元の title="<%rcent_body>" で続けてみます。

丁寧に回答いただき、ありがとうございました

　また遊びにきます。

♪どりーみー
そうですね。自動改行で結構やってくれますよね、
paruparuさんのようにメモ帳でHPを作っているとBlogは簡単すぎて拍子抜けすると想います。
このBlogは投稿する記事によってHTMLだけということも出来るので楽しいですね。
それになんといってもスタイルシートとHTMLをいじれるのが楽しいですよね。
結局行き着くところはシンプルなんですけどね（笑）

♪paruparu
久しぶりに遊びにきました。
今ちょっと気づいたのですが、この場で記事を開くのところにマウスを合わせて表示されるヘルプチップ（title="")部分が記事を開く"　になっていました。↓URLです。

http://dreamy.blog2.fc2.com/?template=title&index

報告まで。
私もブログのナビゲーションを色々変えたので良かったらまた遊びに来てください。

♪どりーみー
気づきませんでした。ご指摘ありがとう。嬉しいです。
さっそく直しました。えへへ

Oｈ!paruparuさんもいろいろ変わったのですね。遊びに行きますね。わーい

コメントお待ちしています♪ 【記事-Close】

サムネイル画像．Highslide JS

2008-04-18-08-32-金 | com(10) | tb(0)
この場で記事を開く

私はテンプレートindexページにサムネイル画像を置きそれをかっこよく拡大させるテンプレートを夢見ています。
先日、作成したgallery-w
では画像をクリックすると別ウインドウで画像が拡大するんです。

サムネイル画像を拡大するjavascriptにはIDが着いていて、そのIDには名前がついているので、topentryのように繰り返し表示するものは無効になってしまいます。

今回のHighslide JSもそうです。テンプレートとして取り入れることはまだできません。

ただ記事の中に取り入れる方法を記事になさっている方を見つけました。
TomomiX日記/Highslide JS実装手順/http://blackcat13numbers.blog31.fc2.com/blog-entry-188.html

早速やってみました。
＊改行の扱いをＨＴＭＬタグのみにしました。

画像をクリックするとその場で拡大します。
拡大した画像をクリックすると元の大きさに戻ります。

どうでしょう？

ストレスが少ないですね。
これはクリック後の拡大表示された画像をドラッグして動かせることが面白いですね
caption・・・・写真の説明をつけない場合IDはいらないらしいですね？

コメント♪ 　(10)

♪TomomiX
こんばんわ^^
Highslide JSが実装できてとても嬉しかったです。
更にご紹介までしていただき光栄です^^
次回のHighslide JS紹介では、更にキャプションや
コントローラーをつけるカスタマイズ説明なんかを
考えています。
では今後ともよろしくお願いします～。

♪どりーみー
こんばんは
すごく新しい記事での実装にめぐり合い驚きました。それまで一番新しいHighslide JSで試みていたので、アップロードできないものがあり、他のサーバーへアップしてやっていましたが、古いバージョンと聞いて本当に嬉しかったです。
ありがとうございました。

更に次回を期待しています。
よろしくお願いします。

♪TomomiX
そう言っていただけるととても嬉しいです^^
また、最近の記事で、Shadowbox実装もできましたので
あわせてご参照いただければと思います。
画像のオーバーレイだけではなく、WebページやYoutubeなどの
動画もオーバーレイ表示できるので結構オススメです。

♪どりーみー
こんばんは
Shadowboxというのはlightbox２に似ている感じなのでしょうか？
ＩＥではなぜか見れなかったので、Firefoxで見せてもらいました。
WebページやYoutubeなどの画像も見れるというのが驚きですね。

♪TomomiX
>Shadowboxというのはlightbox２に似ている感じなのでしょうか？
ちょっと違いますね。Lightbox2はどちらかというとHighslideと同じで、
静止画像のみの表示にサポートしています。
ShadowboxとGreyboxが同じようなもので、こちらは静止画像以外に
Webページや動画にもサポートしています。

ShadowboxのWebサイト表示デモは、私のサイトメニュー内の
「メール」をクリックいただくと見れますよ。
フォームページがオーバーレイ表示し、通常通りWebフォームにも
記入でき、投稿もできます。便利ですよ^^

♪どりーみー
TomomiX さんの所のメールで拝見してきました。
なるほど、面白そうですね。
暇が出来たらやってみたいと思います。
またその折にはご指導お願いしますね。

♪荒野鷹虎
とても参考になりました!クリックで拡大している人が沢山いますが、是非そういう技術を身につけたいものと思っています。私の実力では、困難でしょうが、挑戦することに意義がありそうですので頑張ってみます。

♪どりーみー
画像がその場で拡大できるとすっきりしていますよね。
是非やってみてくださいね。
もし出来ましたら、拝見させていただきますよ。♪
何か私でお役に立てることがありましたら何なりと・・・微笑

♪荒野鷹虎
ご親切などりーみーさんありがとうさんです。！
結構難しいです。やっとUPができるようになっただけでも感激です。

♪どりーみー

私も全くのしろうとですが、Blogのテンプレートを見ているうちに、HTMLやCSSが面白くなってきました。
荒野鷹虎さんもやってみるといいと思いますよ。

コメントお待ちしています♪ 【記事-Close】

スクリーンセーバー

2008-03-23-05-51-日 | com(0) | tb(0)
この場で記事を開く

gallery-b

2008-03-02-12-19-日 | com(6) | tb(0)
この場で記事を開く

テンプレート

2008-02-21-08-19-木 | com(6) | tb(0)
この場で記事を開く

FC2Blogのテンプレートの編集をしていてスタイルシートなどほとんど知らなかった私がいろいろなことを覚えました。いえいえまだまだほんの入り口から中を覗き見たといった程度などなのですが、とても面白いことだと思いました。
近頃、やっとそうなんどと納得したことは、FC2Blogのテンプレートにおいて、いろいろなナンバーについているIDがあるということです。
それを書いておくとその場所にリンクすることが出来るのですね。
例えば、頂いたコメントにはそれぞれ番号が付いていて「%comment_no」と書いてあるところへリンクすることが解かりました。
これをつけてないと、その記事のコメントが始まる頭に行っていたんです。
改めて、テンプレート中で使えるブロック変数に対して感心しました。
まだまだいろいろと楽しそうなことがありそうですね。

コメント♪ 　(6)

♪#11
始めましてです。
テンプレートかなり気に入ってます！
また遊びにきま～す＾＾！

♪どりーみー
#11さま
気に入っていただいて嬉しいです、ありがとうございます。
その後、月日を表示されるようにしてみました。

♪mian
はじめまして。
凄くこのテンプレートを気に入り使用させて頂いています。
それでIEだと形崩れしないのですが
Fire foxだと、
個別のページで右側が落ちてしまいます。
初心者の私にはどうしたら良いのか分かりません。
お忙しい中恐縮ですが
教えて頂けたらと思いコメントさせていただきました。
よろしくお願いします。

♪どりーみー
すみません
＞Fire foxでは個別のページで右側が落ちてしまいます
gallery-w
gallery-b
を見たら、なるほど落ちていますね。
お知らせありがとうございます。
修正して更新します。
すみません。ダウンロードしなおしてくださいね

16:30・・・・更新しました。

♪mian
お忙しい中本当にありがとございました。
早速ダウンロードさせて頂き今は型崩れすることなく気持ちよく使用させて頂いています。

また、このバージョンの３コラムor４コラムも登場するのを期待して待っています。

本当にありがとございました！

♪どりーみー
良かったです。
こちらこそ、ありがとうございました。
＞このバージョンの３コラムor４コラム・・・
あはは、そうですね。うふ
またよろしくお願いしますね。

コメントお待ちしています♪ 【記事-Close】

半透明にする

2008-01-24-06-59-木 | com(0) | tb(0)
この場で記事を開く

続々、3度目のリカバリー

2008-01-04-11-21-金 | com(6) | tb(0)
この場で記事を開く

続3度目のリカバリー

2008-01-03-10-46-木 | com(0) | tb(0)
この場で記事を開く

3度目のリカバリー

2008-01-02-10-26-水 | com(0) | tb(0)
この場で記事を開く

朝、パソコンの電源が入らなかった

2007-12-20-16-28-木 | com(0) | tb(0)
この場で記事を開く

ウイルスバスター2007

2007-12-14-21-36-金 | com(0) | tb(0)
この場で記事を開く

「TmProxyモジュールで重大な問題が発生しました。ウイルスバスター2007を再インストールしてください。」
というようなメッセージが出て、インターネットの閲覧が一切出来なくなった。
再起動したら見えるようになったので、いろいろと検索してみると、どうも2007が不具合が多いらしい。それで2006に戻した人もいるようだし、2008がでているので2008にした方が良いとの意見もあったので、9月初めに2007にしたばかりだったけど、思い切って2008にしてみました。2008にするには推奨する容量が足りないというメッセージ。それでも実行しますか？との質問に一度はNOとして、うろたえた。
でも最近のパソコンの不具合、閲覧中に突然問題が発生したので終了します。ということで切れてしまうことも多かったし、決して今が繋がりが早いともいえないので、だめだったら2007に戻すことにしようと思い、（－－－－－2006はこの12月末で終わるらしいしーーーーー）
2008を入れてみました。
そう言われるほど重いわけじゃないけど、でもウイルスバスターにこんな容量を使われるのはどうゆうもんだろうと思うわけです。
とはいってもウイルスバスターがないとどうにも安心できないのですから、なんとかもっと容量を増やすことにしなくてはならないようです。
2008にしたんだから、不具合がなくなりますようにと祈りつつきょうは終わります。

PS,
それに2007になる時、Windows９８はサポートが終わり、2008ではWindows2000のサポートが終了、推奨は Windows Vistaということです。この分で行くと近々WindowsXPも終わり、買い替えってことになるのかしら？

コメント♪ 　(0) コメントお待ちしています♪ 【記事-Close】

どりーみー

リシア

アジアンタム

木立ベコニア

朝顔２

青い朝顔

マリーゴールド

大きい画像

テキストを回り込ませない

BlogパーツのFC2 blogxml

絵文字の背景画像を消す

album2の画像サムネイルを並べる

ｃｓｓだけでマウスオーバーで展開

テンプレートで記事の部分が下に下がらないようにするには

CSS だけでサムネイルギャラリー

１枚の画像に複数のリンクを貼る

indexにtitleだけのテンプレートってどうよ？

サムネイル画像．Highslide JS

スクリーンセーバー

gallery-b

テンプレート

半透明にする

続々、3度目のリカバリー

続3度目のリカバリー

3度目のリカバリー

朝、パソコンの電源が入らなかった

ウイルスバスター2007

絵文字いろいろ

なぜFirefoxなのか

幅広い画像

双子テレビ