【 QooQ カスタマイズ 】 トップページの記事リンクのカスタマイズ 【 ホバーアニメーション 他 】

こんにちは！ HARU（ @HARU ）です。

今回は Blogger のテンプレートである QooQ の、トップページの記事リンクについてカスタマイズしてみました。

リンク範囲の拡大やホバーアニメーションを使ったカスタマイズなので、いろいろなことに応用できるかと思います。是非、参考にしてみてください。

記事リンク範囲の見直し

テンプレート QooQ はデフォルト状態だと、トップページからの記事リンク範囲が画像の場所、タイトルの場所と分かれています。

リンク範囲が分かれていること自体は、それほど気にすることではありません。

しかしユーザビリティの観点、この後やりたかったホバーアニメーションを付けるために、記事リンク範囲の変更を行います。

記事リンク範囲変更後イメージ

リンク範囲（ クリックできる場所 ）をサムネイル画像 + タイトル全体に変更することで、クリックのしやすさを追求しました。

HTML 編集

<article class='list-item'>

  <div class='list-item'> <!-- 追記 -->
  <article> <!-- クラス削除 -->
  <!-- 省略 -->
  </article>
  </div> <!-- 追記 -->

  <div class='list-item'>
  <article>
  <!-- 省略 -->
  </article>
  <a expr:href='data:post.url'/> <!-- 追記 -->
  </div>

  <div class='list-item'>
  <article>
  <!-- 省略コード内 <a expr:href='data:post.url'> と </a> を削除 -->
  </article>
  <a expr:href='data:post.url'/>
  </div>

CSS 変更

CSS.list-itemの変更を行います。

  .list-item{
    flex-basis: 49.5%;
    margin-top: 8px;
    border-radius: 3px;
    background: $(other.back);
    position: relative;	/* 追記 */
    z-index: 1;	/* 追記 */
  }

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

先ほど編集した CSS.list-itemの近くに記述すると、メンテナンス性もいいと思います。

  .list-item >a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2;
  }

記事リンクにホバーアニメーションを追加

マウスオーバーすることで、対象物が誇張するアニメーションを追加しました。いわゆるホバーアニメーションというやつです。

クリック対象物が分かりやすくなりますので、ユーザビリティの向上に繋がります。

ホバーアニメーションイメージ

マウスオーバーすると、記事リンクが飛び出るようにしました。

他のアニメーション（ 透過など ）にすることも可能です。

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

CSS.list-itemの近くに記述すると、メンテナンス性もいいと思います。

  /* 記事リンクホバーアニメーション */
  .list-item:hover {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(-0.1875em);
    transition: all 0.3s ease 0s;
  }

記事リンク内のカテゴリ見直し

上記、記事リンクカスタマイズを行うと、記事リンク内にあるカテゴリボタンが押せなくなります。

カテゴリボタンを押せるようにすると同時に、こちらもホバーアニメーションでカスタマイズしたいと思います。

カテゴリボタン　カスタマイズイメージ

こちらも記事リンクと同様に、マウスオーバーでアニメーション（ 透過 ）するようにしました。

記事リンク上にあるので、ボタン押し間違い防止に寄与すると思います。

CSS 変更

CSS.list-item-category-itemの変更を行います。

  .list-item-category-item{
    display: block;
    margin-top: .1em;
    margin-left: .1em;
    /*削除 padding: .3em 1em; */
    border-radius: 2px;
    background: $(brand.color);
    color: $(brand.font);
    position: relative; /* 追記 */
    z-index: 3; /* 追記 */
  }

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

先ほど編集した CSS.list-item-category-itemの近くに記述すると、メンテナンス性もいいと思います。

  .list-item-category-item >a{
    display: block;
    padding: .3em 1em;
  }
  /* カテゴリホバーアニメーション */
  .list-item-category-item:hover {
    opacity: 0.6;
  }

まとめ

今回のカスタマイズは HTML 初心者には難しめかもしれません。

わからないことがあったらコメントください。できる限りサポートします！

今回のカスタマイズにも関係しますが、テンプレート QooQ はリンク範囲の変更がひと手間必要なイメージがあります。

「ラベル」や「前（ 後 ）の投稿」ボタンなども、よく見ると文字にしかリンクが無いので、ボタン全体に変えていきたいと思います。

その他