対象:ホームページ・Web制作
回答数: 3件
回答数: 7件
回答数: 3件
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>
<!-- flo_le9-->
以降新着記事6件にまるまで繰り返し表示します。
どうぞ、アドバイス宜しくお願い致します。
plussmanさん ( 東京都 / 男性 / 53歳 )
回答:1件
井上 昭弘
ITコンサルタント
1
【ブロック全体のリンク設定について】
はじめまして。株式会社雅の井上と申します。
下記のように、HTMLとCSSそれぞれ記述して頂ければ、ご希望の動作になるかと思います。
<!-- html-->
<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>
<!-- html-->
<!-- css-->
/*
* aタグをブロック要素に変更
*/
.block{ display: block;}
/*
* aタグのオンマウス時処理_背景色変更
*/
.block:hover{ background: #eee;}
<!-- css-->
尚、例で頂いたURLのサイトでは背景色がふわっと変わるようになっておりますが、これは別途javascript等のスクリプト処理が必要になりますので、今回は省いております。
評価・お礼
plussmanさん
2013/05/18 15:35ありがとうございます。出来ました!感謝しております!!
フワッと出る方法も教えていただくことは可能でしょうか?
(現在のポイント:-pt)
このQ&Aに類似したQ&A
表示中のコンテンツに関連する専門家サービスランキング