みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

Tumblrイラストフォリオ4カスタマイズ【無限スクロール・サムネ表示・LightBox適応方法】

この度知り合いのイラストレーターがTumblrポートフォリオサイトを作ったので、JavaScriptの勉強がてら、何か追加でほしい機能がないか聞いたところ、

  • 無限スクロールを導入したい(イラストフォリオ3にはあるが、4にはない
  • 無限スクロールで表示された画像にはふわっとしたアニメーションをつけたい
  • イラストは画像クリックで画面に表示され、クリックで閉じるようにしてほしい(ライトボックス機能のこと)

と要望が返ってきました。

そこで、「無限スクロール導入済みのイラストフォリオ3でよいのでは?」と提案したんですが、「画像を均等に並べたい」とのことで、CSSをいじってなんとかしようと思ったものの、やはりJavaScriptでなんとかしたほうが良いと途中で方向転換し、イラストフォリオ4をベースにカスタマイズすることにしました。

サンプルサイトはこちら

サンプルサイト | Sub-blog-micche

ちょっとややこしいですがほぼコピペでできるので、もし同じような機能がほしくて悩まれている方がいれば参考にしていただけるかと思います。

カスタマイズでできるようになること

サンプルサイト参照→サンプルサイト

イラストフォリオ4の機能に、無限スクロールとLightBoxを追加した感じです。

注意項目

画像の投稿が必須です。
テキストだけや、その他の投稿では使えません。

シングルカラムモードでは使えません。

投稿は、Tumblrベータ版(サムネイル生成がしなくなった版)でもサムネイルが表示されるようになっています。
そのため、Crop Thumbnailsをオンにしてお使いください。

また、本文に記入したテキストがLightBoxの表示の際に表示されるようになっていますが、<p></p>タグに囲まれていないと機能しません。(普通に投稿すればつくので、問題ないと思います)

本文が2行以上の場合は一行目のみキャプションに反映します。

キャプションがついている投稿の場合は両方表示されます。

Thumbnails SizeはMサイズを推奨します。その他のサイズでは動作確認していません。他のサイズが良い方は、導入後、CSSで調整してみてください。

f:id:micche-labo:20211102110751p:plain
設定例

カスタマイズの事前準備

おそらくこれからカスタマイズされる方は、皆さんTumblrをお使いだと思うので、登録作業の説明は省かせていただきます。

イラストフォリオ4のテーマをインストールされていない方は、まずTumblrにインストールしてください。

テーマ「イラストフォリオ4」をTumblrにイントール

イラストフォリオ4を適応していない方はまずインストールしましょう。

イラストフォリオ4

f:id:micche-labo:20211101182200p:plain
イラストフォリオ4のインストール

お使いのTumblrにイラストフォリオ4を適応させたら、

  1. 無限スクロール
  2. LightBox
  3. サムネ作る

の順にやっていきましょう。
と、いいつつ、まとめてできるところはまとめてやっちゃいます。

Tumblrで編集する場所と画面の説明

編集する場所は、HTML、CSSTumblr側の設定。 あとファイルアップロードも必要です。

編集画面に入るには、

右上の人間マークをクリック、ウィンドウ下の方の「外観を編集」クリック。

f:id:micche-labo:20211101181442p:plain
Tumblrスクショ

「テーマの編集」クリック

f:id:micche-labo:20211101181817p:plain
Tumblrスクショ2

で、編集画面に入れます。

ここからHTMLの編集をする場合は、

「HTMLを編集」をクリック

f:id:micche-labo:20211101182747p:plain
Tumblrスクショ3

で編集画面に入れます。

CSSの編集をする場合は、同じ画面の一番下にある「詳細設定」をクリック

f:id:micche-labo:20211101183058p:plain
Tumblrスクショ4

カスタムCSSを追加

f:id:micche-labo:20211101183207p:plain
Tumblrスクショ5

に追加します。

また、ファイルアップロードの際は、「HTMLを編集」をクリック後、表示された画面の左上にある歯車マークをクリックし、「テーマアセット」クリックで「ファイルを追加」から追加可能です。

f:id:micche-labo:20211101214102p:plain
Tumblrスクショ6

Jsスクリプトについて

  1. 無限スクロール
  2. LightBox

に関しては便利なスクリプトがあるので、それをCDNやらアップロードやらで読み込み実行しています。

これから説明していきます。

今回利用した便利なスクリプト一覧

サムネイルの表示に関しては、イラストフォリオ4のベーススクリプトではInfiniteScrollで画像を読み込みした際に、サムネイルが生成できない為、新たに作り直しました。(再発火できると思ったができず…イラストフォリオ4が悪いのではなく、完全に私の力不足です)

既存のJavaScriptと作り直したJavaScriptが両方動いているとエラーになるので、もとのスクリプトは消しています。
そのため、画像投稿以外の投稿をされる方には今回のカスタマイズは向きません。(エラーになります)

ステップ1CDNの導入

まず以下のCDNを読み込みます。
挿入場所は</body>直前に。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<!--lightboxのjsアドレス要変更-->
<script src="アップロードしたあとアドレスをコピー&ペースト"></script>

上から順に、jQuery、InfiniteScroll、Masonry、imageLoadedのCDNです。

LightBoxのみ、ダウンロード後アップロードして使用します。
アップロードしたあとアドレスをコピー&ペーストの部分にはあとでアドレスをコピペします。

ステップ2 LIGHTBOXの導入

少し大変ですが、元々Tumblrで使われているLightBoxでは対応できなかったので、LightBoxの公式サイトからファイルをダウンロードしてきます。

ダウンロード後、ファイルをTumblrサイトにアップロードし、アドレスをコピーして使います

CSSファイルは編集するので、編集してからアップロードします。

ステップ2-1 ファイルのダウンロード・解凍・選別

はじめにLIGHTBOXのファイルをダウンロードします。

以下公式サイトリンクよりzipファイルをダウンロードしてください。

公式サイト
LIGHTBOX

ダウンロードは公式サイトの少し下にスクロールしたところにある「GETTING STARTED」から「Github Releases page」をクリックし、Githubのページを開いてから、

f:id:micche-labo:20211101211808p:plain
lightboxのページ

zipファイルをクリックし、PCに保存してください。

f:id:micche-labo:20211101212122p:plain
githubのページ

保存したzipファイルをクリックして解凍します。

f:id:micche-labo:20211101212833p:plain
zipファイルを解凍する

解凍したフォルダをクリックし、たくさんあるファイルの中から「src」という名前のフォルダを開きます。
このフォルダ以外は必要ないので消してしまっても構いません。

f:id:micche-labo:20211101212835p:plain
解凍したフォルダを開き、srcフォルダを開く

srcフォルダの中身は、

  • css
  • images
  • js

の3フォルダ。

さらにその中に、それぞれlightbox.csslightbox.jsと、画像ファイルが4つ入っています。

f:id:micche-labo:20211101224126p:plain
srcの中身

ステップ2-2 ファイルのアップロード

それではTumblr側で、各ファイル(css以外)をアップロードしていきます。

テーマの編集-HTMLを編集-歯車マーク-テーマアセットと進み、ファイルを追加から、lightbox.jsと、画像ファイル4つをアップロードします。

アップロード後、ファイル名をクリックして、アドレスをコピーしておきます。(クリックするとブラウザでアップロードしたファイルが開くので、コピーする)

もしくは右クリック-リンクのアドレスをコピーでも可。

f:id:micche-labo:20211101224823p:plain
右クリック→リンクのアドレスをコピー

コピーしたアドレスは、一旦メモ帳などに貼り付けておくと便利です。

ステップ2-3 lightbox.cssの編集とアップロード

次に、lightbox.cssを適当なテキストエディタで開き、画像ファイルのパス(アドレス)を変更します。

background: url()のカッコ内を、コピーしたアドレスにそれぞれ置き換えます。

76行目
../images/loading.gifをコピーしたアドレスhttps://static.tumblr.com/〜/〜/loading.gifに変更

f:id:micche-labo:20211102103620p:plain
css変更

107行目
../images/prev.pngをコピーしたアドレスhttps://static.tumblr.com/〜/〜/prev.pngに変更

f:id:micche-labo:20211102103622p:plain
css変更2

125行目
../images/next.pngをコピーしたアドレスhttps://static.tumblr.com/〜/〜/next.pngに変更

f:id:micche-labo:20211102103626p:plain
css変更3

189行目
../images/close.pngをコピーしたアドレスhttps://static.tumblr.com/〜/〜/close.pngに変更

f:id:micche-labo:20211102103630p:plain
css変更4

全て書き換えたら保存し、再びTumblr上でファイルをアップロードします。
アップロードし終えたら、lightbox.cssのurlもコピーしておきます。

ステップ2-4 HTMLの編集

次に、Tumblr上でHTMLを編集します。

編集内容は、

です。

head内に外部スタイルシート挿入

まずは<head></head>内に <link rel="stylesheet" href="コピーしたアドレス"> を挿入します。

コピーしたアドレスには、先ほどアップロードしたlightbox.cssのアドレスを入れてください。

挿入箇所は、以下のように、元々入っているstyle.cssの下あたりに入れてください。54行目あたりにあると思います。

・・・

<!--もともとあるスタイルシート-->
<link rel="stylesheet" type="text/css" media="screen" href="https://static.tumblr.com/〜/〜/style.css" />

<!--以下lightbox.css挿入-->
<link rel="stylesheet" href="コピーしたアドレス">

・・・
  

scriptのアドレス挿入

次に、ステップ1CDNの導入でいれた、

<!--lightboxのjsアドレス要変更-->
<script src="アップロードしたあとアドレスをコピー&ペースト"></script>

アップロードしたあとアドレスをコピー&ペースト部分に、lightbox.jsのアドレスをいれます。

f:id:micche-labo:20211102112006p:plain
script挿入例

リンクタグ編集

最後にリンタグを変更します。

204行目あたりにある、{block:ifNotSingleColumnMode}以下を編集していきます。これはシングルカラムでなければ、という意味です。そのため、シングルカラムモードでは機能しません。

少し下、210行目あたりに{block:Posts}というTumblr独自タグがあります。 「ここから投稿記事が表示される部分ですよ〜〜」というタグです。

この下の215行目あたりにある、{block:Text}直下の<a href="{Permalink}" class="post-content-anchor">タグを、<a href="{Permalink}" class="post-content-anchor" data-lightbox="thumbnailImg" data-title="">に書き換えます。

書き換え前

{block:Text}
    <a href="{Permalink}" class="post-content-anchor">
        <div class="post-content-wrapper">
            <div class="post-content-posttype">
                {PostType}
            </div>
        {block:Title}
            <div class="index-post-content index-post-title">{Title}</div>
        {/block:Title}
        </div>
    </a>
    <div class="index-post-content-text-body">{Body}</div>
{/block:Text}

書き換え後

{block:Text}
    <a href="{Permalink}" class="post-content-anchor" data-lightbox="thumbnailImg" data-title="">
        <div class="post-content-wrapper">
            <div class="post-content-posttype">
                {PostType}
            </div>
            {block:Title}
                <div class="index-post-content index-post-title">{Title}</div>
            {/block:Title}
        </div>
    </a>
    <div class="index-post-content-text-body">{Body}</div>
{/block:Text}

次に、そのすぐ下の230行目あたりにある{block:Photo}と、242行目あたりにある{block:Photoset}内を変更します。

どちらも<a href="{Permalink}"><a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}">に書き換えます。

書き換え前

{block:Photo}
    <a href="{Permalink}">
        {block:IfCropThumbnails}
            <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div>
        {/block:IfCropThumbnails}
        {block:IfNotCropThumbnails}
            <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img">
        {/block:IfNotCropThumbnails}
    </a>
{/block:Photo}

{block:Photoset}
    {block:Photos}
        <a href="{Permalink}">
            {block:IfCropThumbnails}
                <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div>
            {/block:IfCropThumbnails}
            {block:IfNotCropThumbnails}
                <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img">
            {/block:IfNotCropThumbnails}
        </a>
    {/block:Photos}
{/block:Photoset}

書き換え後

{block:Photo}
    <!--lightboxのリンク-->
    <a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}">                   
    {block:IfCropThumbnails}
        <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div>
    {/block:IfCropThumbnails}
    {block:IfNotCropThumbnails}
    <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img">
    {/block:IfNotCropThumbnails}
    </a>
{/block:Photo}

                  
{block:Photoset}              
    {block:Photos}
        <!--lightboxのリンク-->
        <a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}">
            {block:IfCropThumbnails}
                <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div>
            {/block:IfCropThumbnails}
            {block:IfNotCropThumbnails}
                <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img">
            {/block:IfNotCropThumbnails}
        </a>
    {/block:Photos}
{/block:Photoset} 

以上でLightBoxの主な設定は終了です。

LightBoxのオプション設定をする場合

一例ですが、</body>直前に以下のように記述すると、サンプルサイトのような動きになります。

※時間はms単位です。

<script>
//light box設定
lightbox.option({
    'positionFromTop': 100, //表示位置(ピクセル単位)
    'fadeDuration': 400, //ライトボックスコンテナとオーバーレイがフェードインおよびフェードアウトするのにかかる時間
    'imageFadeDuration': 400, //読み込まれた画像がフェードインするのにかかる時間
    'resizeDuration': 300, //違うサイズの画像を表示する時にリサイズする時間
    'albumLabel': "画像 %1 / %2", //全ての画像中何枚目の画像を表示しているかを画像の下に表示(総数表示)
    //総数表示がいらなければ以下の記述で消せる
    //'showImageNumberLabel':false; //trueで表示falseで非表示
    'wrapAround': true, //trueで最後まで到達したら最初に戻る
    'disableScrolling': true //trueで画像表示中にスクロール不可
});
</script>

画像何枚中何枚みたいな表示がいらなければ、'showImageNumberLabel' 左横のコメントアウト// を消して有効化してください。

その他のオプションは公式サイトで見てみてください。
公式
lokeshdhakar.com

ポイント

コードは<script src="https://〜〜lightbox.js"></script>より下に書いてください。

ステップ3 InfiniteScroll・Masonry・imageLoadedの導入

今回したInfiniteScrollはバージョン4です。

無限スクロールの実施には、HTMLの編集とCSSの編集両方行います。

ステップ3-1 HTMLの編集

まず、Masonry使用のためgridスタイルを適応させます。 ほぼInfiniteScrollの公式サイトよりコピペしています。

lightboxの時と同じく、{block:ifNotSingleColumnMode}以下を編集します。

grid用クラス付与とタグの追加

205行目あたりにある、<div class="top-post-container {select:Thumbnails Size}">を書き換えます。

編集前

{block:ifNotSingleColumnMode}
    <div class="top-post-container
          {select:Thumbnails Size}
         ">

編集後

{block:ifNotSingleColumnMode}
    <!--グリッドスタイルここから-->
    <div class="top-post-container {select:Thumbnails Size} grid are-images-unloaded">
    <!--サイズ調整用-->
    <div class="grid__col-sizer"></div>
    <div class="grid__gutter-sizer"></div>
    <!--サイズ調整用ここまで-->
Check!

グリッドスタイルを適応させるためにgridというクラスをつけ、あとでjavascriptを使いつけ外しする用のクラスare-images-unloadedを付与します。

<div class="grid__col-sizer"></div><div class="grid__gutter-sizer"></div>は、cssで余白を調整するためのクラスです。

次に211行目あたりにある<article class="post index-post {PostType}">を書き換えます。

編集前

<div class="index-post-wrapper {select:Thumbnails Margin}">
            {block:Posts}
              <article class="post index-post {PostType}">

編集後

<div class="index-post-wrapper {select:Thumbnails Margin}">
{block:Posts}       
<!--グリッドアイテム-->
<article class="post index-post {PostType} grid-item">
Check!

grid-itemクラスを投稿要素に追加しています。
読み込み時にこのクラスがついている要素が無限スクロールで追加される対象となります。

ロード文字用のタグ追加

InfiniteScrollの公式サイトでロード文字のアニメーションサンプルがあるので、それをそのまま使用します。

公式サイトのアニメーション例

542行目あたりにある{/block:IndexPage}の直前に挿入します。

f:id:micche-labo:20211102143018p:plain
ロード文字用タグ挿入位置

<!--ここからロード文字-->
  
<div class="page-load-status">
    <div class="infinite-scroll-request">
        <div class="loader-ellips">
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
            <span class="loader-ellips__dot"></span>
        </div>    
    </div>

    <p class="infinite-scroll-last">全て読み込みました</p>
    <p class="infinite-scroll-error">ページを読み込めません</p>
</div>

<!--ロード文字ここまで-->

ステップ3-2 JavaScriptの追加

ステップ1で追加したCDN<script src="〜"></script>の下に追加します。

<!--javascript追記-->
<script>
let grid = document.querySelector('.grid');

let msnry = new Masonry( grid, {
  itemSelector: 'none', // select none at first
  columnWidth: '.grid__col-sizer', //アイテムの横幅
  gutter: '.grid__gutter-sizer', //アイテム同士の間隔
  percentPosition: true, //CSSでサイズ調整する
  stagger: 30, //アイテムの表示時間の差。30で0.3s
  // nicer reveal transition
  transitionDuration: '0.8s',
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(50px)', opacity: 0 },
});

// imagesLoadedスクリプトでlayout各画像が読み込まれた後にトリガー
imagesLoaded( grid, function() {
  grid.classList.remove('are-images-unloaded');
  msnry.options.itemSelector = '.grid-item';
  let items = grid.querySelectorAll('.grid-item');
  msnry.appended( items );
});

// init Infinite Scroll
let infScroll = new InfiniteScroll( grid, {
  path: '.pager-next', //ロードするページのリンク
  hideNav: '.pager-next', //ナビゲーション要素を非表示に
  append: '.grid-item', //ロード時に追加する要素
  outlayer: msnry,
  status: '.page-load-status', //ロード文字
});
</script>
Question

公式サイトがデモで用意しているコードを参考にしています。

InfiniteScrollデモ

ステップ3-3 CSSの編集

テーマの編集詳細設定よりカスタムCSSを追加に以下のタグを全て貼り付けてください。

すでにCSSに何か追加されている場合はバックアップを取り、コードの続きに追加してください。

/*-------------
imageLoaded設定
---------------*/

/* 画像がロードされた後にグリッドを表示する */
.grid.are-images-unloaded {
  opacity: 0;
}

/* デフォルトで隠す */
.grid.are-images-unloaded .image-grid-item {
  opacity: 0;
}

/*----------
グリッドの設定
-----------*/

/* 3列 */
.post.index-post,
.grid-item,
.grid__col-sizer {
 width:calc(100% /3);
}

/* 余白なし */
.grid__gutter-sizer{ 
   width: 0%;
}

/* PCでは4列 */
@media screen and (min-width: 768px) {
  .post.index-post,
  .grid-item,
  .grid__col-sizer {
      width: calc(100% / 4); 
  }
}


/*------------
ロード文字の設定
--------------*/

/*ロード文字の位置を真ん中に*/
.page-load-status {
    text-align: center;
}

/*次のページがなかった場合はロード文字非表示*/
body.page-tag .page-load-status,
body.page-load-status{
    display:none;
}

/*---------------------
ロード文字アニメーション設定
-----------------------*/
.loader-ellips {
  font-size: 20px; /* ドットのサイズ */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* ドットの色 */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

モバイル端末では3列、それ以外の大きい画面では4列になるように設定しています。

余白は0にしています。(数値を入れないと縦一列に画像が並んでしまうので0にしています。)

読み込み時の画像の配置と合わせるため、テーマオプションの設定は、

  • Thumbnails MarginNone
  • Thumbnails SizeM

を選んでください。

また、サムネイルを作るための関係上、

  • Crop Thumbnails … オン
  • Single Column Mode … オフ

にしておいてください。

f:id:micche-labo:20211102163429p:plain
テーマオプションの設定

ロード文字は、次のページへのリンクがないとエラーになってしまうので、とりあえずcssで非表示にさせています。

後半はロード文字のアニメーションになります。

InfiniteScrollの公式サイトでロード文字のアニメーションサンプルがあるので、それをそのまま使用します。

公式サイトのアニメーション例

CSSを貼り付けたら、詳細設定の設定を画像を参考に設定してください。

f:id:micche-labo:20211102160436p:plain
詳細設定

画像を参考に、

  • リンク先を新規ウィンドウに表示する … オフ
  • デフォルトのモバイルテーマを使用 … オフ
  • Google AMPを有効にする … オフ
  • Truncate RSS feed … オフ or オン
  • Tumblrを広める … オフ or オン
  • Preview … 自分の投稿
  • ページごとの投稿 … 12 推奨

のように設定します。
ページごとの投稿は、モバイルでもパソコンでも横一列きれいにいつでも画像がきっちり並ぶのが12なので、12にしています。

これでInfiniteScrollの導入は完了です。
残すはサムネイル生成のみです。

サムネイル生成のプログラム※11/3修正

サムネイル生成のためのプログラムは、イラストフォリオ4のテーマアセットscript.js内に書かれています。

ですが、ロード時に再度要素を取得して値を書き換える必要があったので、今回はscript.jsは使わず、新たに書きました。

JavaScript勉強中ということでなんだか冗長ですが、とりあえず動きますのでどうぞ。

挿入位置は、先ほどInfiniteScrollのコードを入れたところの直下です。

f:id:micche-labo:20211102162513p:plain
サムネ生成コード挿入箇所

<script>
//==================
//初回読み込み時の設定
//==================

//postMediaPhotoに画像を取得し格納
let postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img');
//.post-content-anchorクラスを持つリンクを全て取得し格納
let postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor');

//一旦空の変数作る。ローディングのたびに取得し直す
let postContentWrapper;
let textBody;
let p;
let img;
let figure;
let cap;

//==================================
//ここからサムネイルとキャプション生成コード
//ロード時にも読み込む
//==================================

function thumbnail() {

    //aタグ分forEachで処理
    postInnerLink.forEach((link, index) => {
        //============================================
        //リンクタグ毎にサムネイル生成
        //============================================

        //index番目の画像アドレスを変数に格納
        img = postMediaPhoto[index].getAttribute('src');
        //linkタグに取得した画像アドレス挿入する
        link.setAttribute('href', img);

        //linkタグの中にサムネイルをねじ込む
        link.insertAdjacentHTML("afterbegin", "<div class='post-photo-thumb' style='background-image: url(" + img + "');'></div>");


        //============================================
        //サムネイルごとにキャプションをつける設定
        //============================================

        //キャプション用のpタグがあるdiv要素を全て取得し格納
        textBody = document.querySelectorAll('.index-post-content-text-body');

        //figure要素を取得(削除用)
        figure = document.querySelectorAll('.index-post-content-text-body figure');

        //取得した画像は消しておく
        figure.forEach((del) => {
            del.remove();
        });

        //div要素の最初の子要素を取得
        p = textBody[index].firstElementChild;

        //Captionがある場合は取得
        cap = postMediaPhoto[index].getAttribute('alt');

        //Captionの文字が初期文字imageでない場合にキャプションを入れる
        if (cap !== 'image' && p === null) {
            link.setAttribute('data-title', cap);
            //imagekでなくテキストがあった場合は両方表示させる
        } else if (cap !== 'image' && p) {
            link.setAttribute('data-title', cap + '<br>' + p.textContent);
            //imageかつテキストがあったらテキストのみを表示する
        } else if (cap === 'image' && p) {
            link.setAttribute('data-title', p.textContent);
        }

    });

    //最後にリンクタグについてたクラス除去
    postInnerLink.forEach((del) => {
        del.setAttribute('class', '');
    });

    //用済みなので消す
    postContentWrapper = document.querySelectorAll('div.post-content-wrapper');
    postContentWrapper.forEach((del, index) => {
        del.remove();
    });


    //ロードのたび取得することがないよう取得したテキストと画像を囲うdivは消しておく
    textBody.forEach((del) => {
        del.remove();
    });

}

thumbnail();

//=======================
//ここからロード時の設定
//=======================

//読み込まれたら変数に読み込み後取得した画像一覧を代入
infScroll.on('append', function (body, path, items, response) {

    postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img');
    console.log('postMediaPhoto更新');

    //.post-contentクラスを持つリンクを全て取得し変数に格納
    postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor');
    console.log('postInnerLink更新');

    thumbnail();

});
</script>

コメントアウトでいろいろかいてますが、ようはテキストタイプで表示されている要素の中にあるimgタグからアドレスを拾ってきて、リンクタグの中にdivタグを生成。
イラストフォリオ4のスクリプトと同じようにbackground-imageに拾ってきたアドレスを画像タグのsrcとリンクタグのhrefに入れています。

リンクタグに画像アドレスを入れたのは、LightBoxで画像を表示させるためです。

他、LightBox用に、クリックした時キャプションもしくは本文が表示されるようにif文でテキストがある時のみ、data-titlep要素をまるごと格納するように設定しています。

写真投稿の場合はキャプション取得でできるんですが、ベータ版のサムネ生成できないバージョンで投稿すると、テキスト投稿タイプになってしまい、キャプションタグが機能しないため、このコードを入れています。

取得後、不必要な要素は削除しています。
削除しないと、次にロードした際、また1から画像を取得してしまい、サムネイルとリンクが新しいものに更新されないためです。

これですべての導入が完了しました。

さいごにプログラム部分のコード全部載せる

<script></script>以降のコピペがうまくいっているかどうかの確認にどうぞ。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!--lightboxのjsアドレス要変更-->
<script src="https://static.tumblr.com/xndvfqy/Jnnr1tufx/lightbox.js"></script>

<!--javascript追記-->
<script>
let grid = document.querySelector('.grid');

let msnry = new Masonry( grid, {
  itemSelector: 'none', // select none at first
  columnWidth: '.grid__col-sizer', //アイテムの横幅
  gutter: '.grid__gutter-sizer', //アイテム同士の間隔
  percentPosition: true, //CSSでサイズ調整する
  stagger: 100, //アイテムの表示時間の差。100で1.0s
  // nicer reveal transition
  transitionDuration: '.4s',
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(80px)', opacity: 0 },
});

// imagesLoadedスクリプトでlayout各画像が読み込まれた後にトリガー
imagesLoaded( grid, function() {
  grid.classList.remove('are-images-unloaded');
  msnry.options.itemSelector = '.grid-item';
  let items = grid.querySelectorAll('.grid-item');
  msnry.appended( items );
});


// init Infinte Scroll
let infScroll = new InfiniteScroll( grid, {
  path: '.pagenation-index .pager-next',
  hideNav: '.pagenation-index .pager-next', //ナビゲーション要素を非表示に
  append: '.grid-item', //追加要素
  outlayer: msnry,
  status: '.page-load-status', //ロード文字
  scrollThreshold: 20, //下から100pxの位置でロード
});


//light box設定
lightbox.option({
    'positionFromTop': 100,
    'fadeDuration': 400,
    'imageFadeDuration': 400,
    'resizeDuration': 300,
    'albumLabel': "画像 %1 / %2",
    'wrapAround': true,
    'disableScrolling': true
});
</script>

<script>
//==================
//初回読み込み時の設定
//==================

//デフォルトでpostMediaPhotoに画像を取得し格納
let postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img');
//.post-contentクラスを持つリンクを全て取得し格納
let postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor');

//.post-content-wrapperクラスをもつdivを全て取得し格納する予定
let postContentWrapper;

//キャプション用div要素を取得し格納する予定
let textBody;
//一旦空のp変数作る。ここに取り出したhtmlを格納する予定
let p;

//src取得予定
let img;

//消去用画像予定
let figure;

//キャプション用予定
let cap;

function thumbnail() {

    //aタグ分forEachで処理
    postInnerLink.forEach((link, index) => {
        //index番目の画像アドレスを変数に格納
        img = postMediaPhoto[index].getAttribute('src');
        //linkタグに取得した画像アドレス挿入する
        link.setAttribute('href', img);

        //linkタグの中にサムネイルをねじ込む
        link.insertAdjacentHTML("afterbegin", "<div class='post-photo-thumb' style='background-image: url(" + img + "');'></div>");


        //============================================
        //サムネイルごとにキャプションをつける設定
        //============================================

        //キャプション用のpタグがあるdiv要素を全て取得し格納
        textBody = document.querySelectorAll('.index-post-content-text-body');

        //figure要素を取得(削除用)
        figure = document.querySelectorAll('.index-post-content-text-body figure');

        //取得した画像は消しておく
        figure.forEach((del) => {
            del.remove();
        });

        //div要素の最初の子要素を取得
        p = textBody[index].firstElementChild;


        //Captionがある場合は取得
        cap = postMediaPhoto[index].getAttribute('alt');

        //Captionの文字が初期文字imageでない場合にキャプションを入れる
        if (cap !== 'image' && p === null) {
            link.setAttribute('data-title', cap);
            //imagekでなくテキストがあった場合は両方表示させる
        } else if (cap !== 'image' && p) {
            link.setAttribute('data-title', cap + '<br>' + p.textContent);
            //imageかつテキストがあったらテキストのみを表示する
        } else if (cap === 'image' && p) {
            link.setAttribute('data-title', p.textContent);
        }

    });

    //最後にリンクタグについてたクラス除去
    postInnerLink.forEach((del) => {
        del.setAttribute('class', '');
    });

    //用済みなので消す
    postContentWrapper = document.querySelectorAll('div.post-content-wrapper');
    postContentWrapper.forEach((del, index) => {
        del.remove();
    });


    //ロードのたび取得することがないよう取得したテキストと画像を囲うdivは消しておく
    textBody.forEach((del) => {
        del.remove();
    });

}

thumbnail();

//=======================
//ここからロード時の設定
//=======================

//読み込まれたら変数に読み込み後取得した画像一覧を代入
infScroll.on('append', function (body, path, items, response) {

    postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img');
    console.log('postMediaPhoto更新');

    //.post-contentクラスを持つリンクを全て取得し変数に格納
    postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor');
    console.log('postInnerLink更新');

    thumbnail();

});

</script>

    
</body>
</html>

以上です。
何かもっとよく書ける方法があれば是非ご教授ください。

質問はコメント欄でお願いします。

最後まで見ていただきありがとうございました。