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

03A ボタンの作成

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

作成したボタンのスタイルを編集するには:

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

 

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

 

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

 

03A-1 ボタン作成の概要

ボタンを入れたい場所にマウスポインターを合わせ、「コンテンツを追加」から[ボタン]をクリックします。

jdg03A_07:「ボタン」コンテンツを作成する
jdg03A_07:「ボタン」コンテンツを作成する

「スタイル1」「スタイル2」「スタイル3」からスタイルを選び、配置(左寄せ/中央合わせ/右寄せ)を決め、ボタン名も書き換える。

jdg03A_08:ボタンの「スタイル」「配置」「ボタン名」を決める
jdg03A_08:ボタンの「スタイル」「配置」「ボタン名」を決める

リンクの設定をします。

  • 内部リンク
  • ブログリンク
  • 外部リンクがメールアドレス
jdg03A_09:ボタンにリンクを設定する
jdg03A_09:ボタンにリンクを設定する

03A-2 ボタン作成の具体例

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

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

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

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

➋ スタイルを選択し、ボタン名を書き換える

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

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

➌ リンクを設定する

ボタンには「内部リンク」「ブログリンク」「外部リンク」が貼れます。

 

[リンク]をクリックしてリンク先を入力したのち[リンクを設定]をクリックし、[保存]する

 

「ページ内リンク」を貼るには、以下の「注意」を参照します。

ボタンにページ内リンクを設定するには

ボタンに、ページ内リンクを設定はできません。代わりにソースコードでボタンを作り、ソースの編集でリンクを設定する方法をとります。詳しくは、03A-4 ボタンにページ内リンクを張るを参照します。

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

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