「追記あり」どうしようかすごく悩んでるんだ本当に【サムネイル付き関連記事リスト】

関連記事リストを出力できる場所

1. 個別ページの記事下
2. 一覧ページの記事下
3. 個別、一覧ページの記事下
4. テンプレート変数のみ
5. 上記全て

上記5つの設定が用意されています。「個別ページ」というのは記事が書いてあるページ、つまり 個別記事ページのことです。そして「一覧ページ」はいわゆる トップページ のこと。

問題が生じるのは赤く囲った2つの指定

• 一覧ページの記事下
• 個別、一覧ページの記事下

このいずれかに指定しており、かつ リストにアイキャッチ画像を表示する 設定にしており かつ 全文表示タイプテンプレートを設定している 場合です。一覧ページへの出力は要約タイプでは原則無効なので対象となるのは全文タイプです。

構文エラー Duplicate ID

errorDuplicate ID xxx.

ID名(ID属性の値) が 重複 していますよ、というエラーです。

IDというのはページ内に単一でしか存在してはいけない名称なんですが、関連記事リストをトップページに表示させることでこのエラーを引き起こします。というのは、トップページは管理人が意図的に単記事に指定しない限り原則 記事の複数件表示 が行われます。その記事それぞれにひとつづつ関連記事リストが表示されるので「重複」になります。

サムネイルつき関連記事リストのhtmlの書き出しは以下のようなものです。

<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">

緑の部位がID属性です。これが複数件表示表示されるので重複になるってスンポー。この内容は自動出力なのでテンプレート製作者側で変更することはできません。

具体的に何が起こるのか

表示上は特に何も起こりません。大抵の場合は。レイアウトが崩れたりCSSが適用されない、など目に見えておかしくなるようなことはよっぽど起こらないはずです。

ただしJS(JavaScript)が絡んでくるとアウトです。JSでは getElementById というメソッドがあり、これは「特定のID名を見つける」ために利用します。で、ひとつ見つけたら他の重複分については無視しますので、同じIDが10件あって全てに処理を適用したくとも最初に発見された1件のみしか処理しません。

CSSの方はブラウザがよきに計らってくれますが、だからといって重複させて良いわけではない。非常に非効率的なことをやらなくちゃいけないので。

FC2ブログの関連記事リストになんらかのJSを適用している、というテンプレートは恐らく今の所無さそうなので、一見問題はなさそうにも思えてしまいますが。

何を悩んでいるのか

私が何をグジグジ悩んでいるかというと、この件を運営に報告して修正を依頼すべきかどうか です(笑)

だってね、これ私のテンプレートだけの問題じゃないんですよ。関連記事リストのデザインに手を加えてあるほぼ全てのテンプレートに修正が発生する ことになります。修正が必須かどうかはビミョー。#fc2relate_entry_thumbnail_area このセレクタがスタイルシートに含まれているテンプレートはアウト。

ですから本来修正すべき事例とはいえ、実際に修正が入ったら混乱必至(笑)
該当するテンプレートは表示が大きく乱れることになります。だから報告すべきか悩んでる (´・ω・｀)

あぁあぁぁーなんですぐ言わなかったんやろ？リリース直後すぐに報告すれば良かったのに何故しなかったんだよお前(私のことです)
えーマジでなんでやろ。忙しかったんかな？ ←

でもこれどうだろう… 修正すべきじゃない？ (´・ω・｀)
どーなんですか？どうしよう？(笑)

なかには「バリデートとかよくわかんないよ」という人も居ます、というかそういう方の方が多いでしょうから、もう構文的なことは目を瞑っ… た方が良いの？これって？わからないよ！(笑)
この記事がたまたまFC2のスタッフさんの目に入って、そこで何かしら決定してくれると良いんだけど。運営が自主的に修正したら製作者はそれに応じます。でも「変更はしない」という決定だと伝わったかどうかわからんな。よく考えたら

トップページでのサムネイルつき関連記事リスト表示例

上記サムネイルクリックでサンプルページをご覧頂けます。弊テンプレート「Generic」を利用しています。

Generic - FC2ブログテンプレート

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

vanillaice000.blog.fc2.com

ちょっとズルをして関連記事のリスト内容は全て同じもので揃えました。すみません。ともかく例えばこういう感じですよね。で、私はこれはデザイン的にも悪くはないと思うんです。こういうのができるのが全文表示タイプの良いところかもしれませんね。

ところが、何度も言うようにリスト複数件表示でhtml構文エラーである点、そしてこの関連記事リスト用のCSSファイルを出力させるためのJS内容(script要素)が記事表示件数分繰り返し表記されています。
「関連記事リスト用のCSSファイルを入れてください」という処理がサンプルで言うと1ページあたり記事12件表示ですから実に12回も繰り返されている(笑)

getElementById でやってますので12回も処理を回しても言うことを聞いてくれるのは一度だけ。ただしこの場合はたまたま幸いなことに「CSSファイルを読み込む」という内容ですから、一度読み込まれればよし。

そういうわけでデザインやUXなんかは良くとも内部的にはちょっとめちゃくちゃなことになってしまいます。idでなくclassに変更してくれれば全て解消できて安心してこの形にできるんだけど。実際サンプルと同じ形式で運用されている方を何度かお見かけしています。何故かいつもGeneric(笑)
たぶんスマホでリストが横スクロールに変更されて縦(高さ)を消費しないからかもしれません。

なのでお見かけする都度なんだか申し訳ない気持ちに (；ωq｀)
ただ今のところ「重大なエラーですから辞めた方が良いですよ！」なんて指図は致しません。現になんとかなってるんで。まぁホントはこんなこと言っちゃダメなんだけどさ (´・ｪ・｀)

まとめ

これどういうことかというと、結局は運営側がこの機能をリリースする際に トップページ(一覧ページ)への掲載を全く想定していなかった ってことですよね。もうこの処理内容全てがそう物語っている(笑)
設定に選択肢が用意されている以上、必ず使う人は居ます。失念しちゃったんだろうなぁ。たぶん。

で、どうしますかね (´・ｪ・｀)
修正入れば入ったですぐ直せるんで、私個人としてはやって欲しい気持ちはあれど、全体観で見ると混乱を引き起こして「Akira、テメッ！余計なことしやがって！」とかなんないかなー。つか、なるよねー ←←←
いやマジでwebページの classやidが変更されるってものすごく困ること なんですよ。Amebaとかそれやって非難轟々でしたよね。

えっとー。鍵コメで良いんで、ユーザーさん「言った方が」「いや言わなくても」とかちょっと意見聞かせてくんないかなー、みたいな。それかもしも、もしもよ？スタッフさんが偶然にでも目を留めてくれたらちょっと考えてもらえると嬉しい(笑)

追記 2019年10月11日