はてなブログ無料版: トップページを魅力的にカスタマイズする方法③

③Animate.cssによる
スライドアニメーションとホバー効果2

この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。Intersection Observer（交差検知）とAnimate.cssライブラリを使って、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーションを付与します。

HTML、CSS、JavaScriptのコーディングについては丁寧な解説を心掛けました。本記事が、ブログやサイトをより魅力的にするカスタマイズのヒントとなれば幸いです。

affordable design product — https://pixabay.com/users/geralt-9301/

振り返り
デモページ
今回のカスタマイズ
- Recommended
- Leisurely Enjoy.
カスタマイズのポイント
ライブラリのCDN
- Animate.css
- jQuery
ソースコード
アレンジ
- アニメーションの速度調整
おさらい
- コードのまとめ
おわりに

振り返り

前回、前々回の記事では、はてなブログ無料版でトップページをカスタマイズする方法について、主に基本的な設定部分と画像カードへのスライドやホバーアニメーションの実装方法などを紹介しました。

rubirubi.hateblo.jp

今回も引き続き、トップページのカスタマイズを紹介させていただきます。今回紹介するのは、オススメ記事やページへのバナー部分のカスタマイズです。下記にあるデモページ内では見出し「Recommended」、「Leisurely Enjoy.」のブロックにあたります。

デモページ

デモページを見る

今回のカスタマイズ

Leisurely Enjoy.

カスタマイズのポイント

前回の記事で紹介した「Meet The Team」セクションと同様、Intersection ObserverとAnimate.cssライブラリを利用して、要素（記事ページへのリンクバナー）をスクロールに応じてスライドアニメーションさせています。

またバナーへのマウスホバー時に、画像の明度やスケールがスムーズに変化するアニメーション効果も実装しています。

「Animate.cssとは？」はてなブログ無料版: トップページを魅力的にカスタマイズする方法② - hatebcustom

ライブラリのCDN

以下のCDNコードをheadなどに配置することによって、それぞれのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。

Animate.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

jQuery

<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>

主にAnimate.cssはCSSアニメーション、jQueryはJavaScriptコードの簡素化に利用しています。

ソースコード

HTMLの構造

コードはこちら（GitHubサイトへ）

構造としては、大きく「Recommended」と「Leisurely Enjoy.」という2つのセクションに分かれています。
Recommendedセクション内はさらにtop-banner4とtop-banner3というクラスを持つ3つのブロックに分かれており、リンク付きサムネ画像を内包します。
Leisurely Enjoy.セクション内にはtop-banner2というクラスを持つブロックが1つあり、同様にリンク付きサムネ画像を内包します。
top-banner3ブロックでは画像にテキストが無いケースを想定し、「figcaption」に記述したテキストを画像中央に記事タイトルとして表示させています。
自身のサイトに組み込む場合は、コード内の「ページへのＵＲＬ」や「サムネ画像のＵＲＬ」の部分を、適切なものに差し替えて下さい。
また要素を増減したい場合は、下記の構成をコーディングの参考として下さい。例えば、ブロックを増やすなら<ul>タグで囲んだひと固まり、記事を増やすなら<li>タグで囲んだひと固まりを複製します。

<!-- ブロック① -->
<ul class="top-banner">
    <!-- 記事① -->
    <li> <a href="ページへのＵＲＬ">
        <img src="サムネ画像のＵＲＬ">
      </a> </li>
    <!-- 記事② -->
    <li> <a href="ページへのＵＲＬ">
        <img src="サムネ画像のＵＲＬ">
      </a> </li> 
</ul>
<!-- ブロック② -->
…

CSSスタイル

コードはこちら（GitHubサイトへ）

コードの解説

下記に、ポイントとなるプロパティを、各スタイルごとにコード内表記で解説しています：

解説が開きます

/* 1: 各ブロック用スタイル */
ul.top-banner2, ul.top-banner3, ul.top-banner4 {

  /* 中略 */

  list-style: none;
  display: flex;
  justify-content: space-between;
  /* デフォルトのリストスタイルの削除（リスト前のmarkerを消す）、flexコンテナの作成など */
}

/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */

/* 2: top-banner2内のリストスタイル */
.top-banner2 li {
  width: calc(100%/2 - 10px);

  /* 中略 */

  padding-bottom: calc(100% / (2 * 1.454));
}

各リスト幅を全体の半分にして10pxマイナスし、アスペクト比を「1.454 : 1」に設定

/* 3: top-banner3およびtop-banner4内のリストスタイル */
.top-banner3 li, .top-banner4 li {
  width: calc(100%/ 2 - 10px);

  /* 中略 */

  padding-bottom: calc(100% / (2 * 1.777));
}

各リスト幅を全体の半分にして10pxマイナスし、アスペクト比を「1.777 : 1」に設定

/* 4: top-banner2およびtop-banner4内の画像のスタイル */
.top-banner2 img, .top-banner4 img {

  /* 中略 */

  transition: transform .3s ease-in-out;  /* ホバー時のアニメーションを設定 */
  filter: brightness(.9);  /* 明度を90%に下げる */
}

/* 5: 画像のホバーエフェクト */
.top-banner4 :hover img, .top-banner3 :hover img, .top-banner2 :hover img {
  transform: scale(1.03);  /* スケールを少し大きく */
  filter: brightness(1.1);  /* 明度を110%に上げる */
}

/* 6: mceNonEditableクラスを持つfigureのスタイル */
figure.mceNonEditable {
  display: contents;
  /* figureのコンテンツを親要素と同じように表示する */
}

「display: contentsは指定したタグのボックスを生成しない」

retval.jp

/* 7: mceEditableクラスを持つfigcaptionのスタイル */
figcaption.mceEditable {

  /* 中略 */

  word-break: auto-phrase;  /* 日本語テキストを分節に応じて自動改行 */
}

「word-break: auto-phraseは、日本語テキストで分節に応じた自動改行ができるCSSプロパティ値」

iwb.jp

上記したfigureタグとfigcaptionタグに対するスタイルは、top-banner3ブロックでの、テキストを画像中央に記事タイトルとして表示させるためのものです。

/* 8: 550pxまでの画面に対するメディアクエリ */
@media (max-width: 550px) {

  /* 中略 */

}

JavaScript

コードはこちら（GitHubサイトへ）

コードの解説

このJavaScriptコードは、ページが読み込まれたときにアニメーションをトリガーするためのものです。具体的には、ページの読み込み完了時にtop-bannerクラスを持つ各HTML要素がIntersection Observerで検知されると、その要素に動的にAnimate.cssクラスを追加します。

以下はコードの詳細解説です：

解説が開きます

$(document).ready(function() {
  // 対象となるバナー要素を選択
  const $banners = $('.top-banner4, .top-banner4.hai, .top-banner3, .top-banner2');

  // 各バナーに対してIntersectionObserverを適用
  $banners.each(function(index, banner) {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        // バナーが画面と交差した場合
        if (entry.isIntersecting) {
          // animate.cssのクラスを追加してアニメーションを開始
          banner.classList.add('animate__animated', 'animate__bounceIn');

          // 特定のバナーに応じて追加のアニメーションクラスを追加
          if (banner.classList.contains('top-banner4')) {
            banner.classList.add('animate__bounceInLeft');
          } else {
            banner.classList.add('animate__bounceInRight');
          }

          // 一度アニメーションが始まったらObserverを解除
          observer.unobserve(banner);
        }
      });
    }, { threshold: [0, .5] }); // 画面に表示されている割合が0または50%以上の場合にコールバックを実行

    // Observerをバナーに適用
    observer.observe(banner);
  });
});

解説：

$(document).ready(function() { ... });: ページが完全に読み込まれたときに実行されるjQueryのドキュメント準備完了のコード。
const $banners = $('.top-banner4, .top-banner4.hai, .top-banner3, .top-banner2');: 対象となるバナー要素をjQueryで選択し、それらを$bannersとして保存。
$banners.each(function(index, banner) { ... });: 各バナーに対してjQueryのeachメソッドを使用して繰り返し処理を実行。
const observer = new IntersectionObserver((entries, observer) => { ... }, { threshold: [0, .5] });: IntersectionObserverを作成。このObserverは要素が画面と交差した際にコールバックを実行する役割を果たす。thresholdパラメータはコールバックが発火する閾値を設定しており、ここでは0%と50%以上の二つの閾値が設定されている。
observer.observe(banner);: IntersectionObserverを対象のバナーに適用して監視を開始。
コールバック関数内:
- entries.forEach(entry => { ... });: Observerが監視している各エントリーに対して処理を実行。
- if (entry.isIntersecting) { ... }: エントリーが画面と交差している場合に処理を実行。
- banner.classList.add('animate__animated', 'animate__bounceIn');: animate.cssのアニメーションクラスを追加し、要素をアニメーションさせる。
- if (banner.classList.contains('top-banner4')) { ... }: 特定のバナーに応じて追加のアニメーションクラスを追加。
- observer.unobserve(banner);: アニメーションが始まったらObserverを解除する。それにより、同じバナーに対してはアニメーションが1度だけ実行される。

これにより、ユーザーのスクロールに応じて指定された要素が画面に表示されるごとに、順次スライドインアニメーションが適用されていきます。

アレンジ

アニメーションの速度調整

--animate-durationプロパティで秒数を指定することにより、アニメーションの持続時間を変更できます。

.animate__animated.animate__bounceIn {
  --animate-duration: 2s;
}

「CSS Custom Properties (CSS Variables)」Animate.css | A cross-browser library of CSS animations.

おさらい

コードのまとめ

Animate.css CDN: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
jQuery CDN: <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
HTML: （GitHubサイトへ）
CSS: （GitHubサイトへ）
JavaScript: （GitHubサイトへ）