Blogger Labo：【Vaster2】テーマデザイナーのカスタマイズ

このページでは、Vaster2のテーマデザイナーのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


テーマデザイナーのカスタマイズ


Vaster2のテーマデザイナー対応版では、特定の項目がBloggerのテーマデザイナーで変更できるよう設定されている。

この項目は、記述次第でカスタマイズできるようになっている。

［例］ページ全体のテーマデザイナー設定


 ページ全体のテーマデザイナーのCSS 

<Group description="ページ全体の背景" selector="body">
<Variable name="body.background.color" description="全体の背景" type="color" default="#ffffff" value="#ffffff"/></Group>

 対応するページ全体の設定 

.body-wrapper{
   background-color:$(body.background.color);
}

画像とCSSを見比べてみると、大体のルールが読めてくる。

要するに、この記述を参考にしてCSSを書き換えていけば、自分の好みに合ったテーマデザイナー設定が行える。

テーマデザイナーのCSSの記法


テーマデザイナーのCSSの記法は大体以下のような感じである。

 項　目 

<Group description="項目名" selector="テーマデザイナーの指定部分">　</Group>

 内　容 

<Variable name="指定した名前" description="項目名" type="タイプ" default="初期値" value="変更後の値"/>

 対　応 

コード:$(指定した名前);

テーマデザイナーの変更例


サイドバーの背景色を設定する



<Group description="サイドバー" selector=".sidebar">
<Variable name="sidebar.color" description="サイドバーの背景色" type="color" default="#bce2e8" value="#bce2e8"/>
</Group>

 .sidebar {
   width:330px;
   max-width:100%;
   float:left;
   padding-left:40px;
   box-sizing:border-box;
   background-color:$(sidebar.color);
}

上記のように設定すると、テーマデザイナーでサイドバーの背景色を変えることができた。

このように設定していけば、後からテーマデザイナーで設定可能になる。

しかし、CSSを編集できるようになると直接設定した方が楽。

作り上げたテンプレートを他のサイトに転用する場合は有用かもしれない。