PC版表示のお話になりますが
ずーーーっと悩んでいたんですが、このBloggerの記事って同じ日に投稿すると記事がその日の分全てくっついちゃうんですよね。
……わかりますか？('ω')
2023-07-26の投稿がふたつ、繋がってますよね。
しかも、同日投稿の記事の日付は一番上になる最新の記事にしか表示されないという仕様……
（Blogger公式のレイアウトデータタグヘルプに書いてありました ｺﾚ→https://support.google.com/blogger/answer/47270?hl=ja）
今回は同日記事の枠分離と、日付表示の問題をアレコレしてみました。
※ちなみにコードの組み方は使用しているテンプレートによって異なるため参考になるかわかりません！SilverHeartsではBlogger公式のSimpleテンプレートを改造しまくって使っています
さて、オペの時間だーーー！
同日投稿の記事を分離させる！
テーマのHTMLの編集から「Blog1」のところまでジャンプ。
分離させるには、枠を作っているコードを見てみましょう。
b:loop の中に入っているこれ↓
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>これを消して、
代わりにその下にある
<div class='post-outer'> のすぐ下に
<div class="date-outer">
を入れておく！٩( 'ω' )و
これで同日投稿でも枠が分離して記事が表示されるように…！
同じようにやって不具合起きたー！ってなる可能性がなくはないので、良い子はしっかりバックアップとってから改造しましょう。
これで大丈夫！
……と思ったんですが、
これだけだとブログ内検索やカテゴリで記事が多く表示される場面で、フッターがpost-outerの中に入ってしまったりおかしくなってしまったので
このdivをふたつにするところをひとつへ変えたらどうにか戻りました。。。
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
↓
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div>
</b:if>
に直す。
日付を記事枠外に表示する！
同日投稿の最新にしか日付が表示されないなら、いっそ記事枠内に日付を表示するのではなく
〝枠外上部に表示〟して、この日の投稿は以下にまとめてます！ってアピールするほうがスッキリするのではないでしょうか。
というわけでざっくりですが、記事枠外に日付を表示するためにカスタマイズしていきましょう。
まずは仕組みとコード探し！
どうやら
widget id="Blog1" 「ブログの投稿」にある「～id="main"」以下の
<b:include data='post' name='post'/>
で投稿の内容（日付から記事の中身）が表示されるようになっているようです。
……では肝心の"post"はどこに？
探してみると、だいぶ下のほうにある
<b:includable id='nextprev'/>
次のページ・前のページの次あたりの
<b:includable id='post' var='post'/>
ここで記事の表示を管理しているらしいです。
目的の日付の表示は
<data:post.dateHeader/>
つまり、これを枠外に設定すれば
何日の記事をまとめてますよーとアピールできるわけですね？？？
…ということで、include id="post"なんちゃら～内にあるこの日付表示を消してしまって、
代わりに最初に見たブログの投稿のclass="post-outer"でブログに枠がつく直前にこれを持ってきます。
ついでにstyleで中央寄せにしてサイズ大きめにしてみました。
<b:if cond='data:post.dateHeader'>
<div style='text-align:center; font-size:22px;'><data:post.dateHeader/></div>
</b:if/>
できたっっっ！！！°˖✧◝(⁰▿⁰)◜✧˖°
（画像の同日記事下のカテゴリMiniblogの枠が丸まっているのはカテゴリ別でcssを適用させているためです。また機会があればカテゴリ別で改造する場合とかも書くかもです）
コメントを投稿