どうも。
前回Bloggerのバージョンアップで長々と書いてしまいましたが、layout version='3'のテーマの場合、投稿日と更新日はJava Scriptを使わなくても、簡単に設置出来ると書きました。
簡素化出来るのであればした方が、全体的なスピードは上がって来ると思います。
Vaster2ではpost.date.Headerから投稿日をJava Scriptにより取得しています。
例えばVaster2では、以下の様な記述だと思います。
'post.date.iso8601'から取得する場合は、以下の記述になります。
わざわざ変更する事も無いと思いますが、Java Scriptを極力避け、簡単にコードを書きたい場合は、変更をおすすめします。
注:今回の方法ですと、投稿時間までは表示させていません。
更新日の設置は、'post.lastUpdated.iso8601'よりJava Scriptで取得する必要がありましたが、layout version=3では、単純に'post.lastUpdated.iso8601'からの取得が可能になりました。
PageSpeed Insightのスコアは変わりませんでした。
投稿日だけの変更で、単純なJava Scriptの排除のみだったので…。
でも、塵も積もれば何とかです。
更新日に関しては、layout version=3の敷居は高いですが、Java Script無しで設置したい項目です。
以上
前回Bloggerのバージョンアップで長々と書いてしまいましたが、layout version='3'のテーマの場合、投稿日と更新日はJava Scriptを使わなくても、簡単に設置出来ると書きました。
簡素化出来るのであればした方が、全体的なスピードは上がって来ると思います。
投稿日を'post.date.iso8601'から取得する
投稿日についてはlayout version='2'のままでも'post.date.iso8601'から読み取る事が可能でした。Vaster2ではpost.date.Headerから投稿日をJava Scriptにより取得しています。
例えばVaster2では、以下の様な記述だと思います。
<span class='post-timestamp'>
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = "
<data:post.dateHeader/>"</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<script type='text/javascript'>document.write(hiduke)</script></abbr>
<i aria-hidden='true' class='fa fa-clock-o'/>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var hiduke = "
<data:post.dateHeader/>"</script>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<script type='text/javascript'>document.write(hiduke)</script></abbr>
'post.date.iso8601'から取得する場合は、以下の記述になります。
<span class='post-timestamp'>
<i aria-hidden='true' class='fa fa-calendar-o'/>
<time expr:datetime='data:post.date.iso8601'>
<b:eval expr='data:post.date format "yyyy-MM-dd"'/>
</time>
</span>
<i aria-hidden='true' class='fa fa-calendar-o'/>
<time expr:datetime='data:post.date.iso8601'>
<b:eval expr='data:post.date format "yyyy-MM-dd"'/>
</time>
</span>
わざわざ変更する事も無いと思いますが、Java Scriptを極力避け、簡単にコードを書きたい場合は、変更をおすすめします。
注:今回の方法ですと、投稿時間までは表示させていません。
更新日を追加
注:ここからはlayout version=3のテーマの場合です。更新日の設置は、'post.lastUpdated.iso8601'よりJava Scriptで取得する必要がありましたが、layout version=3では、単純に'post.lastUpdated.iso8601'からの取得が可能になりました。
更新日単体の設置
こんな感じ。好きな所に設置。
<span class='post-lastupdate'>
<time expr:datetime='data:post.lastUpdated.iso8601'>
<b:eval expr='data:post.lastUpdated format "yyyy-MM-dd"'/>
</time>
</span>
<time expr:datetime='data:post.lastUpdated.iso8601'>
<b:eval expr='data:post.lastUpdated format "yyyy-MM-dd"'/>
</time>
</span>
更新日と列べてる場合
投稿日のコードを探して、以下と書換えます。
<span class='post-timestamp'>
<i aria-hidden='true' class='fa fa-calendar-o'/>
<time expr:datetime='data:post.date.iso8601'>
<b:eval expr='data:post.date format "yyyy-MM-dd"'/>
</time>
</span>
<span class='post-lastupdate'>
<b:if cond='data:post.date != data:post.lastUpdated'>
<i aria-hidden='true' class='fa fa-refresh'/>
<time expr:datetime='data:post.lastUpdated.iso8601'>
<b:eval expr='data:post.lastUpdated format "yyyy-MM-dd"'/>
</time>
</b:if>
</span>
投稿日≠更新日の場合のみ、更新日を取得しています。<i aria-hidden='true' class='fa fa-calendar-o'/>
<time expr:datetime='data:post.date.iso8601'>
<b:eval expr='data:post.date format "yyyy-MM-dd"'/>
</time>
</span>
<span class='post-lastupdate'>
<b:if cond='data:post.date != data:post.lastUpdated'>
<i aria-hidden='true' class='fa fa-refresh'/>
<time expr:datetime='data:post.lastUpdated.iso8601'>
<b:eval expr='data:post.lastUpdated format "yyyy-MM-dd"'/>
</time>
</b:if>
</span>
PageSpeed Insightのスコアは変わりませんでした。
投稿日だけの変更で、単純なJava Scriptの排除のみだったので…。
でも、塵も積もれば何とかです。
更新日に関しては、layout version=3の敷居は高いですが、Java Script無しで設置したい項目です。
以上
0 件のコメント:
コメントを投稿