Lazyloadを使ってみる【中級編】

先回までの流れは以下のリンクから 【必読】

はじめに

私の制作したテンプレートでも 全文表示タイプには基本ファイルの導入はありません。
上記ページを参照し、土台となるファイルをご自身で追加して頂く必要があります。
また、要約表示タイプの一部も未導入です。
対象ファイルが存在しない場合にはやはりご自身での追加をお願いします。

個別記事での基本的な使い方は既に初級編の方に記してありますのでご参照ください。
今回はさらに「関連記事リスト」「新着記事リスト」への適用の説明です。
ブログ個人設定, html編集, CSS編集が必須 ですから便宜上「中級」とカテゴライズしています。

で、その前に効果の程を検証してくださっているユーザーさんがおられますので是非ご覧ください。
常連選手のぼっちんさんです(笑)

ぼっちんさんが書かれている通り、使うと使わないとでは大きな違い が出ますし、要約タイプをご利用であれば土台は整っていますので積極的にご活用頂ければと思います。

但し 自分には記事の管理は難しい… とお感じになる方は 辞めておいたほうが良い というのはお伝えしておきます。
そして テンプレートをコロコロ変更するという方にも向きません。
(もちろん自己責任で管理ができるのであればその限りではありません)

関連記事リストにlazyloadingを適用

1. htmlの作成及び追加
2. CSSの追加
3. ブログ個人設定の変更

おおまかに上記の3つが必須です。

手順その1: html基本ソースコードの追加

<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
  <dt class="relate_dt">関連記事</dt>
  <dd class="relate_dd">
    <ul class="relate_ul">
      <!--relate_list-->
      <!--relate_entry_other-->
      <li class="relate_li">
        <div class="related-overlay"></div>
        <span class="relate_entry_thumbnail">
          <a href="<%topentry_relate_url>">
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload add-bg" data-src="<%topentry_relate_thumbnail>" alt="">
          </a>
        </span>
        <span class="relate_entry_title">
          <a href="<%topentry_relate_url>" class="relate_entry_title_text"><%topentry_relate_title></a>
          <span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
        </span>
      <!--/relate_entry_other-->
      <!-- 注)閲覧中記事を除く場合はここから削除 -->
      <!--relate_entry_now_showing-->
      <li class="relate_li_nolink">
        <div class="related-overlay"></div>
        <span class="relate_entry_thumbnail">
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload add-bg" data-src="<%topentry_relate_thumbnail>" alt="">
        </span>
        <span class="relate_entry_title">
          <span class="relate_entry_title_text"><%topentry_relate_title></span>
          <span id="relate_entry_nowread">【現在閲覧中】</span>
          <span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
        </span>
      <!--/relate_entry_now_showing-->
      <!-- 注)閲覧中記事を除く場合はここまで削除 -->
      <!--/relate_list-->
    </ul>
  </dd>
</dl>
<!--/relate_list_area-->

上記内容をテンプレートのhtmlソースにある <!--/more--> の直下に貼り付けます。
htmlを直接記しますので比較的自由な場所に設置することができますが、そこは個人のカスタマイズの範疇としてここでは説明は行いません。
各記事の下(記事本文(本文+追記) → SNS関連ボタン → ココに関連記事リスト) に表示されます。

html内容はFC2ブログデフォルトとほぼ同じ内容です。

ご覧頂くとわかる通り、かなり冗長で効率の悪い(ごめんなさい)構文内容ですが、ここは同じにしておかないと各テンプレートに含まれる自動出力用の関連記事に係るCSSが全て無効になってしまいます。
無効になるということはCSSも全て1から書き直さないといけなくなる、ということですね。
そこまでサポートできませんので既に記載されているCSS内容を活かせるようにデフォルト踏襲という形を取っています。
全て自分でできるという方は自由にして頂いて構いませんがお手伝いは致しませんので自己責任で。

蛇足ですがデフォルト内容の弁護。
FC2ブログの運営側では、こういったhtml構文を作成する際に「ユーザー任意のクラス名などと被らないようにする」という点に留意しているはずです。
そしてブログ個人設定で切り替えが可能な要素に対しては「クラス名の流用」も考慮する必要があります。
例) サムネイル表示「あり」「なし」の切り替え --- 双方のスタイルの一部はクラス名の流用が行われています。

こういった事情でどうしても複雑で長ったらしい内容にはなってしまいますね。
なのでFC2運営のhtmlソースがクソというわけでは決してありません(笑)

手順その2: テンプレートのhtmlから一部削除

related-overlay

で検索されますと、html内に1箇所ヒットすると思います。
それを目印に、以下の内容を 削除 します。

<!--permanent_area-->
<script>$('#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg').before('<div class="related-overlay"></div>');</script>
<!--/permanent_area-->

上記内容が含まれないテンプレートもあります。
存在しない場合にはこの手順は不要です。

手順その3: CSSの追加

/* with thumbnail */

で検索するとCSS内に1箇所あります。このすぐ上に以下の内容を追加。

/* official */
#fc2relate_entry_thumbnail_area.relate_dl,
#fc2relate_entry_thumbnail_area .relate_dd,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li_nolink {
  display: table;
  margin: 0;
  background-image: none;
  padding: 0;
}

#fc2relate_entry_thumbnail_area .relate_entry_thumbnail {
  width: 80px;
  height: 80px;
  padding: 4px 0;
  display: table-cell;
  vertical-align: middle;
}

#fc2relate_entry_thumbnail_area .relate_li .relate_entry_thumbnail a,
#fc2relate_entry_thumbnail_area .relate_li_nolink .relate_entry_thumbnail a{
  display: block;
  padding: 0;
  margin: 0;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {
  margin: auto;
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 30;
  vertical-align: middle;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail a {
  text-decoration: none !important;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
  border: 1px solid #ececec;
  width: 88px;
  height: 88px;
}

#fc2relate_entry_thumbnail_area .relate_entry_title {
  display: table-cell;
  padding-left: 1em;
  vertical-align: middle;
  line-height: 1.2em;
}

#fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text {
  display: inline-block;
  max-height: 3.5em;
  overflow: hidden;
}

#fc2relate_entry_thumbnail_area .relate_entry_date{
  display: block;
  font-size: 80%;
  opacity: 0.8;
  margin-top: 6px;
}

#relate_entry_nowread {
  display: block;
}

必ず目印よりも「上」に記載してください。
こちらもFC2運営が用意しているデフォルトの内容です。
これからブログ個人設定で自動出力を無効化しますので、足りないCSSを補う作業です。

手順その4: ブログ個人設定の変更

該当設定は以下のリンクから。
関連記事リスト 表示場所

「関連記事リスト 表示場所」を テンプレート変数のみ に変更します。

ここまででほぼ終了ですが、テンプレートによってはまだ若干の作業が必要なものもあります。
その場合にはお知らせ頂ければ出来る限り対応します。
繰り返しますが他者製作テンプレートであったりカスタマイズする場合などはサポート対象外です。

テンプレート毎にデザインが異なりますので、最終的な見た目はテンプレート依存です。
上記手順を踏んで頂くことでデフォルトスタイル(私がスタイリングした内容)になります。

テンプレートによってはスマートフォンなどでリストが横スクロールに変更になるものがあります。
そのタイプの場合には 横スクロールでもlazyloadingが効く という点をお伝えしておきます。

関連記事リストをたくさん表示している方はかなり負荷を減らせるはずですので、是非ご利用ください。

新着記事リストにlazyloadingを適用

こちらは FC2ブログプラグイン の修正で、テンプレート内容は触りませんのでご注意ください。

プラグイン未導入の方は以下のリンク先から入手してください。
公式プラグイン追加 (PC用)

遷移先ページにある 最新記事 (サムネイル付) を追加します。

手順その1: html内容の変更

詳細 > HTMLの編集
を開き、デフォルト内容を以下の内容に置き換えます。
追加でなく置き換え・差し替えです。

<div id="recent-list">
  <!--recent-->
    <div class="recent-item">
      <a class="recent-link" href="<%recent_link>">
        <div class="recent-thumbnail">
          <!--recent_body_img-->
          <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%recent_image_url>" alt="" data-sizes="auto">
          <!--/recent_body_img-->
          <!--recent_body_img_none-->
          <div class="recent-no-image-text">No image</div>
          <!--/recent_body_img_none-->
        </div>
        <div class="recent-text">
          <div class="recent-title"><%recent_title></div>
          <div class="recent-date"><%recent_year>/<%recent_month>/<%recent_day></div>
        </div>
      </a>
    </div>
  <!--/recent-->
</div>

上記html内容はFC2運営提供のものは無関係で私が自分の都合で作ったものですので不備などあれば私の責任です(笑)

手順その2: CSSの追加

テンプレート内容は変更しないよ、と書きましたが、CSSをstyle要素として置きたくないという方もいらっしゃるかもしれません。
html5.2以降はbody内でのstyle要素記載がvalid(正当)となりましたが、気になる方はスタイルシートの末尾に追加してください。
スタイルシート掲載の場合にはテンプレート変更時に移設作業が伴う点をお忘れなく。
style要素で構わない、という方は先程編集したプラグインのhtml内容のすぐ下に続けてペーストしてください。

<style>
.recent-item {
  margin: 0 auto 8px;
}

.recent-link {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.recent-thumbnail {
  display: table-cell;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 2px;
  line-height: 80px;
  vertical-align: middle;
}

.recent-thumbnail img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  object-fit: cover;
  object-position: center center;
  font-family: 'object-fit: cover; object-position: center center;';
}

.recent-no-image-text {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 2px;
  background-color: rgb(240,240,240);
  color: rgb(51,51,51);
  font-size: 10px;
  line-height: 80px;
  text-align: center;
}

.recent-text {
  display: table-cell;
  padding-left: 10px;
  vertical-align: middle;
}

.recent-title {
  margin-bottom: 5px;
  line-height: 1.3;
}
</style>

スタイルシートへ記載する場合はstyleタグを削除してください。

styleタグというのは <style> と </style> のことです。

iframe要素にもlazyloading適用が可能です

ここまでの作業で「関連記事リスト」「新着記事リスト」もlazyloadingが有効になりました。
そしてプラスアルファ。
記事内で動画を扱う場合 や サイドメニューに動画を常駐させている場合
に利用しない手はないですね。

記事内は動画を掲載する都度、サイドメニュー常駐の場合はプラグインフリーエリアだと思いますのでプラグインのhtml編集作業を一度。
記述するのは以下のような内容になります。画像の場合と殆ど変わりません。

<iframe class="lazyload" data-src="アドレス"></iframe>

画像と違い、src属性が無くてもバリデートエラーにはなりませんので上記の形でOKです。
動画は画像と比較して処理すべき内容が非常に多いので、やはり積極的に利用すると良いんじゃないかな、と。

ついでに私のテンプレートの場合には動画をレスポンシブ化するための独自クラスが入れてあります(全部ではないが)ので、以下のようにされますとより快適に閲覧してもらえると思います。

<div class="box-for-video" style="max-width: 横幅px;"><iframe class="lazyload" data-src="アドレス"></iframe></div>

以下はそれぞれをスマートフォンで見た際のスクリーンショットです。

2018.7.2 追記(iframeの追加情報)

lazysizesで掲載したYouTubeがiOSで再生できない件について - カスタマイズ

うーーん。これは困りました (´・ω・｀) lazysizesで遅延読み込みを指定しているYouTubeがiPhoneで再生できないようです。 「YouTubeが」「iOSで」と書いていますが、その他動画サービス及びAndroid OSでは未検証なのでこの表現を取っています。...

vanillaice000.blog.fc2.com

追記ここまで

まとめ

今回の内容にチャレンジしてみようという方は、初級編 の見出し「テンプレート内に記述」の中にある 独自変数の適用 を熟読してください。
必要なページ種でJSが稼働するような変数操作が要りますので、自身の環境や希望と照らされまして最適と思われる状態にしてください。

他にもlazyloadingが適用できそうな要素があなたのページ上で見つけられるかもしれません。
例えばサイドメニューのプロフィールに含まれているデコメ。
例えばランキングバナー。
あらゆる画像はlazyloadingに変換が可能です。そしてあらゆるiframe要素も。
当然ですが html内容の任意操作が可能な要素に限ります。
例えばFC2動画などはiframeであってもJSで出力するタイプですので操作ができません。

くれぐれも記事は段階を踏んで熟読されますようお願いします。
実践前の注意点は特に必読です。

次回は最終となりますが、上級編として「htmlレスポンシブ(picture要素)」の説明やlazyloading専用の「ブログカード」と過去記事救済用の「手助けブックマークレット」の配布など予定しております。

Instruction Lazyloading Lazysizes VanillaJS 高速化 中級者向け