※記述に間違いがあったので訂正しました。(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」やランキング表示も同様に設定をしたので、クリックしやすくなりました。