画像のポップアップをスタイルシートで

画像のポップアップをしたいな、と思っていまして、
(マウスのカーソルを持っていくと、色が変わったりするやつ)
でも、JavaScriptなどで、HTMLソースが重くなるのは嫌だなー
と思っていたんです。

で、先日こちらの記事を見つけまして。

【参考記事】
CSSでポップアップを実現する
http://garage.mods.jp/ex/css-popup/

これなら、自分でもできるかもしれない！
と思い、やってみました♪

【続きを読む】の隣の、【押しちゃダメ】に
カーソルを当ててみてください！(クククッ、笑)

(↑【押しちゃダメ】は、個別記事ページには出ませんので、
　トップページやカテゴリページで見てみてくださいね♪)
サンプルとして置いておきます。お楽しみください(笑)。→(押しちゃダメ)

わりとすんなりできて、
ビックリです。

いやー、これ、面白いので、
いろんな使い方のアイデアが出てきますよね。

(ブログランキングへのクリックが増えるかは、さておき。笑)

やり方ですが、
画像をアップして、あと、
書き加えたのは、こんな感じ。

HTMLのほうは、

<span class=”popup”>
<a href=”http://www.intactmotor.com/out/ranking-more1″ target=”_blank”>(押しちゃダメ)<img src=”http://www.intactmotor.com/wp-content/uploads/2009/09/osuna.gif” width=”280″ height=”180″ /></a>

CSS(スタイルシート)のほうは、

.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}

という感じです。

HTMLとスタイルシート、ちょっとわかるよ、という方は
やってみてください。面白いですよ。

スタイルシート初心者におすすめ無料レポートその１

スタイルシート、ちょっと勉強してみようかな～、
という方には、こちらの無料レポートをおすすめします。

『ブラウザ上でブログを表示させながら、スタイルシートをカスタマイズできる方法』
ブラウザ上で、ブログを表示させたままスタイルシート（CSS）が変更できてタイトル画像や、背景色・文字の色・大きさなど、変更後のブログの状態を確認しながら作業ができる機能のインストールから使い方までを解説しています。

(のむてつ感想)全17ページ。
スタイルシート初心者に、イチオシの無料レポートです。
インターネットビジネスをするなら必須のブラウザ、Firefoxを使って、
スタイルシートをいじるのを簡単にしよう、という無料レポートです。
中を見てみましたが、これ、いいかも♪

左に、スタイルシートの文字列、右に自分のブログのデザイン、という
感じで、左右を見比べて作業できるので、スタイルシート初心者の方には、
非常に良い方法だと思います。直感的にわかりますからね。

17ページと短い無料レポートですが、内容は◎です♪

スタイルシート初心者におすすめ無料レポートその２

『【光塾】スタイルシート完全攻略～ブログカスタマイズ』
ブログを自由にカスタマイズするには、スタイルシートを理解していると便利です。スタイルシートの基本から応用までブログでよく出てくる項目についてまとめました。seesaaブログでのカスタマイズ方法を基準に記載していますが、スタイルシートは、どのブログでもHPでも同じですので、 FC2ブログやライブドアブログ、MT利用者でも応用できます。合計112ページ：しおり付

(のむてつ感想)スタイルシートをしっかりやりたい人には、
イチオシの無料レポート。

Seesaaブログを例として挙げているのが、いいですね。
スタイルシート初心者の方で、シーサーブログ利用者には、
わかりやすいと思います。特に、実際のスタイルシートに、

/*文字の表示位置*/

というように、どんどんコメント(説明)を入れていく形で
進めていくので、あとで見てもわかるようになると思います。

ブログを実際に、文字色を変えたり、サイドバーの幅を変えたり、
文字列の幅を変えたり、など、カスタマイズ方法が載っていますので
実際にやってみると、楽しいと思います。

ただ、説明は非常にわかりやすいんですが・・・
ページ数が多いので、一気に読もうとすると途中で嫌になるかも(笑)。
実際にやりながら、章ごとにちょっとずつ進めるといいかもしれません。
(このレポート、目次がないのが、イタイです)

あと、スタイルシートカスタマイズのときに役立つ
おススメフリーソフトの紹介なんかも、あります。

もっとスタイルシートを勉強したい！という方は、こちらに
まとめてみましたので、ご覧ください。
⇒CSS(スタイルシート)入門用　無料レポート一覧

• エクセルの表をブログに貼る方法１：画像で貼る

1. あ より:

   2011 年 4 月 18 日 4:25 PM

   はどこ？？
   全角になってない？→”

   このアフィリエイトクソヤロウが
2. あ より:

   2011 年 4 月 18 日 4:28 PM

   はどこ？？になっちゃった。タグ禁止か。
   ＜／すぱん＞ね。htmlのほうに無いよね。
3. い より:

   2012 年 3 月 26 日 3:43 AM

   ああ、わざと間違えた記述して、

   なんでできない？って勘違いさせてアフィに移動させてるのか
   最低だな