04B ボタンのスタイル
ボタンスタイルの汎用的な編集
独自のボタンスタイルを作成する
独自テンプレートでのボタンスタイル、あるいは汎用テンプレートでのユニークなボタンスタイルは CSS で指定するので、以下を参照する:
CSS を使ったユニークなスタイル変更は以下を参照します。
ボタンにページ内リンクを貼る
04B-1 ボタンスタイルの(汎用的な)編集
編集するボタンを選択する
①「管理メニュー」から「デザイン」>「スタイル」を選択する。
②「詳細設定」を[オン]にする。
③ マウスカーソルがローラーマークに変わるので、編集したいボタンをクリックする。
ボタンのフォントの変更
フォント:下向きの矢印をクリックすると、フォント一覧がプルダウンで表示されるので、好きなフォントを選ぶ。
[キャラクター] タブで「日本語」を選択すると、「日本語」に関連したフォントのみ一覧に表示させることも可能。キャラクターは複数の言語を選択することも可能。
[フィルター] タブではフォントのカテゴリ(ゴシック/明朝/手書き/装飾)で絞り込むことができる。
キャラクターとフィルターとを設定して絞り込むことも可能。
フォントサイズ:下向きの矢印をクリックすると、プルダウンで数字が現れるので、好きな数字を選ぶ。
ボタンのフォントカラーの変更
ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。
フォントカラー(active)は、マウスがボタンの上に乗ったときにフォントの色を変化させたい場合のカラー。
ボタンの背景色の変更
ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。
背景色(active)は、マウスがボタンの上に乗ったときに色を変化させたい場合のカラー。
ボタンの枠線の色の変更
ボックス内をクリックするとカラーパレットが表示されるので、好みの色を選ぶ。
枠の色(active)は、マウスがボタンの上に乗ったときに色を変化させたい場合のカラー。
ボタンの罫線サイズの変更
枠線の太さを選ぶことができる。
ボタンの形の変更
角丸の量を指定して好みのボタンの形に変更できる。
ボタンの標準の設定に戻す
スタイルで設定を変更した後、変更前の状態に戻すことができる。
変更を終了する
ボタンの設定を変更したら、「保存」ボタンをクリックする。
04B-2 ボタンを構成する HTML/CSS コード
追加されたボタンの HTML/CSS コード記述をまとめる。
これらは使用するレイアウトによって異なる。ここではTokyoレイアウト、プリセットTokyoで作成したボタンとそれを構成する HTML/CSS コードを調べた
スタイルの違うボタンを横に並べた上の図を見ても分かるように、スタイル2ボタンは、たぶん上側のマージン(margin-top)値が他の二つとは違うことが分かる。
各スタイルボタンのHTML
スタイル1
<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>
スタイル2
<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>
HTMLで使用されているクラス名
<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 スタイル1
j-calltoaction-link-style-2 スタイル2
j-calltoaction-link-style-3 スタイル3
CSS の例
汎用レイアウトTokyoでボタンを挿入したケースを紹介する
各クラス設定されているスタイル指定:
■ 配置ー左揃え
.j-calltoaction-align-1 {
text-align: left;
}
■ 配置ー中央揃え
.j-calltoaction-align-2 {
text-align: center;
}
■ 配置ー中央揃え
.j-calltoaction-align-3 {
text-align: right;
}
■ スタイル1のボタン
.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;
}
■ スタイル2のボタン
.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;
}
■ スタイル3のボタン
.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;
}
04B-3 ボタンのユニークスタイルを作成する
ここではボタンにユニークなスタイルを、CSS を使って設定する方法を紹介する。
汎用的なスタイルの変更は 04B-1 ボタンのスタイル編集を参照しましょう。
汎用スタイルの変更
ボタンの汎用スタイルの変更は「管理メニュー」の「デザイン」から「スタイル」と進んで「詳細設定」をオンにして行います。詳しくは 04B-1 ボタンのスタイル編集を参照します。
独自スタイル
ボタンのスタイルはスタイルシートを使って設定します。独自スタイルシートでスタイルを設定する一般的なガイドは、04C 独自スタイルシートを参照します。
➊ 管理メニューの[基本設定]を選択する
➋[ヘッダー編集]>[ホームページ全体]をクリックする
➌ 以下点線内のスタイル設定をコピーして、ヘッダー部分に貼りつける
ここでは、ボタン幅をページ幅一杯にし、テキストに影を付けるスタイルを指定する。
また後のステップ(04B-4)で背景に画像を表示するので、背景画像のスタイルも指定する。
コードの最初の2行と最後の2行はすでに入力済みの場合もある。そのときはこれら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にスタイルを指定するので、同じサイトで使うすべてのスタイルのボタン、すなわちスタイル1も2も3にも同様に適用されてしまう。
特定のスタイルのボタンにのみユニークスタイルを適用するのであれば、
a.j-calltoaction-link
を、
a.j-calltoaction-link-style-1、
a.j-calltoaction-link-style-2、
a.j-calltoaction-link-style-3
等とスタイルを選んだスタイル記述にすればよい。
❹[保存]するとボタンにスタイルが適用される
プレビューで表示する
04B-4 ボタンの背景に画像を表示する
作成したボタンの背景に、画像を表示する。これには非公開のページに背景画像を貼り付け、URLを取得してスタイルシートで背景として設定します。
➊[ナビゲーションの編集]をクリックし[新規ページを追加]をクリック
➋ ページ名を「素材置き場」とし、非表示にし、[保存]する
➌「素材置き場」ページをクリックして編集する
❹[コンテンツの追加]で[画像]から、[画像をアップロード]
❺ ボタンの背景に使う画像を選択し[開く]
ここでは、img_b095a.gif を使う。
※img_b095.gif (250 x 299)のサイズを変更したもの(46 X 56)
❻[素材置き場]ページをプレビューする
❼ アップロードされた画像を右クリック→[画像アドレスをコピー]を選択
❽ ページを編集状態にする
❾ 管理メニューの[基本設定]>[ヘッダ編集]をクリック
「ヘッダー編集」画面で「ホームページ全体」タブを表示します。
❿ background-image 属性の値に、コピーしたアドレスを貼り付ける
⓫[保存]をクリックする
⓬ プレビューで、ボタンの背景の画像を確認する
⓭ 挿入した背景画像の大きさ、あるいはボタンの高さを調整する
挿入した背景画像が大きすぎて全体像がボタンで切れてしまう場合は、
- 画像のサイズを変更する、あるいは
- ボタンの高さを調整する
ここでは2)のボタンの高さを調整する方法を紹介する。
もうひとつの方法は、スタイル記述を追加する方法がある。
「管理メニュー」>「基本設定」>「ヘッダー編集」>「ホームページ全体」で以下のスタイル指定を追加する:
.j-calltoaction-link {
padding: 12px 20px 12px 60px !inportant ;
font-size: 24px !important ;
}
上のスタイルシートコードでボタンの中での余白を、上12px、右20px、下12px、左60px とする。ボタンに表示されるリンク文字列の左右のバランスを考慮している。
フォントサイズを24pxと指定する。
04B-5 影付きボタンを作る
通常のボタン
影付きボタン
以下のスタイルを追加します。
<style>
.j-calltoaction-link {
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
</style>
スタイル指定の説明
box-shadow: 値
ボックスが影付きで表示されるようにする。
値:影についての指定値、または none
- キーワード inset(影をボックスの内側へつける)
- 2~4個の長さのサイズ値を半角スペースで区切って指定する(省略時の長さは0)
-
- 1個目の値は、水平方向への影の長さを指定する
- 2個目の値は、垂直方向への影の長さを指定する
- 3個目の値は、影のぼかしの距離(半径)を指定する
- 4個目の値は、広がり範囲を指定する
- 色の値を指定すると、影がその色になる
04B-6 ボタンにページ内リンクを貼る
ボタンには、各ページへのリンクを貼る機能はありますが、ページ内のアンカーにリンクを貼ることができません。以下は、HTMLコードを使ってボタンを作成する方法です。同時に、きめ細やかなスタイルの設定ができることも紹介しています。
➊ ボタンを追加する位置で「ウィジェット/HTML」をクリックします。
➋ 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>
➌ ボタンの詳細を設定する
1)ボタンの配置指定
2行目 <div class="j-calltoaction-wrapper j-calltoaction-align-1">
j-calltoaction-align-1:左揃え
j-calltoaction-align-2:中央揃え
j-calltoaction-align-3:右揃え
2)ボタンのスタイル
3行目 <a class="j-calltoaction-link j-calltoaction-link-style-1"
j-calltoaction-link-style-1:スタイル1
j-calltoaction-link-style-2:スタイル2
j-calltoaction-link-style-3:スタイル3
3)ボタンの幅、上余白の指定
4行目
style="width:20em; margin-top: 0px;
例:幅20文字分、上側の余白を無しにする(0px)
4)リンク先の設定
6行目
href="○○○リンク先アドレス"
リンク先のアンカーポイントのID等をコピーし、「○○○リンク先アドレス」に貼り付け、置き換える
5)ボタンの名前の設定
7行目
data-title="ボタンの名前">ボタンの名前
「ボタンの名前」は、ボタンの表面に表示される文字列で置き換えます。