2021年8月11日水曜日 2021年8月11日水曜日 Blogger

Bloggerのコメントフォームのデザインを最新化する

Contempo、Soho、Emporio、Notable、Essentialといった新しい公式テーマで使われているコメントフォームのデザインをカスタムテーマでも有効化する方法をまとめます。

以前調べたときは方法が分からず断念しましたが、再び調べたところ方法が確立しているようでした。

しかし、検索の仕方が悪いのか日本語で情報がまとまっているページを見つけられませんでした。
当ブログでも実現できたので備忘録的にメモしておきます。
なお、Bloggerのテンプレートバージョンはアップデートされている状態です。

b:skinを修正する

<b:skin><![CDATA[と]]></b:skin>の間に以下を追加します。

<!-- Variable definitions -->
<Group description="Blogger's New Comment (Contempo, Soho, Emporio, Notable, Essential)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#3f51b5" value="#3f51b5"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="#008c5f" value="#008c5f"/>
</Group>

当ブログの場合は以下のようになります。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin version='1.0.1'><![CDATA[/* <Variable name="body.background.color" description="Body background color" type="color" default="#f7f7f7"  value="#757de8"/> */
<!-- Variable definitions -->
<Group description="Blogger's New Comment (Contempo, Soho, Emporio, Notable, Essential)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#3f51b5" value="#3f51b5"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="#008c5f" value="#008c5f"/>
</Group>
]]></b:skin>

description: 3、body.link.colorの変数の色指定(HEX)を変えるとログイン/ログアウト、公開ボタンの色が変わります。

<Variable name="body.link.color" description="3"
  type="color"
  default="#3f51b5" value="#3f51b5"/>

data:post.commentFormIframeSrcを修正する

元記事ではdata:post.commentFormIframeSrc(複数ある)をdata:post.commentFormIframeSrc appendParams {skin: "essential"}のように置換するとありました。

コメントをデフォルトのまま使っている場合はそれで良いのかもしれませんが、当ブログではコメントの表示方法もカスタマイズを行っているため、代わりにJavaScriptの修正を行いました。

blogger.blog.bloggerUrl + '/comment-iframe.g?blogID=' + blogger.blog.blogId + '&postID=' + blogger.post.id +
(parentId ? '&parentID=' + parentId : '') +
'&skin=essential'

おまけ

URLの文字列のみ得たい場合は以下のようにすると取得できました。

<b:eval expr='data:post.commentFormIframeSrc appendParams {skin: &quot;essential&quot;}'/>
<b:eval expr='appendParams(data:post.commentFormIframeSrc, {skin: &quot;essential&quot;})'/>

Bloggerのコメントフォームのデザインを最新化する

b:skinを修正する

data:post.commentFormIframeSrcを修正する

おまけ

この記事をシェアする

コメント

ページ