wordpress 記事一覧のリンク設定について - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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>
<!-- flo_le9-->

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

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

plussmanさん ( 東京都 / 男性 / 53歳 )

回答:1件

井上 昭弘 専門家

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

1 good

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

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

はじめまして。株式会社雅の井上と申します。
下記のように、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等のスクリプト処理が必要になりますので、今回は省いております。

HTML
CSS

評価・お礼

plussmanさん

2013/05/18 15:35

ありがとうございます。出来ました!感謝しております!!
フワッと出る方法も教えていただくことは可能でしょうか?

回答専門家

井上 昭弘
井上 昭弘
(東京都 / ITコンサルタント)
株式会社雅 代表取締役
03-5843-9329
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

中国ビジネス x インターネット事業はお任せ下さい!

中国ビジネス、インターネット事業ともに、まだまだ大きな可能性を秘めている分野です。私は中国国内での多数の地域での人間関係及び経験と、インターネットの技術を用いて、日中双方のビジネスに野心を燃やしております。

井上 昭弘が提供する商品・サービス

対面相談

ウェブ事業コンサルティング(初回ご相談無料)

サイト制作、システム開発、M&Aなど、ウェブ事業に関するご相談を承ります。

対面相談

中国事業コンサルティング(初回ご相談無料)

中国のウェブ事業、マーケティングについてお気軽にご相談下さい

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

Amebaブログのデザイン変更について tcnさん  2013-10-04 08:51 回答1件
ミラーブログを作られています oceさん  2013-07-09 17:19 回答1件
+ Twitterの可能性、活用方法について 玲さん  2007-06-28 01:10 回答6件
SEOと画像について bamboooさん  2016-07-12 21:15 回答2件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)