基本パーツ > ボタン

クラフトマスターイメージイラスト

ボタンを使って同じWebサイト内のほかのページやセクション、または異なるドメインのWebサイトなどへ移動させたいときに使用するパーツです。

クリックするとどこへ移動するか、どういう結果が得られるかを、分かりやすく表示できるメリットがあります。

ちょっと専門メモ:ボタン上のメッセージは「続きはこちら」「詳細」などの一般的なものではなく、訪問者に対し、具体的な次の行動を指示するような一文が効果的です。

一般設定

文字

ボタン上に表示する文字内容を入力します。

アイコン

ボタン上にアイコンを加えたい場合に、リストから選択できます。

アイコンの位置

文字内容に対してのアイコン表示位置を選択します。

アイコン表示状態

  • 常に表示→ボタン上にアイコンをずっと表示します。
  • マウスオーバー時にフェードイン→マウスポインターを重ねるとアイコンが表示されます。

リンク先

リンク先

リンク先のページのURLアドレスを入力します。
自己サイト内のページであれば、「選択」を押して現れた入力欄に、リンクを張りたい記事やページのタイトルを一部入力します(3文字以上必要)。
候補が一覧で表示されますので、その中から目的のものを選択すれば、自動でリンクが張られます。

リンク先の開き方

ボタンを押した際にリンク先ページを同じウインドウで開くか別のウインドウで開くかを選択します。

リンク先を検索エンジンに知らせない

検索エンジンのページ情報収集ロボットに対し、リンクの先をたどってほしくないという意思表示(nofollow指示)します。ただし、収集ロボットが必ず言うことを聞くとは限りません。主にSEO対策として使用します。
通常はNoを選択して知らせておいて問題ありませんが、有料サイト、ログインが必要なページへのリンクの場合はYesにしてください。
> GoogleのnoFollowに対する考え方

スタイル

背景色

ボタン自体の色を指定します。指定しなければ、ホームページの全体設定に準じた色になります。

また、ここで色を設定することで、下に「スタイル」の設定欄が出現します。

マウスオーバー時の背景色

マウスポインターを重ねた際にボタンの色を変化させる場合に設定します。

文字色

文字の色を設定します。

マウスオーバー時の文字色

マウスポインターを重ねた際に文字色を変化させる場合に設定します。

スタイル(上で背景色を指定すると表示)

スタイル

以上の中からボタンの形状を選択できます。

簡易グラデーション

表示入れ替わり効果

ボタンにマウスポインターを重ねた際の変化のさせ方を設定します。

  • 無効 → 段階なく切り替わります
  • 有効 → 切り替わりに視覚効果が加わります。

構造設定

表示幅の設定

ボタンの表示幅を選択します。

  • 自動設定 → 文字数に合わせたサイズで表示されます。
  • 全幅表示 → このボタンが配置されているブロック枠の幅に合わせて表示されます。

表示位置合わせ

このボタンが配置されているブロック枠内での配置を設定します。

文字サイズ

ボタン上の文字サイズを調整します。

余白設定

文字の周りにどのぐらいの余白をつくるかを調整します。

角丸

ボタンの角の形状を調整します。(0にすると角は直角になります)

詳細

こちらの共通ページで説明しています

©2015-2018 eufonia inc.