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

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

:2014/8/18 STINGER Wordpress

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

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

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

完成像はこんな感じ。

完成像

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

スポンサーリンク

記事内リード文下_PC

今回やること

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

デフォルトでクリックできるのは2ヶ所

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

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

どこでも押せるように変更

カスタマイズ概要

大きく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();?>">
php the_permalink()って?

「投稿のパーマリンク」、つまり「記事のアドレス」を取得するテンプレートタグ。
今回はdl要素にその記事のアドレスを追加しています。

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;
}

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

全体がクリック可能に

あとがき

Stinger3のカスタマイズでアクセスの多い内容だったので、Stinger5にも対応させてみました。
実践してみるとアクセス性のよさがわかって頂けると思います。

ぜひ一度おためしください^^

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


記事下_W左_PC

記事下_W右_PC

-STINGER, Wordpress
-,

サイドバー上_PC

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから!