1. HOME
  2. お困りの際にはお読みください
  3. ページを作成・編集する
  4. ページテーマを登録する

ページテーマを登録する

本記事では、maker townにおいて、ページテーマを登録する手順を紹介します。

はじめに

maker townでは、管理画面(ページテーマ)でフロントサイトのページテーマの設定ができます。
設定項目・機能は以下の通りです。

  • ページの配色:メインカラー、ベースカラー(背景色)
  • ボタンの配色:背景色、文字色、枠線色
  • テキスト、リンクの配色
  • フォント
  • ヘッダ、フッタ、ナビゲーション:サンプルのTwig(HTMLのようなもの)をデフォルトで設定
  • ロゴ:ロゴ押下でトップ画面へ戻る

ページテーマを登録する

ページテーマ編集画面の表示

ページテーマ編集画面を表示します。表⽰⽅法は2通りあります。

方法1.画⾯上部のリンクをクリックします。

方法2.ナビゲーションメニューから「ページテーマ」をクリックし、ページテーマ編集画面を表示します。

ページテーマ編集画面

ページテーマ編集画面が表示されますので、各項目について登録します。

各設定項目

メインカラー

ページのメインカラー(ポイントになる部分のカラー)を指定します。
以下の3通りの方法で選択ができます。

・カラーパレットでの選択
・RGBでの指定
・スポイトアイコンをクリックし、スポイトでPCディスプレイ上のカラーを選択する

ベースカラー

ページのベースカラー(背景色)を選択します。

※色の選択方法はメインカラーと同様です。

favicon

ページのファビコン(ブラウザのタブに表示されるアイコン)を登録します。

ico、PNG、JPG、GIF等の画像形式が使用可能です。

コンバージョン

「注文」、「会員登録」といったコンバージョンボタンの背景色、文字色、枠線色を選択します。

※色の選択方法はメインカラーと同様です。

回遊

「詳細を見る」、「戻る」、「続きを表示」といった回遊ボタンの背景色、文字色、枠線色を選択します。

※色の選択方法はメインカラーと同様です。

その他アクション

「ログイン」、「保存」、「追加」、「変更」、「削除」といったその他のボタンの背景色、文字色、枠線色を選択します。

※色の選択方法はメインカラーと同様です。

テキスト

テキストの色、フォントを登録します。

※色の選択方法はメインカラーと同様です。
※フォントは明朝体もしくはゴシック体を選択し、簡易的に切り替えることができます。
※コンマ区切り”フォント名”でフォントを記載することで、フォントの追加を行うことができます。
実際に表示されるフォントは、ページを閲覧しているデバイスに記載したフォントがあるか記載した順で左から見ていき、あればそのフォントが使われる形となります。(一つのみフォントを記載すると、そのフォントがないこともあるため複数登録推奨となります)
※フォントを削除する場合は、記載しているフォントの記述を削除します。

リンク

リンク部分の色を選択します。

※色の選択方法はメインカラーと同様です。

ヘッダ

ヘッダの背景色の選択、ロゴファイルの登録を行います。
また、TwigにHTMLコードを記載し、各アイコンやロゴの表示と、それらのデザイン、リンク先などの設定を行うことができます。

※色の選択方法はメインカラーと同様です。
※TwigにはHTMLコードの記載のみ可能です。
※デフォルトでサンプルTwigとして、ヘッダロゴ、カートのアイコン、ユーザメニューのアイコンの表示と、それらのデザイン、リンク先などの設定をしています。

ナビゲーション

Twigで画面上部ヘッダの下のメニューバーとして表示される、ナビゲーションの設定を行うことができます。

※TwigにはHTMLコードの記載のみ可能です。

フッタ

フッタの背景色の選択を行い、Twigでフッタの表示項目やリンクを設定することができます。

※デフォルトでサンプルTwigとして、SNSアイコンや、利用規約等のリンク表示と、それらのデザインやリンク先を設定しています。

関連記事