一部テンプレートで個別記事のページ送りを複製できるようにしました

テンプレートテンプレ不具合・修正など

2020/03/23

2021/08/30

vanillaice (Akira)

管理人からのお知らせ

ページ送りの位置というのはなかなか難しいですね (´・ω・｀)
今回行ったのは同ページ内のページ送りを増やしたい方が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の新規作成」などですね。ただしリクエスト内容が納得の行くものであり、汎用性が高いと判断できる場合には今回のように個人への提供ではなく、テンプレート内容の変更という形で手を入れることがあります。

目次へ戻る↑