Blogger の <body> 内にスタイルを書く方法
投稿内に多くのスタイルがあると <style> タグ内に CSS をまとめて記述したいときがあります。
基本的には普通のサイトと同じですが、Bloggerでは少し注意したいところもあります。
CSS のコメントアウトは必要
<style>
<!--
p { color: red; font-size: 1.5em;}
-->
</style>
<!--
p { color: red; font-size: 1.5em;}
-->
</style>
人気の投稿にタグが表示される
コメントアウトしないと、ブラウザで見るのは大丈夫ですが、<data:post.snippet/> のデータを利用した人気の投稿などに <style> の内容がそのまま表示されてしまいます。
構造化データテストツールにも影響がでた結果
RSS の配信にも表示される
RSS の配信にも影響する場合があります。
ソーシャル メディアなどに別途の流用先も対応状況がわからないのでコメントアウトしておいたほうがいいと思います。
本文の最後に置く
それでも表示されたり空白になってしまう場合があるので、自分は投稿の一番下に置いています。
検証した FeedBurner では、コメントアウトしても先頭に空行が投稿されました。
ID を付けておく
個別ページ以外のページや Widget などにもスタイルが適用されてしまうため ID を付けておきます。
Blogger には投稿ごとにページ ID が存在します。発行前の ID は編集ページの URL 上に確認できます。
ID = "post-body-8047265666058026676"
<style>
<!--
#post-body-8047265666058026676 p { color: red; font-size: 1.5em;}
-->
</style>
<!--
#post-body-8047265666058026676 p { color: red; font-size: 1.5em;}
-->
</style>
ID は post-body クラスの場所と一致します。
日付とタイトルと post-header、footer を除いた記事本文のみに影響するので ID を指定するのにピッタリです。
現在 STYLE のコメントアウトはほとんど不要といわれていますが、こうして色々な流用先を見てみると、まだまだ必要だと感じました。