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

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; /*追加*/
}

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

テーマデザイナーの使い方

テーマ編集の「カスタマイズ」→「詳細設定」から配色のカスタマイズが出来ます。変更後は必ず右下のを押して保存してください。

詳しい操作方法は文字と画像で説明するよりわかりやすいかなと思って動画キャプチャを録りました。(画質が悪い場合はで 720p に切り替えてください)

注意事項

右側のレビュー画面で変更後の状態を確認できますが、確認できるのはトップページだけで、リンクをクリックして遷移した別ページでは変更を確認できません。(保存後を除く)

色指定は16進数の #カラーコード または RGB のみです。色名での指定はできません。「名前」の所に色名を入れても反映されませんのでご注意を。(ここ紛らわしいですよね😅)

v1.29 より古いバージョンでは、テーマデザイナーでブランド色部分の文字色は変更できません。

「CSS を追加」機能は使えません。

最後に

テーマデザイナーを自力で実装する手順を紹介しましたが…やっぱりはじめから TD を搭載済みのテーマ出した方がいいですかね？(^^;

出すなら Vaster2 や Smart みたいに TD ありバージョンとなしバージョンの2つ用意するとか。

需要あるのかなあ…よかったらコメントでご意見お聞かせくださいm(__)m

2023/08/04 追記: テーマデザイナー搭載版をリリース

本日リリースした v.1.31 から TD 搭載版と非搭載版の2タイプにしました。

カード版にも適用したので F-light は全部で4種類となります。

ダウンロードはデモサイトからどうぞ。