ComusThumbz ドキュメント
HTML Markdown Print/PDF Plain Text
管理者ログイン

ドキュメントメニュー


Admin Access

テーママネージャー

このページが何をしているか

テーママネージャーは、ウェブサイト全体がどのように見えるかを制御することができます。 さまざまなカラースキームとスタイルを瞬時に切り替え、カスタムテーマを作成したり、さまざまな機会に複数のテーマを作成したりできます。 テーマをサイト全体に「見栄え」として考える - それぞれに独自の色、フォント、スタイリングがあり、ワンクリックで切り替えることができます。

[スクリーンショット: ページオーバービュー]

ここを取得する方法

ナビゲートへ 管理者パネル > テンプレートマネージャー > テーマ

ページについて

最初にテーママネージャーを開くと、カードやテーブルに表示されるすべてのテーマが表示されます(これらのビュー間で切り替えることができます)。 ページの上部にあるボタンで、新しいテーマを作成したり、他のインストールからテーマをインポートしたりできます。

統計と迅速な行動

非常にトップでは、次のようになります。

  • インポート ボタン - 他のサイトやバックアップからテーマを持参
  • 新しいテーマ ボタン - スクラッチから新鮮なテーマを作成する

注意: 「デモモード」という黄色のバナーが表示された場合は、デモンストレーションを表示し、変更はできません。 すべてのボタンは無効になります。

ナビゲーションタブ

ヘッダの下、異なるテンプレート管理ツールの9つのタブがあります。 ザ・オブ・ザ・ テーマ このページを閲覧する際にタブがハイライトされます。 他のタブでは、ファイル、機能、スタイル、レイアウト、翻訳、メディア、データベースの管理ができます。

テーマ表示エリア

メインエリアでは、すべてのテーマが表示されます。 各テーマの表示:

  • プレビューイメージ(またはイメージが設定されていない場合はパレットアイコン)
  • テーマ名と説明
  • バージョン番号と著者名
  • テーマが「アクティブ」であるかどうかを示すバッジ(現在のサイトにライブ)または「デフォルト」(フォールバックテーマ)
  • テーマを扱うアクションボタン

オプションを見る

2つのテーマを表示する方法を切り替えることができます。

  • グリッドビュー - プレビュー画像のビジュアルカードとしてテーマを表示します。 それぞれのテーマを閲覧し、素早く見てもらえるのに最適です。
  • リストビュー - テーマを詳細テーブルに表示します。 バージョン番号と著者を一目で確認する必要がある場合は、より良い。

共通タスク

新しいテーマを作成する方法

新しいテーマを作成することは、サイトの外観をカスタマイズするためのあなたの最初のステップです。

  1. クリック 新しいテーマ ページの上部にあるボタン。
  2. 表示されるポップアップウィンドウで、詳細を記入してください。
  • テーマ名 - テーマに「夏のセールテーマ」や「ダークナイトモード」のような思い出に残る名前をつけましょう
  • バージョン - これは "1.0.0" で事前充填されますが、必要に応じて変更できます
  • プロフィール - お名前または会社名を入力してください
  • コンテンツ - このテーマが何かについて短いメモを書く
  • 基礎テーマ - 別のテーマの設定から始める場合は、このリストから1つを選択します。 さもなければ「ゼロから始める」として残します
  1. クリック テーマの作成お問い合わせ

グリッドに新しいテーマが表示されます。 まだあなたのサイトに住んでいません - 別にそれを活性化する必要があります。

ヒント: ベーステーマを使用して、素晴らしいショートカットです。 現在の色が大好きですが、いくつかのことを微調整したいだけなら、ゼロから始まる代わりに既存のテーマから始めましょう。

[スクリーンショット: create-theme-modal]

テーマを活性化する方法

テーマをアクティブにすることで、すべての訪問者が閲覧できるようにウェブサイトに配信されます。

  1. グリッドまたはリストでアクティブにしたいテーマを見つけます。
  2. 緑のクリック アクティブ ボタン。
  3. 確認メッセージが表示されているかどうか確認します。 クリック お問い合わせお問い合わせ
  4. ページのリロードは一瞬後に自動的に行われます。

活性化したテーマは緑色の「アクティブ」バッジが表示され、すぐにこのテーマの色とスタイリングを使用します。

警告: テーマをアクティブにすることで、サイトの外観をすぐに変化させます。 最初にテーマをテストしたい場合は、サイトのテストバージョンでアクティブにしてください。

[スクリーンショット: アクティブテーマボタン]

テーマの色と設定を編集する方法

テーマを作成したら、色、フォント、その他のビジュアル要素をカスタマイズします。

  1. Find your theme in the grid or list view.
  2. Click the gray Edit button (pencil icon).
  3. The page changes to show the theme editor.

To change basic information:

  • Edit the Theme Name, Version, Author, or Description fields at the top.
  • Click Save Changes when you're done.

 

To change colors:

  • Scroll down to the "Theme Settings" section.
  • Find the color you want to change (like "Primary Color" or "Page Background").
  • Click the colored square next to the setting name.
  • Your browser's color picker opens - choose your new color.
  • The change saves automatically - you'll see a confirmation message in the bottom-right corner.

 

To change fonts or sizes:

  • Find the setting you want to change in the Theme Settings section.
  • Type your new value directly into the text box.
  • Click outside the box or press Tab to save.
  • A confirmation message appears when the change is saved.

 

  1. When you're finished editing, click Back to Themes at the top to return to the main list.
Note: Color changes save automatically as soon as you pick a new color. You don't need to click a save button for colors - just pick and go.

[Screenshot: edit-theme-panel]

How to Make Changes Appear on Your Website

After you change theme settings, you need to generate a CSS file to make those changes appear on your live site.

  1. While editing a theme, click the Generate CSS button.
  2. A file named themevariables.css downloads to your computer.
  3. Place this file in your website's theme folder at: themes/{theme-name}/css/variables.css

Your frontend website now displays the updated colors and styling.

Tip: If you're not sure how to upload files to your server, ask your web developer or hosting support to help place the CSS file in the correct location.

How to Clone a Theme

Cloning creates an exact copy of a theme, which is perfect for creating variations without affecting your original.

  1. Find the theme you want to copy.
  2. Click the Clone button (overlapping squares icon).
  3. A popup appears with a suggested name like "My Theme (Copy)".
  4. Change the name if you want something different.
  5. Click Clone Theme.
  6. The page reloads and your new copied theme appears in the list.

The new theme has all the same colors and settings as the original. You can now edit the copy without changing the original theme.

Tip: Cloning is great for seasonal variations. Clone your main theme, adjust a few colors, and save it as "Holiday Theme" or "Summer Theme."

[Screenshot: clone-theme-modal]

How to Export a Theme

Exporting saves your theme as a file you can share or use on another website.

Click Edit on the theme you want to export.Click the Export Theme button.

  1. A file named themeYYYY-MM-DD.json downloads to your computer.

Keep this file safe - you can import it on other installations of your software or use it as a backup.

How to Import a Theme

Importing brings in a theme from another installation or from a backup file.

  1. Click the Import button at the top of the page.
  2. Open the JSON file you want to import in a text editor.
  3. Copy all the text from the file.
  4. Paste it into the large text box in the import window.
  5. Click Import Theme.

If the import succeeds, the new theme appears in your theme list. If it fails, you'll see an error message explaining what went wrong.

Warning: Only import themes from sources you trust. While the system checks for dangerous code, it's always safer to only import themes from reliable sources.

[Screenshot: import-theme-modal]

How to Delete a Theme

Deleting removes a theme permanently from your system.

  1. Find the theme you want to remove.
  2. Click the red Delete button (trash icon).
  3. A confirmation message appears. Click OK if you're sure.
  4. The theme is removed immediately.
Warning: Deleting is permanent and cannot be undone. Make sure you have a backup or export of the theme before deleting if you might want it later.
Note: You can only delete themes that are not currently active and not marked as the default theme. If you don't see a Delete button, the theme is either your active theme or your default backup theme.

View Modes

The Theme Manager offers two ways to view your themes, and you can switch between them anytime.

Grid View shows themes as cards with preview images. This is the default view and makes it easy to browse visually. You can see at a glance what each theme looks like and quickly spot the one you want.

List View shows themes in a table format with detailed information in columns. This view is better when you need to compare version numbers, see who created each theme, or work with many themes at once.

To switch views, click the grid icon or list icon buttons at the top right of the theme display area.

Settings and Options

Each theme has settings that control different aspects of your site's appearance:

Setting Type What It Controls Example Settings
Colors All colors on your site including buttons, links, backgrounds, and text Primary Color, Secondary Color, Success Color, Danger Color, Page Background, Card Background
Typography Font choices and text colors Font Family, Primary Text Color, Secondary Text Color, Muted Text
Layout Spacing and shapes Border Radius (controls how rounded corners are)
Backgrounds Page and element backgrounds Page Background, Card Background

When you edit a theme, these settings are grouped by category to make them easier to find.

Tips for New Users

Tip:
  • Start with a clone - Don't edit your active theme directly. Clone it first, make changes to the copy, then activate it when you're happy.
  • Name themes clearly - Use descriptive names like "Holiday 2025" or "Dark Mode" instead of "Theme 1" or "New Theme"
  • Export regularly - After making changes you like, export the theme as a backup. If something goes wrong, you can always re-import.
  • Test before activating - If possible, preview your changes in a test environment before activating a theme on your live site.
  • Document your colors - Keep notes about which colors you use and why, especially if you're matching a brand style guide.
  • Use base themes wisely - When creating a new theme, starting from an existing theme saves time on settings you don't want to change.

Troubleshooting

My theme changes aren't showing on my website

What you see: You changed colors in the theme editor and activated the theme, but your website still looks the same.

How to fix it:

  1. Make sure you clicked Generate CSS after making changes.
  2. Download the generated theme_variables.css file.
  3. Upload it to your website's themes/{theme-name}/css/ folder.
  4. Clear your browser cache by pressing Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).
  5. Check that the correct theme is activated by looking for the green "Active" badge.

 

I can't delete a theme

What you see: The Delete button doesn't appear on a theme, or clicking Delete shows an error.

How to fix it:

  • You cannot delete the theme that's currently active. Activate a different theme first, then come back and delete this one.
  • You cannot delete the default theme. The default theme is your fallback and must always exist for system stability.

 

The Import button won't work

What you see: Clicking Import doesn't open the popup window, or the Import button is grayed out.

How to fix it:

  1. Check if you see a yellow banner at the top saying "Demo Mode" - if so, you're in a demonstration and cannot make changes.
  2. Refresh the page in case your session expired.
  3. Make sure your browser isn't blocking popups from the admin panel.

 

My color changes aren't saving

What you see: You pick a new color, see a success message, but when you reload the page the old color is back.

How to fix it:

  1. Open your browser's Developer Tools (press F12).
  2. Look at the Console tab for any error messages in red.
  3. Check the Network tab to see if the save request failed.
  4. If you see "Demo Mode" messages in the network responses, you're in a demonstration mode where changes can't be saved.
  5. Try logging out and back in - your session may have expired.

 

Import shows "Invalid theme data" error

What you see: You pasted theme data and clicked Import, but got an error saying the data is invalid.

How to fix it:

  1. Make sure you copied the entire contents of the JSON file, from the first { to the last }.
  2. Check that the file is actually a theme export - it should have fields like "name," "version," and "settings."
  3. Paste the JSON into a validator website like jsonlint.com to check if it's valid JSON format.
  4. If someone sent you the theme file, ask them to re-export it as there may have been an issue with the original export.

 

Page When to Use It
Template Dashboard Go here to see an overview of all template management tools and create system backups
Style Manager Use this when you want to make more advanced CSS customizations beyond basic theme settings
File Editor Edit theme template files directly when you need to change HTML structure or add custom code
Feature Toggles Turn site features on or off without needing to edit themes

Last updated: February 4, 2026

Related Pages