新CMS完全対応マニュアル
適切な配置方法を
ボタンパーツは用途によって設定方法が異なる場合があります。
ページ崩れの原因にならないよう適切な配置、設定を行う必要があります。
ページ崩れの原因にならないよう適切な配置、設定を行う必要があります。
ページ編集画面内のパーツからボタンパーツを配置します。
- キャプチャは旧CMSの画面になります
◆ 操作パネルの各名称
①ボタンのテキスト設定
ボタンに設定するテキストをこちらに入力します。
②ボタンの太字設定
クリックするとボタンのテキストを太字に設定することができます。
カンプなどを参照し、必要に応じて設定します。
カンプなどを参照し、必要に応じて設定します。
③ボタンテキストのカラー設定
テキストのカラーを変更することができます。
④ボタンテキストのフォントサイズ変更
ボタンのフォントサイズを変更することができます。
⑤ボタンのカラー選択
同一のボタンデザインで色を変更したい場合に、「カラー選択」で選択できるオプションがCSSによって追加されることがあります。
その場合はこちらから選択することができます。
その場合はこちらから選択することができます。
⑥ボタンのサイズ設定
「小」「中」「大」の3種類から選択することができます。配置するエリア毎にサイズに関するルールがあります。
⑦角なし・角丸設定
ボタンの角なし、角丸を設定することができます。（デフォルトでは角あり）
⑧ボタン配置
「左寄せ」「中央寄せ」「右寄せ」から適切なものを選択してください。
以下のページをご参照ください。
ボタンにリンクを設定する場合の方法については
こちらのページをご確認ください。
こちらのページをご確認ください。
リンク先によってはこちらの設定を行ってください。
注意事項
「リンク設定」をしないと、公開ページおよびプレビュー画面でボタンが表示されませんのでご注意ください。
| 新CMSのボタン | 旧CMSのボタン | |
|---|---|---|
| 配置した時の デフォルトの状態 |
デザインパーツの場合
※デフォルトパーツの場合はなし |
デザインなし
|
| クラスの設定 |
不必要 |
必要 |
| ベースデザイン設定 | デザインパーツの場合 →影響を受ける |
影響を受けない |
デザインパーツを使用することでデザインが設定されているボタンを配置することができます。
デザインパーツとして使用できるボタンは3種類（ボタン1、ボタン2、ボタン3）です。
デザインパーツとして使用できるボタンは3種類（ボタン1、ボタン2、ボタン3）です。
ベースデザイン設定にボタンの項目があり、こちらでボタンの設定を変更することが可能です。
塗りを「縁取り」に設定する場合の注意点
塗りに「縁取り」を選択する場合、少しわかりにくい仕様になっていますので、設定にご注意ください。
・ボタンカラー … 「反転」選択の場合のホバー時テキストカラーに適用される
・テキストカラー … 通常時のテキストと枠線の色に、「反転」選択の場合のホバー時には背景色に適用される
・ボタンカラー … 「反転」選択の場合のホバー時テキストカラーに適用される
・テキストカラー … 通常時のテキストと枠線の色に、「反転」選択の場合のホバー時には背景色に適用される
※上記の仕様上、「ボタンカラー」と「テキストカラー」に同じ色を入れてしまうと、ホバーの挙動に「反転」を選択した際、ホバー時にボタンテキストが視認できない状態になってしまいます。設定後には必ずホバーの挙動までご確認ください。
形状、塗り、ボタンカラー、テキストカラー、ホバー時の挙動など、選択することで変更できます。
資料ダウンロードボタン、お問い合わせボタンのアイコンを変更することができます。
大・中・小それぞれ設定できます。
ボタンの最小幅（ボタンサイズ）を大・中・小それぞれPCとSPも分けて設定できます。
デフォルトではボタンにデザインが設定されていないので、クラス（btn_custom01など）を付与する必要があります。
詳しくは「ボタンの命名規則とコーディングルール」のページをご確認ください。
詳しくは「ボタンの命名規則とコーディングルール」のページをご確認ください。
ボタンの命名規則とコーディングルール
ボタンのCSS装飾についてはこちらのページをご参照ください。
ボックスリンクとはカラム（col）全体をボタン（aタグ）の範囲にしたものを指します。
新CMSではデザインパーツを使用することで設定を省略することができます、旧CMSでは設定の必要があります。
ボタンの設定に関しては通常のボタンと同様となります。
新CMSではデザインパーツを使用することで設定を省略することができます、旧CMSでは設定の必要があります。
ボタンの設定に関しては通常のボタンと同様となります。
- 左が編集画面で右が公開画面のキャプチャー画像です。
- 公開画面では行（col）の範囲（白背景の部分）がリンクとなります。
複合パーツ ＞ ボックスリンク
６パターンのデザインパーツが用意されています。
６パターンのデザインパーツが用意されています。
行（row）、カラム（col）、そしてボタンに対してクラスを付与する必要性があります。
下記クラスは旧コピー元のCSSでもともと用意されているものですが、古いサイトだと含まれていない場合もあります。
下記クラスは旧コピー元のCSSでもともと用意されているものですが、古いサイトだと含まれていない場合もあります。
| 付与するクラス | |
|---|---|
| 行（row） | linkBox_row |
| カラム（col） | box_link_col |
| ボタンパーツ | btn_custom_boxlink |
関連するページ
ボタンの命名規則とコーディングルール
ボタンのCSS装飾についてはこちらのページをご参照ください。
ボタンパーツの機能詳細（ヘルプページ）
さらなるボタン機能の詳細はこちらをご確認ください。
© Basic Inc. All Rights Reserved.