こんにちわ!
最近一人暮らしをはじめたので、自分でつくった絶品パスタを食べながら記事を書いています。
今回は、僕がこれから取り組んでいく、ゲーム関連のサイトを製作するにあたってスマホユーザーの事を考えたサイト作りをしていたところふとこんな壁にあたりました。

ブログ記事の一覧にリンクを張るときに、文字だとスマホで押しづらい。。。

そうなんです。
コレまではブログでも何でもリンクは画像だったり、記事タイトルだったりについていたのですが、スマホが普及してからは良く見るアプリだってタイトルではなくブロック単位でリンクがあるじゃない!

方法は2つある

さてさてこのようなブロック要素にリンクを配置するには主に2つの方法があります。
・CSSのみでaタグをブロック化して親の要素(記事一覧の個別の記事にあたるところ)にまで引き伸ばす。
・jQueryで実装する。

あれ、なんかJSの方がスマートな感じする。と思い!

今回はJSで実装することにしました!

(BONESベースなので、それぞれの環境に置き換えてね!自分用のメモだねこれw)

環境
・Wordpress
・テーマはBONES

レシピ
・jQuery
・jQueryプラグインのbiggerlink(http://www.ollicle.com/projects/jquery/biggerlink/
・function.php(WPの場合)

レッツクッキング!

レシピをダウンロードで任意のディレクトリに配置(WordPressならjQueryは元から装備されてるよ)
今回はjQuery.biggerlink.min.jsをDLしてbiggerlink.min.jsにリネーム。

function.php(BONESテーマでは、bones.php内)にbiggerlink.jsをテーマに登録するよ!するとフッターで読み込んでくれるみたい。WPだとこっちがスマートな方法みたい。
なのでこちらを追記。BONESのテーマに沿っているためtheme直下のlibraryの奥底に配置。

BONESのテーマに合わせて記述
各テーマでは、参考にしてみてください。

これでテーマへの登録おk!

後は任意のセレクタの範囲にリンクを広げてくれるコードをjsに記述するとそこの子に含まれるリンクが指定のセレクタの範囲まで広がるよ!
僕は上記のJSをテーマに登録するところで読み込んでいた「bones-js」のやつに追記したよ!
他のjsファイルを作るときは、上記の登録部分にまとめて登録できるから簡単だね!

WPなので「jQuery」を「$」でかけるように変換してます。

ぱっと書いたので構造理解が間違ってるかもだけど、これでブロック要素のリンクが完成!
また、セレクタを増やせば同様にブロックレベルでのリンクも増やせるからJSで実装しちゃった方がのちのち良い気がする。
今回は、この辺で!
自分用のメモに近いので、質問をツイッターに飛ばしていただければ返します。解説不足や間違いで誤解が生まれるような場合は修正したので指摘いただければと思います。