­

テンプレートの種類やバージョンによって違う記述で構成されているものを見つけたのでご紹介します。

本記事では例として RSNoticia! を使用します。

ルートフォルダ/templates/rsnoticia/css/themes

このフォルダに入っているファイルが配色に関する設定を保持しています。例: template-9.css

テンプレートであらかじめ設定されている 6組の配色はこのフォルダの中の次のファイルに記述されています。

ルートフォルダ/templates/rsnoticia/css/themes/themes.json

どのようにするの?


最も簡単な方法は、既存のテーマの 1 つをコピーして新しい配色を作ることです(この例では一番最後にある Limey を参考にします)。

themes.json をダウンロードしてきてエディタで開きます。87 行目から 103 行目までを選択してコピーし、その後ろに貼り付けます。

"Limey": {
    "body-bg": "#f1f2ee",
    "navbar-bg": "#dcf763",
    "footer-bg": "#435058",
    "brand-primary": "#dcf763",
    "brand-secondary": "#848c8e",
    "text-color": "#2e2e2e",
    "heading-color": "#848c8e",
    "link-color": "#848c8e",
    "navbar-text": "#848c8e",
    "footer-text-color": "#bebfc2",
    "font-size-base": "16px",
    "googleTitleFont": "Oswald:300,regular,700",
    "googleContentFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "googleNavbarFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "font-size-navbar": "16px"
}

これを Wisky-Brown というテーマ名で追加します。第 1 色であるライム(この場合は #dcf763) を琥珀色(#ffc619) に、第 2 色であるグレー(この場合は #848c8e) を茶色に置き換えます。

"Wisky-Brown": {
    "body-bg": "#f1f2ee",
    "navbar-bg": "#ffc619",
    "footer-bg": "#435058",
    "brand-primary": "#ffc619",
    "brand-secondary": "#a7663b",
    "text-color": "#2e2e2e",
    "heading-color": "#a7663b",
    "link-color": "#a7663b",
    "navbar-text": "#a7663b",
    "footer-text-color": "#bebfc2",
    "font-size-base": "16px",
    "googleTitleFont": "Oswald:300,regular,700",
    "googleContentFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "googleNavbarFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "font-size-navbar": "16px"
}

注意:

既存の配色に追加する場合、前のセットとの間にカンマ(,) を入れるのを忘れないようにしてください。今回の例でいうと 103 行目の } の後です。これを忘れるとエラーになります。

"Limey": {
    "body-bg": "#f1f2ee",
    "navbar-bg": "#dcf763",
    "footer-bg": "#435058",
    "brand-primary": "#dcf763",
    "brand-secondary": "#848c8e",
    "text-color": "#2e2e2e",
    "heading-color": "#848c8e",
    "link-color": "#848c8e",
    "navbar-text": "#848c8e",
    "footer-text-color": "#bebfc2",
    "font-size-base": "16px",
    "googleTitleFont": "Oswald:300,regular,700",
    "googleContentFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "googleNavbarFont": "Raleway:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic",
    "font-size-navbar": "16px"
},
"Wisky-Brown": {
    "body-bg": "#f1f2ee",
       :
}

新しいテーマの選択


編集した themes.json を FTP などで元の場所にアップロードします。管理画面にあなたの新しい配色がリストに表示されるはずです。

追加されたテーマ

追記事項:

あなたがテンプレートを更新すると、これらのファイルは上書きされることに注意してください。あなたが作ったファイルを失ってしまわないようにバックアップを取ることをお勧めします。

­