【Stinger3カスタマイズ!】どこを押しても記事ページに移動!記事一覧全体をリンク化しよう

公開日: : 最終更新日:2014/10/07 Stinger, Wordpress ,

【Stinger3カスタマイズ!】どこを押しても記事ページに移動!記事一覧全体をリンク化しよう

Stingerカスタマイズ最大の見せ場記事一覧。
このサイトでも見た目をカード型2カラムにする方法をご紹介させて頂きました。

見た目にこだわるのも大切ですが、サイトを見に来てくださった方の便利さを向上させることも大切です。
操作性の良いページっていつまでも見ていたくなりますもんね。

というわけで、今回は記事一覧のどこをクリックしても記事ページに移れるようにカスタムしてみたいと思います。

完成するとこんな感じになりますよ。

完成形はこちら

Sponsored Link

今回やっていくこと

まずデフォルトのStingerがどうなっているかおさらいです。
「タイトル」「続きを見る」「サムネイル」のどれかをクリックすると記事ページに飛べるようになっています。

デフォルトではこの3ヶ所

今回はこの3つ以外に「白い背景の部分」をクリックしても記事ページにいけるように設定したいと思います。

カスタマイズ概要

まず各記事部分にリンクを追加するため「.entry」を編集します。(Stingerのクラス構造がよくわからないよ、という方はこちらをご覧ください)

次に背景をクリックできるようにするためにjQueryを追加します。ここが今回のメインとなるのですが、僕はまだ自分でjQueryをごりごり書くことはできません。
今回は「blog@human」さんのコードを使わさせて頂きました。

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

カスタマイズ手順

Step1 .entryにリンクを追加

まず「home.php」を変更していきます。「.entry」の部分を以下のように書き換えてください。

<div class="entry" data-href="<?php the_permalink();?>">

これでリンクが追加できました。

Step2 jQueryを追加する

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

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

1ヶ所目
修正前: 'div.entry-excerpt'
修正後: '.entry'

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

これで背景をクリックできるようになりました。

Step3 クリックできることをわかりやすくする

続いて「style.css」を編集します。
今回はマウスオーバーで背景が赤くなって、ポインターが手の形に変化するようにしてみました。

/*----------クリックできることをわかりやすく-----------*/
.entry:hover {
	background-color: #ffcccc;
	cursor: pointer;
}

.kizi .entry .entry-content .entry-title-ac {
	background-color: transparent; //これがないとタイトルだけ白くなります
}

元テーマを直接編集されている方はもとのcssの一番下に、子テーマを使われている方はそちらにコードを追加してください。

以上でカスタマイズは完了です。
ここまで終わるとこのように表示されているはずです。

全体がクリックできるように

あとがき

これどうやってるの?と質問を頂いたので記事にしました。お役に立てれば幸いです。

クリックできる範囲が大きくなると操作性がすごく良くなります。ぜひ取り入れてみてください。

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

jimon


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Comment

  1. いてまえ より:

    ご要望にお応えいただく形で記事を書いて頂き、誠にありがとうございます。
    記事一覧の余白部分からもクリックできるようになりました。ただ、マウスオーバーがうまく反応しません。
    style.cssに「Step3 クリックできることをわかりやすくする」のコードをそのまま付け加えたのですが、記事のところにマウスを載せても色が変わりません。何か原因等があれば、ご教授願いたいと存じます。
    http://baseball.cashcow1019.com/

    • Jimon より:

      ご連絡ありがとうございます。
      カード型にカスタマイズされている場合にはこちらのようにコードを修正すると正しく動作しました。

      マウスオーバー部分のコードを以下のように修正してみてください。
      修正前: .entry:hover
      修正後: #homemain .entry:hover

      よろしくお願いします。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑