ここではボタンのフォント、色などの汎用的なスタイル編集を紹介する。この方法は汎用テンプレートでのみ行える。

• 04B-1 ボタンのスタイルの（汎用的な）編集

独自テンプレートでのボタンスタイル、あるいは汎用テンプレートでのユニークなボタンスタイルは CSS で指定するので、以下を参照する：

CSS を使ったユニークなスタイル変更は以下を参照します。

• 04B-2 ボタンを記述する HTML/CSS コード
• 04B-3 ボタンのユニークスタイルを作成する
• 04B-4 ボタンの背景に画像を表示する
• 04B-5 影付きボタンを作る

スタイル編集と異なるが、ボタンに貼るリンクで、ページ内のアンカーにリンクする方法は以下を参照します。

• 04B-6 ボタンにページ内リンクを貼る

①「管理メニュー」から「デザイン」＞「スタイル」を選択する。

②「詳細設定」を［オン］にする。

③ マウスカーソルがローラーマークに変わるので、編集したいボタンをクリックする。

フォント：下向きの矢印をクリックすると、フォント一覧がプルダウンで表示されるので、好きなフォントを選ぶ。

[キャラクター] タブで「日本語」を選択すると、「日本語」に関連したフォントのみ一覧に表示させることも可能。キャラクターは複数の言語を選択することも可能。

[フィルター] タブではフォントのカテゴリ（ゴシック/明朝/手書き/装飾）で絞り込むことができる。

キャラクターとフィルターとを設定して絞り込むことも可能。

フォントサイズ：下向きの矢印をクリックすると、プルダウンで数字が現れるので、好きな数字を選ぶ。

ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。

フォントカラー（active）は、マウスがボタンの上に乗ったときにフォントの色を変化させたい場合のカラー。

ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。

背景色（active）は、マウスがボタンの上に乗ったときに色を変化させたい場合のカラー。

ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。

枠の色（active）は、マウスがボタンの上に乗ったときに色を変化させたい場合のカラー。

枠線の太さを選ぶことができる。

角丸の量を指定して好みのボタンの形に変更できる。

スタイルで設定を変更した後、変更前の状態に戻すことができる。

ボタンの設定を変更したら、「保存」ボタンをクリックする。

追加されたボタンの HTML/CSS コード記述をまとめる。

これらは使用するレイアウトによって異なる。ここではTokyoレイアウト、プリセットTokyoで作成したボタンとそれを構成する HTML/CSS コードを調べた

スタイルの違うボタンを横に並べた上の図を見ても分かるように、スタイル２ボタンは、たぶん上側のマージン（margin-top）値が他の二つとは違うことが分かる。

スタイル１

<div id="cc-m-14139949278" class="j-module n j-callToAction ">

<div class="j-calltoaction-wrapper j-calltoaction-align-1">

<a class="j-calltoaction-link j-calltoaction-link-style-1"

data-action="button" href="/"

data-title="サービスの詳細">

        サービスの詳細    </a>

</div>

</div>

スタイル２

<div id="cc-m-14139949378" class="j-module n j-callToAction ">

<div class="j-calltoaction-wrapper j-calltoaction-align-1">

<a class="j-calltoaction-link j-calltoaction-link-style-2"

data-action="button" href="/"

data-title="サービスの詳細">

        サービスの詳細    </a>

  </div>

</div>

スタイル3

<div id="cc-m-14139949478" class="j-module n j-callToAction ">

<div class="j-calltoaction-wrapper j-calltoaction-align-1">

<a class="j-calltoaction-link j-calltoaction-link-style-3"

data-action="button" href="/"

data-title="サービスの詳細">

        サービスの詳細    </a>

</div>

</div>

<div id="○○○○○" class="j-module n j-callToAction "> ----------------①

<div class="j-calltoaction-wrapper j-calltoaction-align-2"> ----------②

<a class="j-calltoaction-link j-calltoaction-link-style-1"  ----------③

data-action="button" href="/"

data-title="新しいボタン"＞

新しいボタン       </a>

</div>

</div>

① ボタンのクラス名:

j-callToAction

② ボタンを囲むラッパーと、ラッパー内でのボタンの配置を示すクラス名：

j-calltoaction-wrapper         共通（ボタン表示領域を指定する）

j-calltoaction-align-1           左揃え（領域内のボタンの配置）

j-calltoaction-align-2           中央揃え（同上）

j-calltoaction-align-3           右揃え（同上）

③ ボタンそのもののクラス名：

j-calltoaction-link                 共通

j-calltoaction-link-style-1     スタイル１

j-calltoaction-link-style-2     スタイル２

j-calltoaction-link-style-3     スタイル３

汎用レイアウトTokyoでボタンを挿入したケースを紹介する

各クラス設定されているスタイル指定：

■　配置ー左揃え

.j-calltoaction-align-1 {

text-align: left;

}

■　配置ー中央揃え

.j-calltoaction-align-2 {

text-align: center;

 }

■　配置ー中央揃え

.j-calltoaction-align-3 {

text-align: right;

 }

■　スタイル１のボタン

.j-calltoaction-link-style-1:link｛

color: #f7f8f8;

background-color; #74A72D;

border: 1px solid #74A72D;

font-size: 14px;

line-height: 1.5;

}

.j-calltoaction-link-style-1 {

border-radius: 2px;

cursor: pointer;

display: inline-block;

margin: 16px 0;

padding: 10px 20px;

text-align: center;

｝

■　スタイル２のボタン

.j-calltoaction-link-style-2｛

border-radius: 2px;

background-color; transparent;

border: 2px solid #74A72D;

cursor: pointer;

display: inline-block;

margin: 10px 0;

padding: 10px 20px;

text-align: center; 

font-size: 14px;

line-height: 1.4;

｝

■　スタイル３のボタン 

.j-calltoaction-link-style-3:link｛

color: #f7f8f8;

background-color: #74A72D;

border: 1px solid #74A72D;

font-size: 14px;

line-height: 1.5;

}

.j-calltoaction-link-style-3 {

border-radius: 50px;

padding: 10px 20px;

cursor: pointer;

display: inline-block;

margin: 16px 0;

text-align: center;

｝

■　共通

.j-calltoaction-link {

vertical-align: middle;

｝

a:link {

color: #74A72D;

transition: color .3s ease-in;

text-decoration: none;

} 

ここではボタンにユニークなスタイルを、CSS を使って設定する方法を紹介する。

汎用的なスタイルの変更は 04B-1 ボタンのスタイル編集を参照しましょう。

ここでは、ボタン幅をページ幅一杯にし、テキストに影を付けるスタイルを指定する。

また後のステップ（04B-4）で背景に画像を表示するので、背景画像のスタイルも指定する。

コードの最初の２行と最後の２行はすでに入力済みの場合もある。そのときはこれら４行を除いて貼り付けること。

<style type="text/css">

/*<![CDATA[*/

/*]]>*/

</style>

（以下の点線内の、グレー部分以外の10行をコピーする）

<style type="text/css">

/*<![CDATA[*/

a.j-calltoaction-link {

  width: 100%;

  background-image: url('');

  background-repeat: no-repeat;

  background-position: left center;

  border: 1px solid #666 !important;

  margin : 0 !important;

  text-shadow: 2px 2px 2px rgba(30,30,30,1);

  -webkit-text-shadow: 2px 2px 2px rgba(30,30,30,1);

}

/*]]>*/

</style>

ここでは.j-calltoaction-linkにスタイルを指定するので、同じサイトで使うすべてのスタイルのボタン、すなわちスタイル１も２も３にも同様に適用されてしまう。

特定のスタイルのボタンにのみユニークスタイルを適用するのであれば、

a.j-calltoaction-link

を、

a.j-calltoaction-link-style-1、

a.j-calltoaction-link-style-2、

a.j-calltoaction-link-style-3

等とスタイルを選んだスタイル記述にすればよい。

プレビューで表示する

作成したボタンの背景に、画像を表示する。これには非公開のページに背景画像を貼り付け、ＵＲＬを取得してスタイルシートで背景として設定します。

「ヘッダー編集」画面で「ホームページ全体」タブを表示します。

挿入した背景画像が大きすぎて全体像がボタンで切れてしまう場合は、

1. 画像のサイズを変更する、あるいは
2. ボタンの高さを調整する

ここでは２）のボタンの高さを調整する方法を紹介する。

ボタンの高さを調整するには、04B-1 汎用スタイルでのボタンの編集で、フォントサイズを変更する方法がある。

この場合は、フォントサイズが１４pxなのを、２０あるいは２４pxにする。

もうひとつの方法は、スタイル記述を追加する方法がある。

「管理メニュー」＞「基本設定」＞「ヘッダー編集」＞「ホームページ全体」で以下のスタイル指定を追加する：

.j-calltoaction-link {

padding: 12px 20px 12px 60px !inportant ;

font-size: 24px !important ;

}

上のスタイルシートコードでボタンの中での余白を、上12px、右20px、下12px、左60px とする。ボタンに表示されるリンク文字列の左右のバランスを考慮している。

フォントサイズを24pxと指定する。

以下のスタイルを追加します。

<style>

.j-calltoaction-link {

box-shadow: 3px 3px 5px rgba(0,0,0,0.3);

}

</style>

スタイル指定の説明

box-shadow: 値

ボックスが影付きで表示されるようにする。

値：影についての指定値、または none

ボタンには、各ページへのリンクを貼る機能はありますが、ページ内のアンカーにリンクを貼ることができません。以下は、HTMLコードを使ってボタンを作成する方法です。同時に、きめ細やかなスタイルの設定ができることも紹介しています。

※ソースの文字列に付けられた色は、機能の説明のために付けたものです。色は➌の説明と合っています。貼りつけするときはプレーンテキストにて貼り付けます。

<div class="j-module n j-callToAction">

    <div class="j-calltoaction-wrapper j-calltoaction-align-1">

        <a class="j-calltoaction-link j-calltoaction-link-style-1"

style="width:20em; margin-top: 0px;

data-action="button"

href="○○○リンク先アドレス"

data-title="ボタンの名前">ボタンの名前</a>

    </div>

</div>

１）ボタンの配置指定

2行目　<div class="j-calltoaction-wrapper j-calltoaction-align-1">

j-calltoaction-align-1：左揃え

j-calltoaction-align-2：中央揃え

j-calltoaction-align-3：右揃え

２）ボタンのスタイル

３行目　<a class="j-calltoaction-link j-calltoaction-link-style-1"

j-calltoaction-link-style-1：スタイル１

j-calltoaction-link-style-2：スタイル２

j-calltoaction-link-style-3：スタイル３

３）ボタンの幅、上余白の指定

４行目

style="width:20em; margin-top: 0px;

例：幅20文字分、上側の余白を無しにする（0px）

４）リンク先の設定

６行目

href="○○○リンク先アドレス"

リンク先のアンカーポイントのID等をコピーし、「○○○リンク先アドレス」に貼り付け、置き換える

５）ボタンの名前の設定

７行目

data-title="ボタンの名前">ボタンの名前

「ボタンの名前」は、ボタンの表面に表示される文字列で置き換えます。