03A ボタンの作成
サイドバーなどに、注目を引くようなボタンを設置します。
作成したボタンのスタイルを編集するには:
独自テンプレートでのボタンスタイル、あるいは汎用テンプレートでのユニークなボタンスタイルは CSS で指定するので、以下を参照する:
CSS を使ったユニークなスタイル変更は以下を参照します。
- 04B-2 ボタンを記述する HTML/CSS コード
- 04B-3 ボタンのユニークスタイルを作成する
- 04B-4 ボタンの背景に画像を表示する
- 04B-5 ボタンにページ内リンクを貼る
- 04B-6 影付きボタンを作る
03A-1 ボタン作成の概要
ボタンを入れたい場所にマウスポインターを合わせ、「コンテンツを追加」から[ボタン]をクリックします。
![jdg03A_07:「ボタン」コンテンツを作成する](https://image.jimcdn.com/app/cms/image/transf/dimension=538x10000:format=gif/path/s5e82cddab4dd88e6/image/i59d55b76ad2b3fe0/version/1558166811/jdg03a-07-%E3%83%9C%E3%82%BF%E3%83%B3-%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B.gif)
「スタイル1」「スタイル2」「スタイル3」からスタイルを選び、配置(左寄せ/中央合わせ/右寄せ)を決め、ボタン名も書き換える。
![jdg03A_08:ボタンの「スタイル」「配置」「ボタン名」を決める](https://image.jimcdn.com/app/cms/image/transf/dimension=539x10000:format=gif/path/s5e82cddab4dd88e6/image/if601ace31e213226/version/1558168742/jdg03a-08-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-%E9%85%8D%E7%BD%AE-%E3%83%9C%E3%82%BF%E3%83%B3%E5%90%8D-%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B.gif)
リンクの設定をします。
- 内部リンク
- ブログリンク
- 外部リンクがメールアドレス
![jdg03A_09:ボタンにリンクを設定する](https://image.jimcdn.com/app/cms/image/transf/dimension=538x10000:format=gif/path/s5e82cddab4dd88e6/image/ic2f543677ba2366e/version/1558169117/jdg03a-09-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B.gif)
03A-2 ボタン作成の具体例
ここでは、サイドバーにボタンを追加します。
➊[コンテンツの追加]→[ボタン]をクリックする
![jdg03H_01:サイドバーにボタンを追加する](https://image.jimcdn.com/app/cms/image/transf/dimension=539x10000:format=gif/path/s5e82cddab4dd88e6/image/i81281b1533adb4fb/version/1472505984/jdg03h-01-%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B.gif)
⇩
![jdg03H_02:ボタンを追加](https://image.jimcdn.com/app/cms/image/transf/dimension=539x10000:format=gif/path/s5e82cddab4dd88e6/image/ie46cf702ba9f807c/version/1472506055/jdg03h-02-%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0.gif)
➋ スタイルを選択し、ボタン名を書き換える
[スタイル1]を使い、ボタン名を書き換える
![jdg03H_03:ボタンにリンクを設定](https://image.jimcdn.com/app/cms/image/transf/dimension=536x10000:format=gif/path/s5e82cddab4dd88e6/image/iff3f80e281b60ca3/version/1472511088/jdg03h-03-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E8%A8%AD%E5%AE%9A.gif)
➌ リンクを設定する
ボタンには「内部リンク」「ブログリンク」「外部リンク」が貼れます。
[リンク]をクリックしてリンク先を入力したのち[リンクを設定]をクリックし、[保存]する
「ページ内リンク」を貼るには、以下の「注意」を参照します。
ボタンにページ内リンクを設定するには
ボタンに、ページ内リンクを設定はできません。代わりにソースコードでボタンを作り、ソースの編集でリンクを設定する方法をとります。詳しくは、03A-4 ボタンにページ内リンクを張るを参照します。
❹ 必要な数だけボタンを追加する
![jdg03H_04:必要なボタンを追加する](https://image.jimcdn.com/app/cms/image/transf/dimension=538x10000:format=gif/path/s5e82cddab4dd88e6/image/if358d9ccde907c5d/version/1472511198/jdg03h-04-%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B.gif)