Bloggerのcssの便利な使い方

2022/04/05 update

Bloggerのcssの使い方です。

Bloggerはテンプレートを選ぶと、そのテンプレートで用意されている色を変更できるようになっています。ただテンプレートに大量に設定が書かれ無駄が多いので、その機能を削除してcssだけで色を決めた方がいいです。

設定の部分はこの辺りです。

<b:skin version='1.3.3'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.・・・border-spacing:0}td,th{padding:0}
/*

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="#8abc0d" value="#f4ff81"/>
・・・
<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="280px"  value="280px"/>
  <Variable name="posts.width.stream" description="Post width (stream)" type="length" min="100px" max="1000px" default="385px"  value="385px"/>
</Group>
 */

body{
overflow-wrap:break-word;
・・・
}
]]></b:skin>

これを全部消して、普通のcssに変更します。

<b:if cond='false'><b:skin version='1.3.3'></b:skin></b:if>
<style>
body{
margin:0;
・・・
}
</style>

<b:if cond='false'><b:skin version='1.3.3'></b:skin></b:if>の部分でBloggerが自動的に作るものを全て削除します。
<style>と</style>の間に必要なcssを記入します。

テンプレートで設定する場合は同時に複数の色を変更できましたが、cssにも同じような機能があります。

変数の設定

:root{
--（変数名）:（値）;
}

例

:root{
--titlecolor:#ffcc33;
--pagecolor:#ffffcc;
}

変数の使い方

var(--（変数名）);

例

#navigation{
background:var(--pagecolor);
border-bottom:2px solid var(--titlecolor);
}

Bloggerでcssを設定するのを辞めて、純粋なcssであれば途中でif文などを書くこともできます。
「投稿」と「ページ」以外の時にこの部分を実行する場合

<b:if cond='!data:view.isSingleItem'>
.list-item{
position:relative;
}
</b:if>

複数のサイトで同じテンプレートを使うときにサイト毎に違う色を指定する場合

<b:if cond='data:blog.canonicalHomepageUrl == "https://kotatsumegane.blogspot.com/"'>
:root{
--titlecolor:#ffcc33;
--pagecolor:#ffffcc;
}
<b:elseif cond='data:blog.canonicalHomepageUrl == "https://prowrestlernickname.blogspot.com/"'/>
:root{
--titlecolor:#336633;
--pagecolor:#ddffcc;
}
<b:elseif cond='data:blog.canonicalHomepageUrl == "https://spotbowling.blogspot.com/"'/>
:root{
--titlecolor:#333399;
--pagecolor:#cfe2f3;
}
<b:elseif cond='data:blog.canonicalHomepageUrl == "https://dietrecommend.blogspot.com/"'/>
:root{
--titlecolor:#ff6666;
--pagecolor:#ffdbe7;
}
<b:elseif cond='data:blog.canonicalHomepageUrl == "https://googlebloggertrouble.blogspot.com/"'/>
:root{
--titlecolor:#ff6600;
--pagecolor:#ffe5cc;
}
<b:else/>
:root{
--titlecolor:#999;
--pagecolor:#ccc;
}
</b:if>

以上の方法で同じテンプレートで5つの色違いのサイトを運営しています。

この記事のタイトルとURLをコピーする blogger

blogger