SAMPLE IMAGE この画像は差し替えてご利用ください

03A ボタンの作成

サイドバーなどに、注目を引くようなボタンを設置します。

03A-1 ボタンコンテンツを作成する

➊[コンテンツの追加]→[ボタン]をクリックする

ここでは、サイドバーにボタンを追加する。

jdg03H_01:サイドバーにボタンを追加する
jdg03H_01:サイドバーにボタンを追加する

jdg03H_02:ボタンを追加
jdg03H_02:ボタンを追加

➋[スタイル1]を使い、ボタン名を書き換える

jdg03H_03:ボタンにリンクを設定
jdg03H_03:ボタンにリンクを設定

➌[リンク]をクリックして[リンクを設定]し、[保存]する

❹ 必要な数だけボタンを追加する

jdg03H_04:必要なボタンを追加する
jdg03H_04:必要なボタンを追加する

03A-2 ボタンのスタイルを作成する

➊ 管理メニューの[設定]を選択する

jdg03H_05:管理メニューの「設定」
jdg03H_05:管理メニューの「設定」

➋[ホームページ]グループの[ヘッダー部分を編集]をクリックする

➌ 以下のスタイル設定をコピーして、ヘッダー部分に貼りつける

<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>

jdg03H_06:スタイル記述をヘッダー部分に貼り付ける
jdg03H_06:スタイル記述をヘッダー部分に貼り付ける

❹[保存]するとボタンにスタイルが適用される

プレビューで表示する

jdg03H_07:ボタンにスタイルが設定された
jdg03H_07:ボタンにスタイルが設定された

03A-3 ボタンの背景に画像を表示する

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

➊[ナビゲーションの編集]をクリックし[新規ページを追加]をクリック

➋ ページ名を「素材置き場」とし、非表示にし、[保存]する

jdg03H_08:資材置き場としての、非表示のページを追加する
jdg03H_08:資材置き場としての、非表示のページを追加する

➌「素材置き場」ページをクリックして編集する

❹[コンテンツの追加]で[画像]から、[画像をアップロード]をクリック

❺ ボタンの背景に使う画像を選択し[開く]

ここでは、img_b095a.gif を使う

❻[素材置き場]ページをプレビューする

❼ アップロードされた画像を右クリック→[画像アドレスをコピー]を選択

jdg03H_09:画像アドレスをコピーする
jdg03H_09:画像アドレスをコピーする

❽ ページを編集状態にする

❾ 管理メニューの[設定]を選択し、[ヘッダー部分を編集]をクリック

❿ background-image属性の値に、コピーしたアドレスを貼り付ける

jdg03H_10:こぴーしたアドレスを貼り付ける
jdg03H_10:こぴーしたアドレスを貼り付ける

⓫[保存]をクリックする

⓬ プレビューで、ボタンの背景の画像を確認する

jdg03H_12:ボタンに背景画像が入る
jdg03H_12:ボタンに背景画像が入る

03A-4 ボタンにページ内リンクを貼る

ボタンには、各ページへのリンクを貼る機能はありますが、ページ内のアンカーにリンクを貼ることができません。以下は、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="ボタンの名前">ボタンの名前

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