はてなブログの更新日付を取得した際に、表示の不具合が発生していました。
こんな感じです↓
AMPを利用する方法を使うことで一応この問題は解決できますが、AMP対応化は、はてなブログPROでしか導入できません。また、AMP化自体、必ずしも推奨されるものでもありません。
そのため、従来のサイトマップから取得する際のコードを修正する方向で、解決することと致しました。
この記事では、更新日付をサイトマップから取得した際に正しい表示がされるようにする修正コードを紹介します。
更新日付表記の不具合の原因
はてなブログのサイトマップ更新によるもの
はてなブログで更新日時を表示する方法として、サイトマップを取得する方法が主流となっています。
最近、はてなブログのサイトマップに変更があり、日付に加え時間まで記載されるようになりました。
サイトURLに/sitemap.xmlを加え、ブラウザで確認していただくと「TXX:XX:XX+09:00」の表記があることがわかるかと思います。
そのため、従来の取得方法では、その追記された時間まで取ってくるので余計な記載が出るようになりました。
不具合を修正するコード
記事下のJavaScriptを修正
現在記事下に貼ってある↓の部分を修正します。
現状のコード
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="synIdentifier">function</span> appendLastmod(lastmod) <span class="synIdentifier">{</span> <span class="synIdentifier">var</span> $container = $(<span class="synConstant">'<div></div>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'lastmod'</span><span class="synIdentifier">}</span>); $container.append($(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'date-year'</span><span class="synIdentifier">}</span>).text(lastmod.split(<span class="synConstant">'-'</span>)<span class="synIdentifier">[</span>0<span class="synIdentifier">]</span>)); $container.append($(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'hyphen'</span><span class="synIdentifier">}</span>).text(<span class="synConstant">'-'</span>)); $container.append($(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'date-month'</span><span class="synIdentifier">}</span>).text(lastmod.split(<span class="synConstant">'-'</span>)<span class="synIdentifier">[</span>1<span class="synIdentifier">]</span>)); $container.append($(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'hyphen'</span><span class="synIdentifier">}</span>).text(<span class="synConstant">'-'</span>)); $container.append($(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'date-day'</span><span class="synIdentifier">}</span>).text(lastmod.split(<span class="synConstant">'-'</span>)<span class="synIdentifier">[</span>2<span class="synIdentifier">]</span>)); <span class="synStatement">if</span> ($(<span class="synConstant">'.entry-header > .date'</span>).get(0).tagName.toLowerCase() === <span class="synConstant">'span'</span>) <span class="synIdentifier">{</span> $(<span class="synConstant">'.entry-title'</span>).before($container); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synIdentifier">{</span> $(<span class="synConstant">'.entry-date'</span>).append($container); <span class="synIdentifier">}</span> |
修正コードでは、lastmodの持っている日時部分をreplaceの正規表現を用いて除外しています。
また、文字列を分割しないシンプルなコードです。
現状のコードを削除し、以下の修正コードをコピペしてください。
修正コード
1 2 3 4 5 6 7 |
<span class="synIdentifier">function</span> appendLastmod(lastmod) <span class="synIdentifier">{</span> <span class="synIdentifier">var</span> $container = $(<span class="synConstant">'<div></div>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'lastmod'</span><span class="synIdentifier">}</span>).text(lastmod.replace(<span class="synConstant">/T.*0/</span>,<span class="synConstant">""</span>)); <span class="synStatement">if</span> ($(<span class="synConstant">'.entry-header > .date'</span>).get(0).tagName.toLowerCase() === <span class="synConstant">'span'</span>) <span class="synIdentifier">{</span> $(<span class="synConstant">'.entry-title'</span>).before($container); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synIdentifier">{</span> $(<span class="synConstant">'.entry-date'</span>).append($container); <span class="synIdentifier">}</span> |
これで表記が元に戻るはずです。
プログラマー歴1年半にして、初めてjQueryをいじりましたがなんとかなりました(笑)。
なお、このコードの欠点は、lastmodを分割していないので年月日毎に分けてCSSで加工できないところです。
ちなみに、修正コードのdiv属性部分のところを、私はspan属性にしています。
1 |
<span class="synIdentifier">var</span> $container = $(<span class="synConstant">'<span></span>'</span>, <span class="synIdentifier">{</span><span class="synConstant">'class'</span>: <span class="synConstant">'lastmod'</span><span class="synIdentifier">}</span>).text(lastmod.replace(<span class="synConstant">/T.*0/</span>,<span class="synConstant">""</span>)); |
もし、うまく表記されない方がいましたら、span属性にしてみてください。
なお、ブログテーマはZENO-TEALでしたので、他テーマにつきましては若干の相違があるかもしれませんので、ご承知ください。
皆様の助けになれば幸いです。
最後まで読んでいただき、ありがとうございました。