Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【はてなブログ】「UnderShirt」トップページのリンクを拡張してみた

f:id:Kiwham16:20190129232407j:plain

はてなブログでも人気があるテーマ「UNDER SHIRT」。
私も好きなレイアウトで、使わせていただいています。

そんな「UNDER SHIRT」のトップページはカードレイアウトになっていますが、ブロックエリアの割に、リンクが少々押し辛いなと思ったので、今回少しカスタマイズしてみました。
サイトの使いやすさを求める際に、リンクエリアをしっかりと設けてあげるというのは大切なポイントです。

そもそものリンクエリア

f:id:Kiwham16:20190130101407j:plain

トップページの各ブロックエリアは青枠になりますが、リンクエリアは赤枠の画像とタイトル部分のみ。
下のディスクリプション部分にはリンクが付与されていません。
ディスクリプションのボリュームが場合によって増えたりすると、エリアの割に、リンクエリアが限定されており、使い勝手としては少々気になる所です。(※職業柄のせいかもしれませんが…)
今回はこの青枠全体をリンクエリアにするというカスタマイズです。

ブロック全体にリンクエリアが設けられていない理由としては、エリアの中には「はてなスター」であったり、左のブロック内に「リンク1」「リンク2」というテキストがあるように、さらにいくつかのリンクを付与したい場合に、細分化して設定ができるようにしているからだと思われます。
(※ブロック全体をリンクエリアにしつつ、さらに上記の別リンクもそれぞれ押せるようにすることはできなくはないですが、結構無理やりな感じになる。)

注意点

あくまでこちらの手法に関しては、シンプルに「他に配置したいリンクもなく、はてなスターも置く予定が無い。記事詳細ページへのリンクを大きく配置したい」という方向けになるので、そちらに関しては予めご了承ください。(※厳密に言うと、「はてなスター」は処理されます。リンクエリアをクリックすると、詳細ページに遷移しますが、トップページに戻ると、リンクスターが押されている処理になっています。)

全体をリンクエリアにしつつ、さらに個別のリンクもクリックできるような処理に関しては、また別で検証してみたいと思います。

今回やること

f:id:Kiwham16:20190130182436j:plain

今回やろうと思っているのは、、、

  • ブロック全体をリンクにする!…①
  • カテゴリーのアイコンはクリックさせなくても良い…②
  • はてなスターはSEOに多少影響ありそうなので外す

です。

カテゴリーもクリック出来ると尚良かったのですが、現状のソースコードの構成から見直す修正が発生するので、現在検証中です。

カテゴリー&パンくずの多階層化のためのjsを導入しているのですが、そいつとバッティングしているのが原因のよう。

修正箇所

今回はcssjavascript(jQuery)を使用して実装を行います。

javascript(jQuery)

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!--リンクエリア拡張-->
<script>
$(function(){
  $(".archive-entry").click(function(){
    window.location=$(this).find(".entry-thumb-link").attr("href");
    return false;
  });
});
</script>
<!--リンクエリア拡張-->

2行目のjQueryのライブラリファイルの読み込みに関して、既に他で読みこんでいるという場合は重複して読みこませる必要はありませんので、3行目以降のみをコピペして下さい。
また、1、3、8行目は所謂コメントアウトでメモ代わりに記述しているものなので、削ってしまっても、実装自体に影響はありません。

こちらを「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」内に追記して下さい。

css

.page-archive .archive-entry {
   transition: 0.5s;
}
.page-archive .archive-entry:hover {
   background-color: #e9f2fe;
   cursor: pointer;
}
.page-archive .archive-entry:hover .entry-title-link {
   color: #0f668f;
}

こちらを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインcss」内に追記して下さい。

内容を簡単にお伝えします。
説明の関係上、行数が前後するのはご了承ください。

5~6行目…ブロックエリアにマウスを乗せた時に、リンクエリアに入ったよという事を分かりやすくするために背景の色を変えています。また擬似的にリンクエリアを広げており、エリア内にマウスを乗せても、ポインタがリンクを示す指マークではなく、矢印マークのままになるため、そちらを強制的に指マークに変更するためにcursorプロパティを記述しています。

3行目…6行目で変化させる背景色をふわっとオシャレに変化させるために、アニメーションの記述しています。

9行目…こちらはやってもやらなくても、という所ですが、リンクエリアに入ったら、タイトル部分のテキストの色も変更したかったので、こちらの記述をしています。不要な場合は、省いてしまってOKです。

まとめ

初めてのカスタマイズに関する記事です。
検証はしっかりと行った上での投稿ですが、もし実装の際に不具合があれば、是非コメント欄にて指摘をいただきたいです。
必要に応じて、修正版をアップしていきます。