SEOに強いレスポンシブテーマ「Stinger5」。アクセス数が激的に増えると噂のStingerシリーズの最新版です。テーマのSEO効果のおかげで自然とサイトを訪れてくれる方は増えます。来て頂いたのだから、訪問者さまには快適にサイトを見て欲しいですね。そこで今回は記事一覧のどこを押しても記事ページに移れるようにして訪問者さまのユーザビリティを向上させてみたいと思います。※この記事は「Stinger5」を使われている方向けです。「Stinger3」で同様のカスタマイズをしたい方はこちらの記事をご覧ください。Link今回やることまずはデフォルトのStinger5のおさらいです。記事一覧の「サムネイル」か「タイトル」のいずれかを押すと記事ページに飛べるようになっています。この設定のままでもマウスを使っている場合にはそれほど苦にはなりません。ノートパソコンのトラックパッドなどカーソルが動かしづらい場合、クリックできるところが小さいと多少不便なんですよね。今回はこれをどこを押しても記事一覧に移れるように変えていきたいと思います。大きく3ステップでカスタマイズは完了です。記事一覧全体にリンクを付けるため「#topnews」の「dl要素」にリンクを追加します。-トップページ編-)次に背景をクリックできるようにするためにjQueryを追加します。今回は「blog@human」さんのコードを使わさせて頂きました。最後に訪問者さんに全体がクリックできることをわかってもらうため、マウスオーバー時の背景色が変わるようcssを変更して今回のカスタマイズは終わりです。dl要素にリンクを追加はじめに編集するのは「itiran.php」です。dl要素の部分を以下のように変更してください。the_permalink()って?「投稿のパーマリンク」、つまり「記事のアドレス」を取得するテンプレートタグ。今回はdl要素にその記事のアドレスを追加しています。次にjQueryを追加します。追加するコードはこちらのページの上から2つ目のものです。[WordPress]抜粋部分のブロック全体をリンクにする|blog@human@humanさんのコードの以下の部分を書き換えて、「header.php」のheadタグ内に書き加えてください。削除しますこれで全体がクリック可能になりました。最後に「style.css」を編集します。今回はマウスオーバーで背景色が変化して、ポインターが手の形になるようにしてみました。配色はお好みでどうぞ。pointer;}以上でカスタマイズは完了です。うまくできていればマウスをホバーさせるとこのようになります。あとがきStinger3のカスタマイズでアクセスの多い内容だったので、Stinger5にも対応させてみました。実践してみるとアクセス性のよさがわかって頂けると思います。一度おためしください^^最後まで読んでいただきありがとうございました。Jimon(@jimon_s)でした。一覧ページで画像やタイトル文字以外のクリックでもページ遷移。コメントをキャンセルメールアドレスが公開されることはありません。Stinger5カスタマイズ!サムネイル画像を好きな大きさに変更する方法PROFILEJimon東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。文具ライフハックAboutおしゃれな小物とiPhone,Macの情報発信ブログ。