見出しや短いコピーで注意をひき、訪問者に行動を起こさせたいとき利用するパーツです。ランディングページや購入ページに誘導するなどの使い方があります。
別ページへ誘導案内できるボタンを目立つように設置できますので、シンプルでパワフルな言葉を主にした誘導手法に最適です。
セット表示パーツでアイキャッチを使用しないものと機能的にはほぼ同じです。

使用例

まだ、コンビニでパンを買っていますか?

そのパン1つが、あなたの体内をどう変えているのでしょう。
一目で分かるのですが、見る勇気はありますか?

一般設定

見出し

見出しを入れます。見出しパーツと同じく、「スタイル」で重要度を指定できます。

文字

表示させたい説明文やサブタイトルなどを入力します。文章編集欄パーツと同じ仕様ですので、サイズや文字色などの細かな調整が行えます。

スタイル

構造設定

配置

誘引用リンクボタンの表示位置を指定します。

  • ボタンを右に
  • ボタンを下に

余白設定

文字やボタンの周りにどのぐらい余白をつくるかをピクセル単位で設定します。

見出しの構造設定

見出しの重要度指定

ページ内での見出し部分の重要度を設定します。HTMLでh1〜h6を指定するのと同じです。

  • h1→ページ自体の見出し
  • h2→記事ブロックごとの大見出し
  • h3→記事内の中見出し
  • h4→各項目上の小見出し
  • h5→さらに項目が詳細に分かれている場合
  • h6→任意

見出しの大きさ

「全体設定値」では、Webサイトの全体デザインで指定された大きさとなります。
「個別設定」を選択すると数値を入力でき、大きさを自由に変更できます。

文字色

見出しと文字の色を設定します。

背景色

ここで色を選ぶと、このパーツのエリア全体に背景色が設定されます。未指定の場合は背景色は出現しません。背景色をつけた際はとくに、「構造設定」の「余白」を活用して見た目を整えてください。

背景の透過度

背景色を設定した場合、どのぐらい透けるようにするかを設定します。

ボタン

文字

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

アイコン

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

アイコンの位置

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

アイコン表示状態

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

ボタン型リンク

リンク先

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

リンク先の開き方

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

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

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

ボタンの色

背景色

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

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

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

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

文字色

文字の色を設定します。

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

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

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

スタイル

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

簡易グラデーション

表示入れ替わり効果

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

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

ボタンの構造設定

文字サイズ

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

余白設定

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

角丸

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

詳細

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

©2015-2018 eufonia inc.