「テーマエディター」とは?

「テーマエディター」とは、メクマのテーマ(デザインテンプレート)の各種項目を設定できるページです。
ウェブサイトを構成する各パーツの色の他、ウェブサイトのロゴやファビコンも設定できます。
設定を変更すると画面右側にリアルタイムで反映されるため、実際の見た目を確認しながらデザインを調整できます。(「保存」ボタンをクリックするまでは一般ユーザーに変更後のデザインが表示されることはありません。)

No. 名称 説明
01 テーマ 現在設定中のテーマ名が表示されます。
02 「保存」ボタン クリックすると設定内容を保存し、一般ユーザー向けの表示に反映させます。
03 デザインの各種設定 設定を行うデザインの種類を以下から選択します。
  • カラー【全般】 :
     テーマカラーやテキスト色など、ウェブサイト全般に適用されるパーツの色
  • カラー【ボタン】 :
     各種ボタンの色
  • カラー【その他】 :
     【全般】および【ボタン】以外のパーツの色
  • 背景 :
     ヘッダーやコンテンツ、フッターなどの背景色
  • ロゴ :
     ウェブサイトのロゴ画像およびファビコン画像
04 設定項目 「デザインの各種設定」で指定した内容に応じた各種設定項目を表示します。(詳細は後述)
05 テーマエディター用パネルの非表示化タブ クリックすると画面左側に表示されるテーマエディター用パネルを非表示化します。パネルが非表示化された状態でタブをクリックするとパネルを再表示します。
06 テーマエディター用の終了タブ クリックするとテーマエディターを終了し、通常モードでウェブサイトを表示します。

デザインの各種設定 : カラー【全般】

テーマカラーやテキスト色など、ウェブサイト全般に適用されるパーツの色を設定できます。

カラー【全般】 : テーマカラー

名称 説明
テーマカラー テーマを最も特徴付けるカラーです。以下の項目などで使用されます。(画像をクリックすると拡大表示されます)




テキスト ウェブサイトで一般的に使用されるテキストの色です。
テキスト(薄めの色) 通常より薄めの色でテキストを表示する際に使用される色です。

テキスト(警告・注意書き) 警告や注意書きを表示するテキストの色です。
リンクテキスト リンクテキストの色です。

区切り線やアウトライン(枠線)、
アイコンなど
区切り線やアウトライン(枠線)、アイコンなどの色です。


タブ・見出しの背景 タブや見出しの背景色です。 (アクティブなタブの背景色は白固定)


タブの枠線 タブの枠線の色です。
タブのテキスト タブ内に表示するテキストの色です。
タブの背景【ホバー時】 タブにカーソルを合わせた際の背景色です。
タブの枠線【ホバー時】 タブにカーソルを合わせた際の枠線の色です。
タブのテキスト【ホバー時】 タブにカーソルを合わせた際のタブ内のテキストの色です。
ヘッダーの各種アイコンと枠線 ヘッダーやトップパネルに表示されるアイコンとその枠線の色です。
ヘッダーの各種アイコン【ホバー時】 ヘッダーやトップパネルに表示されるアイコンにカーソルを合わせた際の色です。
フッターのコピーライト表記 フッターに表示されるコピーライト表記の色です。
フッターのコピーライト表記内の会社・
サービス名 【ホバー時】
コピーライト表記の含まれる会社・サービス名にカーソルを合わせた際の色です。
「カラーのリセット」ボタン 設定内容を前回「保存」ボタンをクリックした時点の状態にリセットします。

デザインの各種設定 : カラー【ボタン】

ウェブサイトに表示される各種ボタンの色を設定できます。

名称 説明
ボタン(タイプ1) ボタン(タイプ1)とは:
会員や商品情報の登録・更新、注文の実行など、クリックすることによりメクマ上で保持している情報に変化が生じるボタンです。


ボタン(タイプ1) ボタン(タイプ1)の背景色です。
ボタン(タイプ1)のテキスト ボタン(タイプ1)内に表示されるテキストの色です。
ボタン(タイプ1)のボーダー(外枠) ボタン(タイプ1)のボーダー(外枠)の色です。
ボタン(タイプ1)【ホバー時】 ボタン(タイプ1)にカーソルを合わせた際の背景色です。
ボタン(タイプ1)のテキスト【ホバー時】 ボタン(タイプ1)にカーソルを合わせた際のテキストの色です。
ボタン(タイプ1)のボーダー(外枠)【ホバー時】 ボタン(タイプ1)にカーソルを合わせた際のボーダー(外枠)の色です。
ボタン(タイプ2) ボタン(タイプ2)とは:
ボタン(タイプ1)およびボタン(タイプ3)以外のボタンです。メクマ上でもっとも利用頻度の高い種類のボタンです。


ボタン(タイプ2) ボタン(タイプ2)の背景色です。
ボタン(タイプ2)のテキスト ボタン(タイプ2)内に表示されるテキストの色です。
ボタン(タイプ2)のボーダー(外枠) ボタン(タイプ2)のボーダー(外枠)の色です。
ボタン(タイプ2)【ホバー時】 ボタン(タイプ2)にカーソルを合わせた際の背景色です。
ボタン(タイプ2)のテキスト【ホバー時】 ボタン(タイプ2)にカーソルを合わせた際のテキストの色です。
ボタン(タイプ2)のボーダー(外枠)【ホバー時】 ボタン(タイプ2)にカーソルを合わせた際のボーダー(外枠)の色です。
ボタン(タイプ3) ボタン(タイプ3)とは:
「キャンセル」「リセット」「削除」「戻る」など、処理を中止したり状態を元に戻すボタンです。

ボタン(タイプ3) ボタン(タイプ3)の背景色です。
ボタン(タイプ3)のテキスト ボタン(タイプ3)内に表示されるテキストの色です。
ボタン(タイプ3)のボーダー(外枠) ボタン(タイプ3)のボーダー(外枠)の色です。
ボタン(タイプ3)【ホバー時】 ボタン(タイプ3)にカーソルを合わせた際の背景色です。
ボタン(タイプ3)のテキスト【ホバー時】 ボタン(タイプ3)にカーソルを合わせた際のテキストの色です。
ボタン(タイプ3)のボーダー(外枠)【ホバー時】 ボタン(タイプ3)にカーソルを合わせた際のボーダー(外枠)の色です。
「カラーのリセット」ボタン 設定内容を前回「保存」ボタンをクリックした時点の状態にリセットします。

デザインの各種設定 : カラー【その他】

【全般】および【ボタン】以外のパーツの色を設定できます。

名称 説明
グローバルメニューの背景 グローバルメニューの背景色です。
グローバルメニューの背景【ホバー時】 グローバルメニューにカーソルを合わせた際の背景色です。
グローバルメニューのリンクテキスト グローバルメニュー内に表示するリンクテキストの色です。
グローバルメニューのリンクテキスト【ホバー時】 グローバルメニュー内に表示するリンクテキストにカーソルを合わせた際の色です。
商品詳細ページに表示する価格 商品詳細ページに表示される価格の色です。
商品画像の上に表示する価格 商品画像の上に表示される価格の色です。
商品画像の上に表示する価格の背景 商品画像の上に表示される価格の背景色です。
ステップ表示の背景 出品者登録や商品登録時に表示される作業ステップの背景色です。
ステップ表示のテキスト 作業ステップ内に表示されるテキストの色です。
ステップ表示の背景【現在のステップ】 現在の作業ステップの背景色です。
ステップ表示のテキスト【現在のステップ】 現在の作業ステップ内に表示されるテキストの色です。
レビューの★ レビューの★の色です。
レビューの★別分布の背景 レビューの★別分布を表すバーの背景色です。
「お気に入りに追加」アイコン 「お気に入りに追加」アイコンの色です。
「お気に入りに追加」アイコン【ホバー時】 「お気に入りに追加」アイコンにカーソルを合わせた際のアイコンの色です。
「カラーのリセット」ボタン 設定内容を前回「保存」ボタンをクリックした時点の状態にリセットします。

デザインの各種設定 : 背景

ウェブサイトの背景に関する設定を行います。

名称 説明
一般
背景色 ウェブサイト全体の背景色を指定します。
ヘッダー
背景色 ヘッダーの背景色を指定します。
全幅表示 オンにすると設定したヘッダーの背景色が全幅表示されます。
コンテンツ
背景色 コンテンツエリアの背景色を指定します。
全幅表示 オンにすると設定したコンテンツエリアの背景色が全幅表示されます。
フッター
背景色 フッターの背景色を指定します。
全幅表示 オンにすると設定したフッターの背景色が全幅表示されます。
その他
「背景のリセット」ボタン 設定内容を前回「保存」ボタンをクリックした時点の状態にリセットします。

デザインの各種設定 : ロゴ

ウェブサイトに表示するロゴおよびファビコンに関する設定を行います。

名称 説明
「テーマ」タブ トップパネルなどに表示するウェブサイトのロゴ画像をアップロードします。ロゴ画像に対するAlt用テキストも登録できます。
「ファビコン」タブ ブラウザのタブなどに表示するウェブサイトのファビコン画像をアップロードします。

お役に立ちましたか?

はい いいえ
お役に立ちましたか
理由をお聞かせください
フィードバックありがとうございました