wordpress　記事一覧のリンク設定について

法人・ビジネスホームページ・Web制作 2013/05/14 13:03

wordpress初心者です。
トップページに最新ブログ記事を表示させる際に
記事全体（アイキャッチ画像・タイトル・本文・日付）にリンク設定をするにはどうしたらよいでしょうか？また「hover」時にブロック全体（1つの記事全体）に色が変化するようにする際の設定を教えていただけたら幸いです。
例えばhttp://liginc.co.jp/もひとつひとつの記事にカーソルをもっていくと記事全体の色が変わります。
下記のようにコーディングして「flo_le9」のブロック全体にリンク設定をしたいと思っています。

<div class="flo_le9 clearfix <?php echo add_class($related); /* Green 独自関数 - テーマ用のクラスを付ける */ ?>">
<a href="<?php the_permalink() ?>">
<div class="flo_le7">
アイキャッチ画像掲載
</div>
<div class="flo_ri2">
タイトル・本文・続きを読むを掲載
</div>
</div>


以降新着記事６件にまるまで繰り返し表示します。

どうぞ、アドバイス宜しくお願い致します。

plussmanさん（東京都 / 男性 / 53歳）

回答：1件

井上昭弘
ITコンサルタント

【ブロック全体のリンク設定について】

2013/05/15 14:19 詳細リンク

: (5.0)

はじめまして。株式会社雅の井上と申します。
下記のように、HTMLとCSSそれぞれ記述して頂ければ、ご希望の動作になるかと思います。


<a href="<?php the_permalink() ?>" class="block">
<div class="flo_le9 clearfix <?php echo add_class($related); /* Green 独自関数 - テーマ用のクラスを付ける */ ?>">
<div class="flo_le7">
アイキャッチ画像掲載
</div>
<div class="flo_ri2">
タイトル・本文・続きを読むを掲載
</div>
</div>
</a>



/*
* aタグをブロック要素に変更
*/
.block{ display: block;}

/*
* aタグのオンマウス時処理＿背景色変更
*/
.block:hover{ background: #eee;}


尚、例で頂いたURLのサイトでは背景色がふわっと変わるようになっておりますが、これは別途javascript等のスクリプト処理が必要になりますので、今回は省いております。