トップページの記事数が設定より少ない【Blogger】
トップページに一覧表示する記事(新着記事一覧)の数を変更しようと思ったのですが、なぜか6件から増やすことができません。減らすことはできるのですが、増やそうとすると表示件数が少なくなるのです。
何が原因なのか調べてみたところ、意外なことが表示エラーの原因になっている事がわかりました。
トップページに表示する記事数の設定
お使いのテンプレートによって若干違うかもしれませんが、Bloggerの場合は
- 設定>投稿:メインページに掲載する投稿数の上限 から設定
- レイアウト>ブログの投稿:メインページに表示する投稿数 から設定
の二通りの方法があります。
この方法でうまく設定した件数が表示されない(増やせない・設定数よりも表示が少ない)場合は、恐らくテンプレートや設定に問題があるのではありません。
【原因】Blogger側で制限しているらしい
検索でヒットするのは「トップページは1MBが上限」というもの。
トップページの記事数が減る場合の原因と対策【Blogger】
この1MBは、トップページに表示されているサムネイルや記事概要(スニペット)だけでなく、そのリンク先の各個別記事のアイキャッチ・本文までが含まれるらしいのです。
これは投稿一覧の部分だけ?人気の投稿や注目の投稿はセーフ?
別館の写真ブログ(QooQリスト版をカスタマイズして使用)は個別記事のアイキャッチをWebP化していませんが、設定25でもちゃんと表示されます。トップページと最初の記事1つ(動画あり)だけで1MB超えてるけど…。
また、個別記事に空の<img>タグを入れるだけでも表示数が減っていくことが確認されています。ページ上限1MB:容量での足切りではない?
注意!あなたのBloggerのメインページは投稿数が勝手に減っているかも!
<img>タグの数で制限がかかっているとして、どこまでの<img>をカウントしているの?トップページのサイド(人気の投稿など)は?個別記事下の関連記事などのサムネイルとかもカウントされているの?
はっきり分からない部分が多いのですが、Blogger側で設けている何かしらの制限があることが分かりました。
【解決策】追記 <!--more--> の挿入をする
謎は多いものの、解決策はわかっています。記事内に「追記の挿入」 <!--more--> を入れるだけなのです。
追記 <!--more--> 以降を読み込まなくなる(その先をカウントしなくなる)ので、Bloggerの制限にひっかからず、設定した記事数が無事表示されるようになります。
追記の挿入方法
- 編集画面メニューの1番右側の「…」その他のオプション をクリック
- 表示されるサブメニュー内、左から4番目の「-」追記を挿入 をクリック
記事編集ページの作成ビューで見るとグレーの横線が、HTMLビューで見ると以下が挿入されます。
<span><!--more--></span>
実際のWEBページでソースを確認すると、Bloggerでは下記のようなリンクに自動変換されています。QooQやJetThemeでは使われていないのですっかり頭から抜けていましたが、個別記事の「続きを読む…」のリンクに使われる部分ですね。
<span><a name='more'></a></span>
追記を入れる場所
各記事を書くときに1行目に「追記の挿入」<!--more--> を入れてしまうと、トップページでの記事概要(スニペット)はゼロになります。(サムネイルは表示されますが)
サムネイルとタイトルだけを表示している場合(記事概要は表示なし)以外は、記事文頭からどこまで表示させるかを考え、区切りの良い部分で追記を入れる必要があります。
トップページの表示はどう変わるか
トップページでの表示は、使っているテンプレートやCSSのカスタマイズの有無により違ってきます。
公式テンプレートSimpleなどでは、追記がない場合はトップページで全文表示、追記 <!--more--> を挿入した場合は、追記以降が省略(非表示)され「続きを読む」などのテキストが表示されるようになります。
公式テンプレート:Contempoなどでは、追記がない場合は枠の大きさに収まるだけの概要が表示され、追記がある場合は追記以降が省略(非表示)となりますが、追記の有無にかかわらず「続きを読む」は表示されます。
なおいずれのテンプレートの場合でも「続きを読む」は、レイアウト>ブログの投稿 より自分の好きなテキストに変更可能。ボタンや画像にしたい場合は別途CSSなどでのカスタマイズが必要になります。
「続きを読む」不使用のテンプレートでは表示されない
今使っているJetTheme、以前使っていたQooQなどは「続きを読む」の設定がない(HTML内に div class='jump-link' がない)ので、別途カスタマイズをしていなければ、追記 <!--more--> を入れてもトップページで「続きを読む」は表示されません。
※レイアウト>ブログの投稿 に、投稿ページのリンクテキスト:Read more » という項目がありますが、設定しても表示はされません。
「続きを読む」設定されるリンク
「続きを読む」の設定があるテンプレートに場合、多くが「続きを読む」のリンク先は、記事URL#more となり、記事先頭ではなく追記以降(追記の後半部分の文頭)に飛びます。
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
※上記、Blogger公式テンプレート:Simple のソースより
これも テーマ>カスタマイズ>HTMLを編集 より、テンプレートのHTML内で上記コードを探し、マーカー部を削除 <a expr:href='data:post.url'><data:post.jumpText/></a> にすれば、記事先頭に飛ぶようになります。
公式テンプレートContempoなどについては、追記がない場合は記事URL、追記がある場合は記事URL#moreへのリンクとなります。
<div class='jump-link flat-button ripple'>
<a expr:href='data:post.hasJumpLink ? data:post.url fragment "more" : data:post.url' expr:title='data:post.title'>
<data:blog.jumpLinkMessage/>
</a>
</div>
※上記、Blogger公式テンプレート:Contempo・Soho・Essential などのソースより
こちらもマーカー部を削除 <a expr:href='data:post.url'><data:post.jumpText/></a> にすれば、追記の有無にかかわらず記事先頭に飛ぶようになります。
他への影響
このブログでは、トップページの記事概要(スニペット)をCSSで「枠に収まる3行分(PC表示)、それ以降は…を表示」と指定してありますが、追記 <!--more--> が入った場合、区切りを入れた場所によっては指定行数未満になる場合もあります。
また、私の場合はブログカードも記事概要(スニペット)を載せているので 追記 <!--more--> が影響していました。
最後に
今までBloggerの他ブログ(テンプレートはQooQリスト版・JetTheme)で、~10程度では設定件数で表示されなかった事がないので、今さらこんな制限があることを知りました。
またいつBloggerの仕様が変わるか分かりませんが、2023年9月現在では以上のような状況が発生しますので、同じようにお困りの方へのご参考まで。