パソコン・ウェブ制作

WordPressのブロック要素全体をクリックできるように修正

投稿日:2014年10月5日 更新日:

※記述に間違いがあったので訂正しました。(2014.10.8)

キャプチャ

今日は天気があまり良くないので、朝一で外出した後は家でじっとしていたので、ちょこちょことサイトの修正をしました。
※作業開始前に必ずバックアップを取ってください
※素人のカスタマイズですので同じように設定しても動作しない場合があります。あらかじめご了承ください。

ブロック要素全体をクリックできるように

まずはJavaScriptの設定

リンクをテキストだけではなく、全体をクリックできるように修正をしました。
今回はjQueryを使って対応しています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQueryは外部ファイル読み込みにしました。
この記述の下あたりに、適用させたいidやclassを指定します。
ここでは、トップページの一覧に適用させるので「#topnews」「div#topnews dl」となっています。
※記述が一部間違っていました。(2014.10.8)

<script type="text/javascript">
$(function(){
     $('div#topnews dl').click(function(){
         window.location=$(this).find('a').attr('href');
         return false;
    });
});
</script>

 CSSの設定

style.cssに下記を追記しました。

#topnews dl.clearfix:hover {
	background-color : #faf5ca ;
	cursor : pointer ; /*マウスカーソルをポインターに変更する指定 */
}

これでOKです。

右側の「NEW POST」やランキング表示も同様に設定をしたので、クリックしやすくなりました。

-パソコン・ウェブ制作
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

ちょこっとリニューアル

シンプルな構成にしました ほんとうにちょこっとなんですけど、ブログリニューアルしました。 このブログはWordpressで作っていますが、テーマを新しくしてカラフルだったサイトを白ベースのシンプルな色 …

FC2ブログからWordPressに移行しました

約4年前から、キャンプレポートに特化したブログをFC2で更新していたのですが、2014年からWordpressに切り替えてリニューアルしました。 キャンプに頻繁に行くことが出来なくなり、更新が出来なか …

カテゴリ

WordPressのカテゴリ一覧表示をカスタマイズしました。

シンプルすぎるWordpressのカテゴリ一覧表示をカスタマイズしました。 ※作業開始前に必ずバックアップを取ってください ※素人のカスタマイズですので同じように設定しても動作しない場合があります。あ …

Hit bit HB-101

ソニーPC事業譲渡で思い出したMSXとの出会い

Hit bit HB-101 VAIOブランド譲渡のニュースで思い出したのだけど、私のパソコンルーツはソニーのMSX、HiTBiTを購入したのが始まりだったということ。 今後何回か書いていきたいと思っ …

transmit

MacでFTP接続するとSocket write errorになってしまう

※12月1日(月)20時時点、ノートンの設定を変更せずとも接続ができています。 FTP接続ができない 今日突然、FTP接続が出来なくなりサーバー会社に確認をしたのですが、特に設定変更はしていないし、先 …

follow us in feedly
にほんブログ村に参加しています
にほんブログ村 アウトドアブログ ファミリーキャンプへ