Bloggerの<body>内にスタイルを書く方法
投稿内に多くのスタイルがあると<style>タグ内にCSSをまとめて記述したいときがあります。
基本的には普通のサイトと同じですが、Bloggerでは少し注意したいところもあります。
コメントアウトは必要
<!--
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 type="text/css">
<!--
#post-body-8047265666058026676 p { color: red; font-size: 1.5em;}
-->
</style>
IDはpost-bodyクラスの場所と一致します。
日付とタイトルとpost-header、footerを除いた記事本文のみに影響するのでIDを指定するのにピッタリです。
現在STYLEのコメントアウトはほとんど不要といわれていますが、こうして色々な流用先を見てみると、まだまだ必要だと感じました。