どうも、おつぱ（ @OZPA ）です。
先日よりブログの個別記事に実装いたしました、サムネイル付きのオススメ記事リンクの作業メモでございます。
コードなど
ブログの個別記事トップにこんなのを置いてみました。カーソルを画像の上に持ってくると、画像が暗くなったちょっと後にタイトルが下からすいっとでてきます。
実装するに当たって使用したのはWordPressプラグイン「YARPP」と「Auto Post Thumbnail」の二つ。
リンクのhoverスタイルに関しましてはコリスさんの秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめを参考にさせていただきました:)
以下、手順でござんす。
YARPPの設定
まず、WordpressプラグインのYARPPの「テンプレートファイル」を「yarpp-template-thumbnail.php」に設定、「wp-content/plunins/yet-another-related-posts-plugin/yarpp-templates」から、「yarrp-template-thumnail.php」をダウンロードしてテーマのフォルダ内に格納します。
で、テーマフォルダ内の「yarrp-template-thumnail.php」を以下のようにカスタマイズ。
<?php if(have_posts()):?>
<div class="related-post">
<?php while(have_posts()) : the_post(); ?>
<?php if(has_post_thumbnail()):?>
<div class="related-entry">
<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?></a>
<div class="related-words"><p><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p></div><!-- / .related-words -->
</div><!-- / .related-entry -->
<?php endif; ?>
<?php endwhile; ?>
</div><!-- / .related-post -->
<?php else: ?>
<!-- 関連記事がないときのHTMLをここに書く-->
<?php endif; ?>
CSS
あとは、cssを以下のように変更しました。
/* YARPP
---------------------------- */
.related-post{
width:970px;
margin:15px 0 0 2px;
overflow:hidden;
}
.related-entry {
background: #dddddd;
float: left;
width:187px;
height:123px;
border:solid 1px #999;
margin:0 2px;
line-height:1em;
position:relative;
display:table-cell;
}
.related-entry img{
min-width:187px;
height:auto;
vertical-align:middle;
display:block;
margin:auto;
}
.related-words{
font-size: 0.75em;
position: absolute;
top:0px;
height:123px;
width:187px;
background:#252525;
opacity:0;
-webkit-transition: all 0.3s 0.1s ease-in-out ;
-moz-transition: all 0.3s 0.1s ease-in-out ;
-o-transition: all 0.3s 0.1s ease-in-out ;
transition: all 0.3s 0.1s ease-in-out ;
text-transform: uppercase;
}
.related-words a{
text-decoration:none;
color:#fff;
}
.related-words p{
text-shadow:#333 1px 1px;
position:absolute;
top:10px;
margin:0 10px;
width:167px;
opacity:0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.3s 0.3s ease-in-out ;
-moz-transition: all 0.3s 0.3s ease-in-out ;
-o-transition: all 0.3s 0.3s ease-in-out ;
transition: all 0.3s 0.3s ease-in-out ;
}
.related-words:hover{
transform: translateY(0px);
opacity:0.8;
}
.related-words:hover p{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
追記
「.related-words p{bottom:10px}」は「.related-words p{top:10px}」の方が良いのではとのアドバイスを頂きまして変更してみました。
@ryo_dg さんマジありがとう！そこまでコード見てるのキミぐらいだよ！
最後に、
<?php related_posts(); ?>こちらを記事リンクの出したいところに書いて終了。
ざっくり説明
cssの部分が長くてわけわからんので、ざっくり説明しませう:)
hover前は、画像の上に「#252525（ほぼ黒）で透明（opacity:0）」のclassが、タイトルはy方向に-100px移動した状態で控えております。
ここでhoverすると、画像上のclassのopacityが0.8になって、画像が黒くなります。
最後に、「transition-delay: 0.3s」によって、画像が黒くなった0.2秒後（黒い四角のtransition-delayが0.1sのため）にタイトルが下からひょこっと顔を出す、という仕組みです。
お察しの通り、上記説明画像を作成している時が一番楽しかったです。
そのうち飽きてこの仕様をやめるかもしれないので、デモを置いておきます。会社とかで見ないほうがいいと思います。
デモページ
そんなわけで、hoverスタイルを駆使したサムネイル付きのオススメ記事リンク作成メモでした。
本来でしたら、CSS3に対応していないブラウザのことを考えて素直にhoverを使用せずにタイトルを出すべきなんでしょうが、タイトルが長い記事が多いんですよね…うちのブログ。
まぁ、物は試し＆自分の勉強用に、ということでこんな感じにしてみました。お暇な方はやってみてください:)
SPONSORED LINK
