【F-light】テーマデザイナーを利用する方法

2023/06/14 ｜2023/09/06 ｜2

Blogger には手軽にデザイン(色、サイズなど)をカスタマイズできるテーマデザイナーという機能があります。

ほとんどのサードパーティ製テーマにも導入されていますが、個人的にあまり必要性を感じていなかったため、F-light にはテーマデザイナー機能は搭載していませんでした。カスタムプロパティを導入しているので、テーマ編集で１箇所カラーコードを書き換えるだけで全体の配色に反映させられますからね。

とは言え、視覚的に操作できるなど便利な機能ではあるので需要はあるかも？というわけで、今回は F-light にテーマデザイナー機能を実装する手順及び使い方を紹介したいと思います。

テーマデザイナーの実装手順

HTML を編集しますので、念のために予めテーマのバックアップを取ってから作業を行って下さい。

変更箇所①

HTML 編集にて<b:if cond='false'><b:skin><![CDATA[]]></b:skin></b:if> から
/*==== 共通 ====*/の上の所の}まで(画像の赤枠の範囲)を以下のコードに変更します。

<b:if cond='!data:view.isLayoutMode'>
<b:skin><![CDATA[
/*--------------------------------------------------------------
Blogger Template
Name	: F-light
Version	: 1.30
Designer: Fujiyan
Url		: https://f-light-theme.blogspot.com/
Lisense	: カスタマイズは自由ですが再配布・販売は禁止です
----------------------------------------------------------------*/

/*==== 初期化 CSS ====*/
html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}@media(max-width:1024px){body{font-size:1.6rem}}

/*<Group description="ブランドカラー配色">
  <Variable name="brand" description="濃いブランド色" type="color" default="#4169e1" value="#4169e1"/>
  <Variable name="brand.font" description="濃いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
  <Variable name="brand.light" description="薄いブランド色" type="color" default="#1e90ff" value="#1e90ff"/>
  <Variable name="brand.light.font" description="薄いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
  <Variable name="sub.brand" description="サブブランド色" type="color" default="#ff6347" value="#ff6347"/>
  <Variable name="sub.brand.font" description="サブブランド色部分の文字色" type="color"
   default="#ffffff" value="#ffffff"/>
</Group>
<Group description="背景の色">
  <Variable name="darkmode.dark.bg" description="ダークモードの濃い背景色" type="color" default="#171e2d" value="#171e2d"/>
  <Variable name="darkmode.light.bg" description="ダークモードの薄い背景色" type="color" default="#1d2638" value="#1d2638"/>
  <Variable name="lightmode.dark.bg" description="ライトモードの濃い背景色" type="color" default="#eeeeff" value="#eeeeff"/>
  <Variable name="lightmode.light.bg" description="ライトモードの薄い背景色" type="color" default="#fbfbff" value="#fbfbff"/>
  <Variable name="darkmode.shadow" description="ダークモードの影" type="color" default="#000000" value="#000000"/>
  <Variable name="lightmode.shadow" description="ライトモードの影" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>
<Group description="文字の色">
  <Variable name="darkmode.dark.font" description="ダークモードの濃い文字色" type="color" default="#eeeeee" value="#eeeeee"/>
  <Variable name="darkmode.light.font" description="ダークモードの薄い文字色" type="color" default="#c0c0c0" value="#c0c0c0"/>
  <Variable name="lightmode.dark.font" description="ライトモードの濃い文字色" type="color" default="#333333" value="#333333"/>
  <Variable name="lightmode.light.font" description="ライトモードの薄い文字色" type="color" default="#666666" value="#666666"/>
  <Variable name="darkmode.link" description="ダークモードのリンク色" type="color" default="#00bfff" value="#00bfff"/>
  <Variable name="lightmode.link" description="ライトモードのリンク色" type="color" default="#4169e1" value="#4169e1"/>
</Group>*/

/*==== ダークモード用配色 ====*/
:root {
  --dark-bg: $(darkmode.dark.bg); /*濃い背景色*/
  --light-bg: $(darkmode.light.bg); /*薄い背景色*/
  --shadow: #000; /*影*/
  --color: $(darkmode.dark.font); /*文字色*/
  --dark-color: $(darkmode.light.font); /*薄い文字色*/
  --red-color: Tomato; /*赤文字*/
  --blue-color: #8cb4ff; /*青文字*/
  --green-color: #00d061; /*緑文字*/
  --link: $(darkmode.link); /*リンク色*/
  --brand: $(brand); /*濃いブランド色*/
  --brand-light: $(brand.light); /*薄いブランド色*/
  --brand-font: $(brand.font); /*ブランド色背景用文字色*/
  --sub-brand: $(sub.brand); /*サブブランド色*/
  --sub-brand-font: $(sub.brand.font) /*サブブランド色背景用文字色*/
}

/*==== ライトモード用配色 ====*/
:root[data-theme-mode="light"] {
  --dark-bg: $(lightmode.dark.bg); /*濃い背景色*/
  --light-bg: $(lightmode.light.bg); /*薄い背景色*/
  --shadow: $(lightmode.shadow); /*影*/
  --color: $(lightmode.dark.font); /*文字色*/
  --dark-color: $(lightmode.light.font); /*薄い文字色*/
  --red-color: #d30038; /*赤文字*/
  --blue-color: #592bff; /*青文字*/;
  --green-color: #007936; /*緑文字*/;
  --link: $(lightmode.link); /*リンク色*/
}
]]></b:skin>
<style>/*<![CDATA[*/

変更箇所②

テーマデザイナーでは rgba コードが使えないため、rgba で半透明にしていたナビバーやジャンプボタンのカスタムプロパティを変更する必要があります。

赤文字の所を追加・変更してください。

※ナビメニューボタンの背景や検索ボックスも半透明になります。
半透明にしなくてもいいという方はopacity: .9;を削除してください。

/*==== ナビバー ====*/
nav {
  background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light)); /*変更*/
  opacity: .9; /*追加*/
  box-shadow: 0 3px 6px -4px var(--shadow);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 2em;
  margin-top: -1px;
}
...
@media (max-width: 1024px ) {
  nav {
    height: 2em;
  }
  #nav {
    box-shadow: 0 3px 6px -4px var(--shadow);
    background: var(--light-bg); /*変更*/ 
    padding-left: 8px;
    min-width: 0;
  }
...
}

/*==== 上下ジャンプボタン ====*/
#pagetop,
#pagebottom {
  display: none;
  position: fixed;
  right: 0;
  z-index: 1;
  color: var(--dark-color); /*変更*/
  opacity: .7; /*追加*/
}

以上でテーマデザイナーの実装作業は完了です。