ブログパーツ

趣味の工房

サムネイルをクリックしたときに違う画像を表示する☆

みなさん、こんばんは
メールフォームより、先日のアクセス解析結果☆でやっていた、サムネイル表示をクリックしたときに違う画像を表示するにはどうしたらいいのだ!?というご質問を頂きました。


例えば先日の記事で使用したのはこんな感じですね。

○都道府県別訪問者数


2012y09m01d_215256680.jpg
※画像クリックで全ランキングへ。

このように、サムネイルではTOP10の画像を表示しておいて、クリックするとすべてのランキングが現れるといった具合に使っています。


これはTOP10だけの画像、全体の画像それぞれを用意しておいて、サムネイルにはTOP10の画像、画像をクリックしたときのリンク先(参照先)には全体の画像を指定してやることで可能になります。(☆画像リンクを貼る方法☆参照)

これらを活用すれば、例えばこんなこともできます。


Generic.png   Generic.png   Generic.png
どれか選んでクリック!!




中身の部分は、上記☆画像リンクを貼る方法☆でも紹介していますが、通常、FC2ブログでは、画像を差し込むとこのように表示されます。


<a href="http://blog-imgs-44.fc2.com/r/i/k/rikuntyudady/Generic.png" target="_blank"><img src="http://blog-imgs-44.fc2.com/r/i/k/rikuntyudady/Generic.png" alt="Generic.png" border="0" width="128" height="128" /></a>


この部分の説明をすると、
< a href="URL" target="_brank">

の部分でクリックしたときののリンク先を設定します。通常画像を差し込んだ場合は、その画像のURLになっています。
つまりここのURLを他の画像のURLに変更することで、クリックしたときの画像がその画像に代わるようにできます。
またサムネイル画像をクリックしたときに別のサイトにリンクさせたい場合は、この部分をリンクさせたいサイトのURLに変更します。
そのあとの「target="_brank"」は新しいタブで開くという設定です。これを消すと、現在のタブで開くようにすることができます。
ちなみにこのブログでは、画像表示にColorBoxというスクリプトを使用しています。
(導入はコチラ→ブログの画像表示をスタイリッシュに♪(2)【Color Box】

また、この部分<a href="URL" target"_brank">を丸ごと削除すると、画像をクリックすることをできなくさせられます。

そのあとの
<img src="サムネイル画像のURL" alt="Generic.png" border="0" width="128" height="128" />
では、サムネイル画像が設定されます。
そのあとの「alt=」の部分は代替テキストと呼ばれるもので、これは画像が表示されなかった場合に代わりに表示されるテキストで、特になくても問題はありません(あったほうが親切ですが)

そのあとの「boeder」で画像の枠線の太さの指定、widhで画像の幅、heightで高さを指定しています。
サムネイルの大きさを変更したい時には、この数字を変えることで大きくしたり、小さくしたりすることができます。ただしその場合、画像をアップロードした時に指定したサムネイルの大きさを超えて、画像を大きくし過ぎると画像がぼやけること、縦横の比率に注意しないと画像が歪んでしまうことに注意してください。(幅を半分にしたら高さも半分にする、など。ただし、高さを指定しない場合は元の比率で表示されます
Generic.pngGeneric.png
※上の画像を2倍にした例※縦横比を誤った例


ちなみに最初の例では、このサムネイル画像は同じまま、リンク先の画像をそれぞれ差し替えて表示しています。
アイデア次第ではおもしろいことができるかもしれませんね。 ( ̄m ̄*)


それではみなさん、**SeeYou**( ̄∀ ̄*)ノ


ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村



関連記事


    23:22 | Trackback : 0 | Comment : 3 | Top
Comment
2012.09.06 Thu 04:31  |  たかぴー #-
・・・。  お、おいすです~~~

栃木はいつもランクインしていないので 超ショボ~~ン (╯⊙ ⊱⊙╰ )

栃木の人はちと分かっていないので おいらが行って分からせてきます(爆

カスタマイズ性としてもFC2ブログ 素晴らしいっすね♪

アメブロは定期的にメンテとかくるので跳び蹴り喰らわせたくなりますww
  [URL] [Edit]
2012.09.06 Thu 22:49  |  てるぞ #-
。・∀・)ノ゛

なるほど~www
パパさんの知識の深さに
いつも驚かされます♪

上手く使えばオモロイこと出来そうな予感します
'`ィ(´∀`∩
  [URL] [Edit]
たかぴーさん
こんばんはー☆
まぁランキングは個人的に見ているだけで、TOP10にランクインしないからと言ってお仕置きとかするわけではないですから(爆)

FC2はカスタマイズ性は高いですが、アメブロのほうがいろいろと楽しそうですね~♪
ぐるっぽ、ボクも参加したいですw
確かにアメブロのメンテは多い気がしますね。
そういやFC2最後にやったのいつだっけ!?(爆)


てるぞさん
いや、Google先生のご指導のおかげですw
使いこなし方はてるぞさんにお任せします☆(爆)

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/843-8dd5deb5
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示