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

vanillaice (Akira)

vanillaice (Akira)

FC2ブログで画像遅延読み込み (以下 lazyloadingと称する) を 関連記事リストと新着記事リストにも適用 してみようの巻 (o'ω')ノ

例によってweb一般の説明記事ではなく、

  • FC2ブログで
  • 私の製作したテンプレートをご利用の方

という条件下・狭い対象へ向けての記事内です。

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

FC2ブログでのLazyload導入の仕方と注意点【検討編】 - カスタマイズ

Lazyloadは自分との闘いです(笑) まず最初に、初心者向け説明記事ということで、なるべく平たく細かく説明できれば良いな、と思います。 「Lazyloadが何か知らない。読み方もわからない (∵`) 」を出発点にして自ら説明のハードルを上げるワタクシ((((笑) 説明すべき点がたくさんありますので、かなりの長文になりますから記事も数回に分けようと思います。 導入の具体的な手順は最終の記事にしますので、それまでの説...

Lazyloadを使ってみる【初級編】 - カスタマイズ

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。 また、ご質問についても私のテンプレートをご利用頂いているユーザー様に限定させて頂きますことを予めご了承ください。 一部汎用的に使える内容もありますが、ご紹介...

はじめに

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

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

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

FC2ブログでLazyLoad(画像遅延読み込み)の利用効果に驚愕した - jQueryプラグイン

前記事で LazyLoad(画像遅延読み込み) 導入についての記事を書きました。 FC2ブログでAkira先生のLazyLoad(画像遅延読み込み)が”えぐい”ぞ~♪ - jQueryプラグイン弊記事には先ずは Lazy Load(レイジーロード) の利用効果サンプル画像を最初に載せておりますのでご承知下さい。 【 Lazy Load 利用の効果サンプル画像 】 弊ブログには エンターページ(表紙)とトップページ があります。 ...oops0011.blog.fc2.com この ...

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

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

関連記事リストに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>

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

レスポンシブ化したYouTube(縦横比が正確)
通常掲載YouTube(縦横比崩れ)

まとめ

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

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

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

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

関連記事

Comments 5

There are no comments yet.

ぼっちん  

待ち焦がれておりました

いやぁ、嬉しいです、この記事 (^_^)ニコニコ 
LazyLoad前記事よりずっと指をくわえて待ち焦がれておりましたから(笑)
実は、待ちきれなくて(笑)自分で「最新記事 (サムネイル付)」にLazyLoad導入を作り始めていたんですけど「(~ヘ~;)ウーン ここ、どうやって処理しようか~ (^^;; アセアセ」なんて悩みまくっていた最中だったんです (^^ゞポリポリ
ナイスタイミングで公開してくださって嬉しい限りです、ほんとにありがとうございます m(_ _)m

ところで、弊記事にブログカード張ってくださってありがとうございます (^_^; アハハ…
LazyLoad効果のだいぶお恥ずかしいサンプル画像を貼ってしまってありますから、皆さんに読まれてしまうと赤面しちゃいます(爆)

さてさて、時間を見つつ本記事を参考にLazyLoad効果を更に広げて「キャッシュ利いてない?キャッシュ要らないよね(笑)」的実証をしたいと思っております(笑)

2018/04/19 (Thu) 13:46 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぼっちんさん

ぼっちんさん、こんにちは ('0')/

先回の初級編からちょっと時間空いてしまいました。すみません ^^;
今ChromeのJSに変更というかバグ(のようですね。どうも)があって、バージョンアップを2段階待ちましたが改善されないようで。
このまま待っても無理かなぁと思いますのでUPしました。
とりあえず既存のテンプレで導入済みのものについてはこのバグには引っかかっていないでよほど問題ないと思います。

関連記事についてはたぶんAxisも細かい追加が必要じゃないかと思いますが、その際はお尋ねくださいね。

サンプル画像、十分わかりやすいと思いますよ。いつもありがとうございますー

2018/04/19 (Thu) 14:07 | EDIT | REPLY |   

ぼっちん  

【中級編】

Akiraちゃん、おはようございます ^^

【中級編】導入作業を完了致しました ^^
おかげさまで個別記事ページのGTmetrix評価もグンと良くなってニンマリしてます、どうもありがとうございます(笑)
ただやっぱり弊ブログサイドバーに設置してあります、例の「livedoor 相互RSS」の負荷が大きく、これをなんとかしないと、、、(^_^; アハハ…
スッパリと外してしまえば当然大きなスコアアップにはなるのは確認済みなんですけど、私もブログのお友達もこの「livedoor 相互RSS」から各ブログの更新記事にアクセスしてくれる人が多く便利に利用してくださっているものだから、安易に外せなくなってしまってもいるんですよね。
それは本記事には関わらないことですから独り言なんですけど (^^ゞポリポリ

さて、機会を見て、もっともっとLazyLoad効果をアピールする記事を書きたくなりしたよ(笑)

2018/04/20 (Fri) 09:20 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ぼっちんさん

ぼっちんさん、こんにちは (o'ω')ノ

外部サービスウィジェットはどうしてもそうなりますよね。
ウィジェット系がサイドメニューにてんこ盛りになっているブログも見かけます(笑)
ここはもう「本当に必要かどうか」を管理人が熟考する意外には無いですよね (´・ω・`)

2018/04/21 (Sat) 15:30 | EDIT | REPLY |   

www.linux.net  

Wһenever you elect to freelance, you will also
be in cһarge of your own schedule. As a subѕtitute off being boujd to the 9-to-fiѵe work day
of most regulation places of work, each your daily sсhedule and your calendar aѕ a compⅼete might be
largely up to you. Whether or not its worthwhile too take dday
off, or whether οr not you want to tackle a heavier worklоad, freelancing wiⅼl meet your needs.

2018/05/16 (Wed) 19:13 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート