Thanks Amazon / abdelazer
ブログのサイドバーに、Amazonが提供してるオススメ商品ウィジェットを付けていたのですが、なんとなく気に入らなかったので作り替えてみました。
挙動
ブログのサイドバー、ちょっと下ったところに設置。
任意で貼った画像リンクをクリックするとAmazonへ移動します。
カーソルを画像の上に持っていくとご覧のように「Amazonへ移動」と「この商品に関する記事」へのリンクを表示するようにしてみました。
画像は5秒ごとにフェードしては次の商品に移動していきます。
hover時の文章は変更できるのが売り。
拝みなさい！
コード
まぁウィジェット、とは言いましたが「side-amazon.php」というファイルを作ってサイドバー内に埋め込んだだけですのでウィジェットとは言い難いかもしれません:(
side-amazon.php
<div id="slideAmazon"> <ul id="amazonList"> <li> <a href="アマゾンへのリンク"><img src="#" alt="画像の説明" class="slideAmazonImg" /></a> <div class="slideAmazonInnerA"><a href="アマゾンへのリンク">Amazonでこの商品をみる</a></div> <div class="slideAmazonInnerL"><a href="記事へのリンク">この商品に関する記事を読む</a></div> </li> <li> <a href="アマゾンへのリンク"><img src="#" alt="画像の説明" class="slideAmazonImg" /></a> <div class="slideAmazonInnerA"><a href="アマゾンへのリンク">Amazonでこの商品をみる</a></div> <div class="slideAmazonInnerL"><a href="記事へのリンク">この商品に関する記事を読む</a></div> </li> <li> <a href="アマゾンへのリンク"><img src="#" alt="画像の説明" class="slideAmazonImg" /></a> <div class="slideAmazonInnerA"><a href="アマゾンへのリンク">Amazonでこの商品をみる</a></div> <div class="slideAmazonInnerL"><a href="記事へのリンク">この商品に関する記事を読む</a></div> </li> （中略） </ul> </div>
sidebar.php
任意のphpファイルをインクルードするには、wordpressで用意されている関数「TEMOLATEPATH」を使用して、以下のように記述します。（ウィジェットを表示させたい場所に） <?php include( TEMPLATEPATH . '/side-amazon.php' ); ?>
CSS
スタイルシートは以下。
#slideAmazon{
width: 300px;
height: 350px;
display: block;
margin-left: 20px;
overflow: hidden;
}
#slideAmazon #amazonList li {
top: 0;
left: 0;
list-style: none;
border: none;
}
.slideAmazonImg{
position: relative;
}
.slideAmazonInnerA{
display: none ;
position: absolute ;
bottom: 80px ;
left: 70px ;
width: 200px ;
text-align: center ;
background: #c7830e;
color: #fff ;
padding: 5px ;
font-size: 0.8em ;
opacity: 0.9 ;
}
.slideAmazonInnerL{
display: none;
position: absolute;
bottom: 40px;
left: 70px;
width: 200px;
text-align: center;
background: #0c967d;
color: #fff;
padding: 5px;
font-size: 0.8em;
opacity: 0.9;
}
.slideAmazonInnerA a,div.slideAmazonInnerL a{
color: #fff !important;
}
画像をhoverした際に文字を出すために、記事・Amazonへのリンク文は「display:none」で見えないようにしてあります。
jquery
画像のフェード用に、blog.mellowdown.netさんのslide.jsを使用させていただきました:)
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">
//SlideAmazonのhover時に文字表示
$(function(){
$('#slideAmazon').hover(function(){
$('div.slideAmazonInnerA,div.slideAmazonInnerL').fadeIn(100)
},
function(){
$('div.slideAmazonInnerA,div.slideAmazonInnerL').css('display','none')
});
});
（中略）
</script>
</head>
「//SlideAmazonのhover時に文字表示」以下のスクリプトがhover時の挙動を制御するスクリプトです。
とまぁ、ざっくりですがこんな感じで実装してみました。
リンクなどは手作業です。管理が面倒くさいのが玉に瑕ですが、まぁそんなに商品リンクなんて入れ替えませんのでこれでおｋかと。
記事へのリンクを貼れるのが公式ウィジェットよりよい点です。これでPVが伸びるなら嬉しいですが果たしてどうでせうか。
真似したい方は多少面倒くさいですがご自由にどうぞ:)