Stinger5カスタマイズ！記事一覧全体をリンク化、クリック可能にする方法

SEOに強いレスポンシブテーマ「Stinger5」。
アクセス数が激的に増えると噂のStingerシリーズの最新版です。

テーマのSEO効果のおかげで自然とサイトを訪れてくれる方は増えます。
せっかく来て頂いたのだから、訪問者さまには快適にサイトを見て欲しいですね。

そこで今回は記事一覧のどこを押しても記事ページに移れるようにして訪問者さまのユーザビリティを向上させてみたいと思います。

完成像はこんな感じ。

※この記事は「Stinger5」を使われている方向けです。「Stinger3」で同様のカスタマイズをしたい方はこちらの記事をご覧ください。

今回やること

まずはデフォルトのStinger5のおさらいです。
記事一覧の「サムネイル」か「タイトル」のいずれかを押すと記事ページに飛べるようになっています。

この設定のままでもマウスを使っている場合にはそれほど苦にはなりません。
ただノートパソコンのトラックパッドなどカーソルが動かしづらい場合、クリックできるところが小さいと多少不便なんですよね。

今回はこれをどこを押しても記事一覧に移れるように変えていきたいと思います。

カスタマイズ概要

大きく3ステップでカスタマイズは完了です。

まず、記事一覧全体にリンクを付けるため「#topnews」の「dl要素」にリンクを追加します。
(参考:Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編-)

次に背景をクリックできるようにするためにjQueryを追加します。
今回は「blog@human」さんのコードを使わさせて頂きました。

最後に訪問者さんに全体がクリックできることをわかってもらうため、マウスオーバー時の背景色が変わるようcssを変更して今回のカスタマイズは終わりです。

カスタマイズ手順

Step1 dl要素にリンクを追加

はじめに編集するのは「itiran.php」です。
dl要素の部分を以下のように変更してください。

変更前: <dl class="clearfix">
変更後: <dl class="clearfix" data-href="<?php the_permalink();?>">

Step2 クリックを可能にするjQueryを追加

次にjQueryを追加します。
追加するコードはこちらのページの上から2つ目のものです。
[WordPress]抜粋部分のブロック全体をリンクにする|blog@human

@humanさんのコードの以下の部分を書き換えて、「header.php」のheadタグ内に書き加えてください。

1ヶ所目
修正前: 'div.entry-excerpt'
修正後: '#topnews dl.clearfix'

2ヶ所目
修正前: return false;
修正後: 削除します

これで全体がクリック可能になりました。

Step3 CSSを調整

最後に「style.css」を編集します。
今回はマウスオーバーで背景色が変化して、ポインターが手の形になるようにしてみました。
配色はお好みでどうぞ。

/*--------------記事一覧ホバー時の挙動--------------*/
#topnews dl.clearfix:hover{
	background-color: ここに好きな色;
	cursor: pointer;
}

以上でカスタマイズは完了です。
うまくできていればマウスをホバーさせるとこのようになります。

あとがき

@Jimon_sさんをフォロー