
ページ送りの 位置 というのはなかなか難しいですね (´・ω・`)
今回行ったのは 同ページ内のページ送りを増やしたい方がhtmlの複製だけでできるような対策 です。ただし個別記事のみ。
はじめに
本記事では「ページ送りの複製」と「ページ送りの位置変更」についても説明します。「こんな修正しました。はいどうぞ。」で済ませれば簡単なんですが、やはり本件については説明が必須だと思いますので、面倒だとは思いますが是非ご一読ください。
修正対象テンプレートでもトップページなど個別記事「以外」のページ送りに変更は行いません。この大前提をご理解頂いた上でお読みくださいね。
htmlというのは単純に対象範囲をコピーしてそのコピーを希望の位置に貼り付ける、という作業がNGな場合があります。主な理由は以下の通り。
- id属性が利用されている
- id属性がJS内容と結びついている
JSと関連づいているページ送りというのは 前後ページのサムネイル画像が表示されるもの です。テキストリンクのみのものは対象外。このサムネイルはFC2ブログのシステムに依存していません。
id属性というのはページ内に単一でしか存在してはいけないものです。JSは「何に対して処理をするのか」その対象をページ内のDOM(html)から探し出すところがスタート地点で、処理対象にはid属性を用いるのが最も効率が良いんですね。
ところが「複製」という行為を行ってしまうと結果的に単一ルールに反するため id属性が利用できない ということになりますので、class属性に変更する必要が生じます。するとJSの処理効率は悪くなります。「特定の対象を探し出し、その対象に処理を行う(単一処理)」から「複数の対象を探し出し、その対象それぞれに同じ処理を繰り返し行う(複数(ループ)処理)」、という形に変化します。
なのでできるだけid属性を用いたいところなんですが、ページ送りを増やしたい というリクエストがありました。というのはですね、弊テンプレートのページ送り掲載位置は メインコンテンツの最下部 なんですね。この上には「記事」「受信コメント一覧」「コメント投稿フォーム」などがあります。
私の考え方としてはこうです。現在は モバイルファースト(スマートフォン最優先) ですから、「閲覧者が右横にある MENU のボタンを押してページ内移動を行ったとき、その近接にページ送りがある」という導線ですね。するとサイドメニューなどの副情報もすぐに確認ができ、ページ遷移も容易になる、と。この場合閲覧者がMENUボタンを押さないと仮定すると、コメント関連を経由しないとページ送りまでたどり着かない というデメリットもあります。
で、リクエストされた方の考え方はこうです。「記事を読んですぐに前後の記事に移動できる導線」です。この場合のメリットはページ送りを行う際に コメント関連を経由せずに行える 点。そしてデメリットはMENUボタンを押したときにページ送りが遠くなる。なのでメリット・デメリットが真逆になりますね。
ではここで自分にとってより好ましい掲載位置がどちらか、を考え、ページ送りの掲載位置移動 を行うとします。複製ではなく移動です。
ページ送り掲載位置の移動変更
弊テンプレートの多くは一般的に スクロールアンカー あるいは sticky(スティッキー) と呼ばれるものを取り入れています。メインとサイドそれぞれのカラムの「縦幅」が同等になることは稀で、どちらか短い方はスクロールしていくと画面外(画面上)へ流れて見えなくなります。なので一部コンテンツを画面外に流さず固定をする、というのがスクロールアンカーあるいはstickyです。
ややこしいことにこのスクロールアンカーとstickyは分けて考える必要がある(笑)
私の考え方としては、「メインがサイドよりも短いとき、ページ送りは流れていかずにページ内に留まらせる」するとページ遷移が容易になります。
* スクロールアンカー及びstickyを採用していないテンプレートの場合はこの章の内容を考える必要はありません。
そしてこの考え方の賛否は脇に置いておき、仮にページ送りを移動したとします。結果は以下の通り
- スクロールアンカー --- 特に影響なし
- sticky --- 影響あり
スクロールアンカーはメインカラムの最下部のコンテンツがページ最下部に留まります。最下部コンテンツがページ送りだとして以下の通り。

サイドメニューの方はまだ縦に続いています。メインの方はアンカー(錨)がかかって、ページ送りだけでなく上にあるコメント投稿フォームなども表示されています。スクロールアンカーの表示対象範囲は広いですね。
一方stickyの方は最下部のコンテンツがページ最上部に留まります。同じく最下部コンテンツがページ送りだとして以下の通り。

最下部コンテンツであるページ送り「だけ」が居残り、他のものは流れていきます。
最近の弊テンプレートではstickyに絞っています。というのは ASPによってはスクロールアンカー・sticky部位への掲載が禁止 されているためです。アフィリエイトのことですね。スクロールアンカーというのはカラム全体が対象なので、どの部位に掲載しても禁止行為にあたる可能性があります。なので対策としてはアンカー解除しかありません。一方stickyの方はsticky指定されている狭い範囲以外の部位は掲載OKなのでstickyの外に掲載すれば違反を回避できます。そういった事情、アフィリエイターさんへの配慮です。広告を掲載しない一般ブロガーさんは無関係です。
で、こういったタイプの場合にページ送りの位置を 変更 すると、先に述べましたがスクロールアンカーの方は特に何も起こりません。最下部のコンテンツが別のものになる、というだけです。ところがstickyの方は例えばページ送りをコメント関連の「上」に移動すると、まだ下にコメント関連コンテンツがあるわけですからこうなります。

わかりますでしょうか。下にあるコメント投稿フォームがスクロールと共に上へと移動し、画面外に行くまでの間stickyのページ送りと重なっています。スクロールアンカーと違いstickyは指定されたものだけが留まりますのでこういったことが起こります。
これを解消するには sticky指定対象を変更する とう作業が発生します。つまりCSSの変更ですね。これを行わないとスムーススクロールの動作もおかしくなってしまいます。
というわけで、ページ送りを「移動」する際、そのページ送りにstickyが指定されているならばCSS修正が必須になります。修正の仕方はテンプレート毎に異なりますので、必要のある方はご相談ください。
ページ送りの複製
stickyだかなんだかしらんがめんどくせぇ (;`ー´)o
という方は 複製 の方法を取ると良いでしょう。ただし コメント投稿をどのように扱っているか という個人の方針と相談。
常にコメントを受け付けない設定にしている方は移動も複製も行う必要は無いと思います。コメントを受け付けている場合には受信コメントが0件のうちはコメント投稿フォームを挟んで上下にページ送りが存在しますので、閲覧者にとっては非常に鬱陶しいかもしれません。あるいは時折コメント欄を塞いでいる方なども該当ですね。では複製を「記事下」ではなく「記事上」にするとどうか。
ページ送りのサムネイルは ajaxを用いた非同期通信 を行っています。閲覧者によるスクロールが発生しないうちは画像情報の取得を行いません。この理由は ページ表示速度を落とさないため です。なので極端に上の方に掲載してしまうと以下のようなことが起こります。


ページロード完了直後はサムネイル画像は表示されません。スクロールすれば出てきますが、最上部にありますので既にページ送り自体が画面外に流れて気づかない可能性があります。タイトルやリンクなどは最初から表示されますので問題なさそうですが、気づかれなさそうなものなのにJSの処理を行うというのが無駄な気がします(笑)
それよりもですね、スマホでabove the fold(ファーストビュー)を取られてしまう のが問題だと思います。それは非常にもったいないですし、個人的にはちょっと混乱を招くレイアウトではないかと思います。画面上部にページ送りを置くならば、メインコンテンツよりも目立ってしまわないよう専用でデザインを組むべきではないかな、と。 なので記事よりも「上」への移動または複製は おすすめしません。
ここまでが注意点として、移動ではなく複製の方法を取られる場合には テンプレートの再DLを行ってから にしてくださいね。何度も言いますが単純にhtmlをコピペしただけではできません。また、テンプレートによっては若干の調整が必要な場合があります。その場合は各専用記事へ明記しますのでガイダンスに従うようにしてください。
まとめ
時間のある時に作業する形なので2020.3.23現時点ではまだ2つのみです。リクエストがあれば優先的に作業する可能性もあります。修正済テンプレートのリストは本記事最終章に順次掲載します。
複製の予定はない、という方は無理に再DLする必要はありません。今回の修正は「ページ送り複製可能にする」というだけでミスの修正, デザイン修正, 不具合修正などではありません。
念押しになりますが、個別記事のみ の対応です。サムネイルなしページ送りのテンプレートもid属性をclass属性に変更し、複製が行えるようにしたいとは思っています。作業優先順位は下がります。サムネイルの無いページ送りはJSを利用しませんので修正は容易で、ユーザーさんの方で独自カスタマイズとして行うことも可能ですが、サムネイルつきの場合は難易度が非常に高いと思いますので優先的に作業を行います。
ことのついでに 既存弊テンプレートへのリクエストについて。カスタマイズの「アドバイス」はしても「お手伝い」は原則致しません。例えば「html, CSS, JSの新規作成」などですね。ただしリクエスト内容が 納得の行くものであり、汎用性が高い と判断できる場合には今回のように個人への提供ではなく、テンプレート内容の変更という形で手を入れることがあります。
修正済みテンプレート

Mystyle - FC2ブログテンプレート
Mystyleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Hymn - FC2ブログテンプレート
Hymnテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Hymn - FC2ブログテンプレート
Hymnテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

BigGirlNoCry - FC2ブログテンプレート
BigGirlNoCryテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

OmbreRose - FC2ブログテンプレート
OmbreRoseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Magazine - FC2ブログテンプレート
Magazineテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Fall - FC2ブログテンプレート
Fallテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Haven - FC2ブログテンプレート
Havenテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Blowing - FC2ブログテンプレート
Blowingテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Tarth - FC2ブログテンプレート
Tarthテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Muse - FC2ブログテンプレート
Museテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

tremolo - FC2ブログテンプレート
tremoloテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

alias-Jane - FC2ブログテンプレート
alias-Janeテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Lilting - FC2ブログテンプレート
Liltingテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Son-Of-Valkyrie - FC2ブログテンプレート
Son-Of-Valkyrieテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Bron-Broen - FC2ブログテンプレート
Bron-Broenテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Greetings - FC2ブログテンプレート
Greetingsテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

La_Vita - FC2ブログテンプレート
La_Vitaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Behavior - FC2ブログテンプレート
Behaviorテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Donna - FC2ブログテンプレート
Donnaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Crescent - FC2ブログテンプレート
Crescentテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Generic - FC2ブログテンプレート
Genericテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Axis - FC2ブログテンプレート
Axisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Pinboard - FC2ブログテンプレート
Pinboardテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Classica - FC2ブログテンプレート
Classicaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Out-of-style - FC2ブログテンプレート
Out-of-styleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

VeryMerry - FC2ブログテンプレート
VeryMerryテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Empty-street - FC2ブログテンプレート
Empty-streetテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Sincerely-yours - FC2ブログテンプレート
Sincerely-yoursテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Velonica - FC2ブログテンプレート
Velonicaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Dark-Divine - FC2ブログテンプレート
Dark-Divineテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Swollen - FC2ブログテンプレート
Swollenテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Juvenile - FC2ブログテンプレート
Juvenileテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Basement - FC2ブログテンプレート
Basementテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Life-is - FC2ブログテンプレート
Life-isテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Arrival - FC2ブログテンプレート
Arrivalテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Corridor - FC2ブログテンプレート
Corridorテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Colony - FC2ブログテンプレート
Colonyテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Fraise - FC2ブログテンプレート
Fraiseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Nostalgia - FC2ブログテンプレート
Nostalgiaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Little-thing - FC2ブログテンプレート
Little-thingテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Mocha - FC2ブログテンプレート
Mochaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Belong - FC2ブログテンプレート
Belongテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

All-about-us - FC2ブログテンプレート
All-about-usテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Sweetie - FC2ブログテンプレート
Sweetieテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Liberty - FC2ブログテンプレート
Libertyテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Promise-Me - FC2ブログテンプレート
Promise-Meテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Decoy - FC2ブログテンプレート
Decoyテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Stoic FC2ブログテンプレート
Stoicテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

BetweenNeo - FC2ブログテンプレート
BetweenNeoテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Bliss - FC2ブログテンプレート
Blissテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Jingle - FC2ブログテンプレート
Jingleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

OnTheGround - FC2ブログテンプレート
OnTheGroundテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Capricious/Ranchu - FC2ブログテンプレート
Capricious/ Ranchuテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

Sakura3パターン - FC2ブログテンプレート
Sakuraテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
以上対象全テンプレート修正を完了しました。リストに無いものについては元々複製可能です。