Free-CMS でデザインテーマを変更する方法

このページでは、Free-CMS デザインテーマを変えてサイトの見た目を変更する方法を解説しています。


テーマを変更する方法

デザインテーマは「サイトデザイン」タブの「テーマ設定」から変更できます。

dcf06d6facdd5b1d


「テーマを変更する」ボタンを押すと、プレビューが開いてテーマを切り替えた時のデザインを見ることができます。

好きなテーマに変更して保存すれば設定が反映されます。

2f72c945f237ebae



AIで新しいテーマを作成する(APIを使ったやり方)

AIにテーマを作ってもらう機能も実験的に実装しているので使い方を簡単に説明します。


1.「サイト詳細設定」 → 「AIチャット」を開いて google や chatgpt のAPIキーを設定。

(どちらも無料で設定できます)

538bddd63f469928


サイトデザイン → テーマ設定 → 「AIアシスタントでテーマを作成」ボタンをクリック。

f35d1bae8c635ce2


以下のAIアシスタントウィンドウが出てきます。

ウィンドウ上部でプロバイダーやAIモデルの変更ができるので、まずは google や chat GPT の高機能なモデルを選択します。(API キーを設定しないと選択肢に出ません)

bc62e8a56fb280ef


次に、「テーマの新規作成」タブが開いていることを確認してから作りたいテーマの内容を入力して「この設定でテーマを自動作成する」をクリックします。

2ecfa5249dd4d9b5


すると、AIがテーマとして使えるコードを作成してくれて、それが自動的に入力されて表示されます。

f85e759f918c464e

(gemini-3.6-flash を使って無料枠の範囲内でテーマを作成できることを確認)


コードからプレビューに切り替えると見た目を確認できます。

d73e7dfb5ccab475

あとはテーマ名を入力して保存すればテーマリストに追加されるので、テーマ選択画面から選択するとサイトに反映されます。


外部AIチャットでテーマを作成する

アナログですが API キーを使うよりも簡単なやり方です。


「外部AIで作成」タブにある「素材用AIプロンプトをコピー」ボタンをクリックするとテーマ作成用のプロンプトがコピーされるので、それをブラウザで開いた claude や gemini に ctrl+v で貼り付けてそのまま送ります。

e3e7bd6567fadf4e


プロンプトを送ると、どんなテーマにしたいかを聞かれるのでそれに答えます。

f93db2eaa90285c6.png


作りたいテーマの特徴を答えるとテーマのコードを生成してくれます。

18554f387866b067


作成されたコードをコピーしてAIアシスタントウィンドウのコード領域に貼り付けます。

e3e22888c54997b5


プレビューで見た目を確認して、見た目が気に入ったら名前を付けて保存できます。

cbde3b5123cf8866


既存のテーマを修正する

AI に指示を送る時、コード欄の内容も一緒に送信されます。

修正したいテーマを選択してコード欄に表示してから送ると、そのテーマを元に新しい派生テーマを作ったり細かいところを修正したりできます。

修正はAIの性能や指示の仕方によって成功率が変わります。

コード欄に書いてあるものは全て添付されるので、関係のないテキストを入力しているとそれも送られてしまうので注意して下さい。