本と旅とそれから ネタバレ防止タグ

本と旅とそれから

ネタバレ防止タグ


先日、カーソルを載せた時だけ背景色がついて字が浮き上がるようにして、ミステリー本の感想文などでネタバレ防止に使いたい、でもできないよぉ~っ・・・という記事を書きました。

ふっふっふ~♪できるようになりました!
しかもね、二種類あるの。▼の①、②の隣りにカーソル合わせてみてくださいなっ。

ネタバレ警報!!
ネタバレ警報!!犯人はおまえだっ!!

①の文字は、うす~いグレーになっているので、「何かあるな?」ぐらいはわかるでしょ?で、カーソルを合わせるとはっきり見える。背景色と同じ色にすれば、完全に消えますね。
②は、カーソルを合わせると、背景色と一緒に違う文字が出て来るんです♪

これ、①はRIEさん(jeweldays!管理人さん)が教えて下さいました。もう、本当に感謝です。詳細についてはRIEさんのコチラの記事をどうぞ。②は、あちこち検索しまくって、コチラのブログで見つけてお借りしてきました。現在は更新が止まっているようで残念ですが。

・・・にしても、私は昨日の日曜日、ふだんならば読書と昼寝とぼ~っとするのに費やす時間のすべて(ってことはかなりの時間!)をこれに費やしました。最後はちょっと気分悪くなったぐらいですよ(^^;
実のところ、未だによくわかっていないところがたくさんあるんです。②のやり方に至っては、一応ネタバレ防止の効果が出ているからよいとしてはいるものの、不完全なんです。
「これをコピペすればできるよ」と書かれているのに、コピペしてもできないんですもん。なぜできないんだ?に頭を悩ませること多分数時間。その間もちろん、HTMLその他の指南ブログや解説サイトをあっちへこっちへとウロつき回りました。
まあ、その・・・「クラス」とか「擬似クラス」というあたりのことが原因らしいとは思うのですが・・・取りあえずはできてるから・・・ま、いっか。

①はね、RIEさんに教わったことを書いておきますとね。
  1. リンクを張った文字にカーソルが載った時、背景色が浮かび上がるよう設定する。
  2. ネタバレ防止をしたい部分に擬似リンクを張る。
  3. その際、文字色を白などの、背景色に近い色に指定する。
――となります。

擬似リンクを張ったタグは、こんなふうになります(▼)。
<a href=""><font color=#ffffff>ネタバレ警報!!</font></a>
です。記事TOPの例では、文字は白じゃなくて極薄グレーなので、#ffffffではなく#efefefにしています。あと、<>は全角表示にしてあります(半角で打ったら機能しちゃいますからね。)

この擬似リンクっていうのがカギでしたねー。①でも②でも。
私も、「リンクが張られた文字にカーソルを合わせると色が変わる」という機能を使えばできるんじゃないかなぁ、というところまでは考えたんですが(くくっ、幼稚園・・・)、リンク張るったって、どこに張るんじゃい、どこに飛ばすんじゃいっ、と思って先に進まなかったんですよ。
それがこの<a href="">というのを使えばよかったんですねー。つまり、一応リンクを張った形式にはなっているので、カーソルを合わせれば色は変わるんだけど、リンク先が指定されていないので、どこにも飛ばない、と。のぁぁるほどぉぉ~・・・。

ですが、①でも②でも未解決のまま残っているのが、リンクのスペック指定。色とか、背景色(普通はつけてない)とか、下線の有無とか。
RIEさんは、CSSの最後にA:HOVER{}を追加することで変えられますよ、と説明されていて、多分大抵のスキンではそれでOKだと思われるのですが、私のはダメなんです(T_T)

私の使っているのは「ベーシック」っていうスキンなんですけどね。
(②の作者さんも「ベーシック」のようなんだけど・・・うぅむ。)
ちんぷんかんアタマなりに考えてみるに、このスキンはメニュー部分と本文部分でリンクのスペックを変えてあるんですよ。で、本文部分についてはDIV.POST_BODY A:というセレクタ・・・というのだかクラスというのだかを使って指定してるんですねー。これがあるせいで、ラストにA:の指定をしても効かないんでは・・・?実際、変わってくれないんです、色やら下線やら。仕方ないので、DIV.POST_BODY A:部分の指定を変更したんですけど。あはは、違うかも。

・・・ああ、何て読みにくい記事。
しかも、やたらと「面倒くさそう」って感じですよね。はは。確かに、今回の②については、ちとめんどかったです。一応できたけど。で、せっかくCSSに追加もしたので、できるだけ使おうっかな、とは思ってるんですけど。
あああぁぁ~、疲れた。これで小学校レベルぐらいにはなれたかなぁ?

ぐちゃぐちゃ書いて、読みにくかったですね、ごめんなさい。RIEさん、ホントにありがとうございました!!

関連記事
tag: 
  1. 2007/02/19(月) 21:25:00|
  2. 全般
  3. | トラックバック:0
  4. | コメント:6

トラックバック

トラックバック URL
http://lazymiki.blog110.fc2.com/tb.php/354-20799938
この記事にトラックバックする(FC2ブログユーザー)

コメント

No title

すごいです~!こういうしくみだったんですね。
(「ブログと格闘」のコーナー、すごくありがたくって楽しみにしてますです)
自分でHTMLとか書けちゃうのって、すごくかっこいいですよね‥
色々やってみたいやつはあるけど、あきらめてて、
そのうちのひとつとして『マウスオーバーで△△』関連、
いつも気になってました。(あと、『New!』とかでるやつとか‥)

  1. 2007/02/19(月) 23:09:00 |
  2. URL |
  3. 花侍 #79D/WHSg
  4. [ 編集 ]

No title

こんばんは!ご紹介、ありがとうございます♪
CSSは指定した箇所の装飾!と決めてかかれば、どこを指定しているのか、またどんな装飾をしているのか、ひとつひとつ解体していくことでひもとけるんですが、私もブログおしゃれ講座を作るときに、自分の先入観でものすっごい遠回りをさせられることが結構あります。なのでその日できなかったことが数日後、通勤電車の中で、あれ?ひょっとしたらもっと単純に・・・?なんて解決することもあるんですよね!^^またそれも楽しいのですが。(笑)最近は他の人と協力しながら、自分が発見できたことと照らし合わせて一つの小技を作る、なんてことも増えました。^^
chocoboさんは私もいろいろ学ばせていただいたブログです!素晴らしいんですよね。一日も早い復活を祈っているのですが・・・。
今回はいろいろとお世話になりました~!^^
  1. 2007/02/19(月) 23:11:00 |
  2. URL |
  3. jeweldays #79D/WHSg
  4. [ 編集 ]

No title

◆花侍さん、
え~っ、ホントぅぅぅ?!
こんなんでも楽しみにして頂けているんですか?!
う、嬉しい・・・(T_T)
そういうことなら、「ブログと格闘」なんてアホっぽいカテゴリ名じゃなくて、もっと優雅なのにするんだった・・・(「ブログとワルツ」とか?一層アホっぽいか・・・)。
花侍さんはライブドアブログですよね。きっと、エキサイトとはいろいろ違うルールになってるんでしょうねー。
私はまだよくわかんないんだけど、他では使えるのにエキサイトでは使えないタグとか(そのマウスオーバー・イベントてのも)、結構あるらしいです。
嬉しいこと言ってもらったから、これからも頑張りまっす♪
  1. 2007/02/19(月) 23:58:00 |
  2. URL |
  3. lazyMiki #79D/WHSg
  4. [ 編集 ]

No title

◆RIEさん、
いろいろありがとうございました。
RIEさんの美しいページを見ていると、ついつい、あのワザもこのワザも真似してみたい、と思ってしまいますが、何しろまだまだ理解がついていっていないので、ちょっと何かしようと思うとすぐ何かを見ないとできないんです・・・。
それに、配色とかも見事ですよね~、jeweldays!。
かなり多くの色を使っておられるときでも、ゴテゴテうるさいことにならず、
ちゃんと調和が取れていて・・・。あこがれ~・・・。

そうそう、chocoboさんのブログ。
あちらも宝の山!って感じですねー。でももう、かなり更新が止まっているんですね。本当に残念です。
RIEさん、これからもjeweldays!で勉強させて下さいませ。
よろしくお願いいたします。
  1. 2007/02/20(火) 00:04:00 |
  2. URL |
  3. lazyMiki #79D/WHSg
  4. [ 編集 ]

No title

ネタバレ防止タグ、やりましたね!
livedoorでも使えるのかなぁ?何かのときにやってみようかな。

lazyMikiさんのブログは、いつも読みやすく工夫されていて、尊敬します。リンクとか強調文字の色も落ち着いた配色で、ブログの雰囲気と合っていますね。
  1. 2007/02/20(火) 23:18:00 |
  2. URL |
  3. あつこ #79D/WHSg
  4. [ 編集 ]

No title

◆あつこさん、
やりました!といっても、私は教わっただけで、ホントにやった(いえ、なさった)のは、私のお師匠様なんですけどね(^^;
livedoorブログでは多分、<onmouseover>というタグが使えるんだと思いますよ。普通は使えるもののようです。
これが使えれば、CSS(ってか、これってエキサイト独特?)をいじる必要もなく、楽しくマウスオーバーでいろいろできるみたいです。

お褒め頂いて嬉しい・・・けどテレます。
配色にはいつも苦労します。4月のリニューアル時には、リンク色なども含め、全面チェンジの予定です♪
  1. 2007/02/21(水) 23:59:00 |
  2. URL |
  3. lazyMiki #79D/WHSg
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する