テーマの編集方法

Live Commerceのデザインをカスタマイズするには、HTML,CSSの編集スキルが必要です。
編集するには、Live Commerceのテーマ編集エディタ、もしくはDreamweaverなどのオーサリングソフトを使用します。

ここでは、Live Commerceのテーマ編集エディタを使って標準でインストールされているテーマ、theme_0を編集する手順について説明します。
 

テーマをコピーして新しいテーマをつくる

テーマは直接編集するのではなく、テーマのコピーを作成して編集することをお勧めします。テーマを切り替えることで、いつでも初期状態に戻すことができます。
以下の手順でテーマのコピーを作成します。

  1. FTPソフトをお持ちでない場合は、FileZilla(Client)やFFFTPなどのフリーソフトをダウンロードします。FTPソフトを起動し、お申し込み時に送付される「Live Commerce納品メール」に記載されたFTP情報(ホスト名/ユーザー名/パスワード)を使ってサーバに接続します。

  2. リモートサイト側(ここでは画面右側)に、Live Commerceサーバ内のテーマディレクトリが表示されます。theme_0のテーマフォルダを選択し、ローカルサイト(ローカルPC)の保存したいディレクトリを選んだ状態でドラッグ&ドロップするか、マウス右メニューで「ダウンロード」を選択します。
    サイト制作-2

  3. ファイル管理ソフト(Windows エクスプローラーまたはMac Finder)で、theme_0フォルダがお使いのパソコン上にコピーされたことを確認します。
    サイト制作-3

  4. コピーしたtheme_0フォルダの直下にある、config.phpファイルをテキストエディタで開きます。’class theme_0’のtheme_の後を変更し、別のクラス名にして保存します。ここではtheme_eva とします。
    テーマ編集-2

    必須ではありませんが、テーマの情報を編集すると管理画面で分かりやすくなります。
    ここでは、テーマ名($_thmName)とテーマの説明($_desc)の値を編集しています。
    テーマ編集-3

  5. ファイル管理ソフト(Windows エクスプローラーまたはMac Finder)で、フォルダ名をtheme_0からクラス名(theme_eva)に変更します。

  6. theme_evaフォルダを、ドラッグ&ドロップでサーバにアップロードします。
    テーマ編集-3

  7. サイト設定 > テーマ管理 を開き、theme_evaが表示され、テーマ名とテーマの説明が変更されていることを確認します。
    テーマ編集-4

 

テーマを編集する

 

オンラインのテーマにする場合

まだサイトがオープンしてない場合は、「オンラインのテーマ」に指定して編集を行います。

  1. サイト設定 > テーマ管理 を開き、コピーしたテーマ(theme_eva)をオンラインのテーマに指定します。

  2. テーマ画像の右側または画面上部にある[テーマ編集]ボタンをクリックして、テーマ編集エディタを開きます。
    テーマ編集-5

  3. 編集したいテーマを選び、[表示]ボタンをクリックします。
    テーマ編集-6

  4. 編集したいファイル名をクリックしてコードを表示し、編集を行います。
    テーマ編集-7

    1. テーマ名 – 現在選択されているテーマ名を表示します。変更する場合は、必ず[表示]ボタンをクリックしてください。
    2. 表示 – 選択したテーマのファイルを表示します。
    3. 画像/ボタン/LOGO画像設定の各タブへ移動します。
    4. 表示エリア – 選択されたファイルのコードを表示します。
    5. 切り替え – チェックをはずすと、文字が色分けされていないテキストとして表示します。
    6. ファイル一覧 – テーマフォルダの直下にあるphpファイル、indludeフォルダにある共通ファイル、cssフォルダにあるファイルを一覧で表示します。編集したいファイル名をクリックすると、コードが表示されます。
    7. 更新 – クリックすると、編集内容がサーバ上のファイルに上書きされます。
    8. キャンセル – クリックすると、これまでの編集内容を保存せずにテーマ編集エディタを閉じます。
  5. 現在選択しているファイル名は、ブラウザのURLで確認できます。
    テーマ編集-8

 

オンラインのテーマにしない場合

すでにサイトがオープンしている場合に別のテーマを制作したい場合は、「オンラインのテーマ」に指定せず、以下の方法で確認しながら編集することができます。

  1. サイト設定 > テーマ管理 を開き、画面上部の[テーマ編集]ボタンをクリックします。
  2. テーマ編集エディタで編集したいテーマを指定し、編集した後に[更新]ボタンをクリックします。
  3. サイトのURLの後ろに、テーマ名を指定してアクセスします。
    http://サイトのURL/theme/テーマ名
    例えば、http://サイトのURL/login/index/theme/テーマ名 とした場合は、ログインページを指定したテーマで表示します。

 

テーマへの文言の記述

1言語しか扱わないサイトなら、サイトに表示する文言をテーマファイルに直接記述しても問題ありませんが、多言語で運営するサイトではテーマに直接文言を記述しないようにします。サイトの表示言語を切り替えると文言が適切な言語で表示されるように、言語翻訳で多言語のデータを登録し、登録したコード名をテーマに記述します。

Was this article helpful?