CSSのみで作られたボタンリンクを作成(上位版のみ)!

 

前回のバージョンでは、「画像によるボタン作成機能」を搭載していましたが、
今回はさらにCSSのみで作成された「ボタンリンク機能」を追加しました。
今やCSSボタンリンクは当たり前のように、様々なところで使われています。

 

「ボタンリンク作成機能」この機能を使うことで画像を使わなくても通常の
テキストリンクをボタンリンクにすることが簡単にできます。

 

ボタンリンクの設定画面

ボタンリンク機能を使うメリット

 

通常のリンクを「ボタン」にすることができるため、訪問者がクリックしやすい。

 

CSSのみで作られているため、様々なデバイスに対応出来ます。

 

テキストの異なる複数のボタンを設置したい場合いちいち画像を作る必要がない。

 

細かく設定ができるため「画像によるボタン」よりも簡単にボタンを作成できる。

 

編集画面の文字装飾「ボタンリンク」をクリック!

 

編集画面の中に文字装飾ボタンが並んでいる上段の右の方にある「ボタンリンク」を
クリックしてください。

編集画面のボタンリンクボタン



ボタンリンク設定画面が表示、テキストとリンク先URLを指定

 

ボタンリンクの設定画面が下記のように表示されますので、最初に「テキスト」と
リンク先URLを指定してください。

 

リンク先をサイト内にしたい場合は画面右側に「内部ページ」ボタンをクリックする
ことで自動的に設定してくれます。外部の場合は任意で入力してください。

ボタンリンク設定画面


変化を付けたいときはアイコン画像を入れることが出来ます。

 

ボタンリンクに変化を付けたい時は「アイコン画像」の項目の右側にある「参照」ボタンを
クリックすると画像管理画面が表示されます。気に入った画像がなければ自分で作って
画像管理画面に保存して使うことも出来ます。

 

siriusのインストール先のフォルダ内にある「icon¥白抜き矢印\」フォルダ内に白抜き背景
の矢印もプリセットされています。

 

アイコン画像の大きさは、スタイルシート側で制御されていますので、ボタンリンクに
適したサイズに自動で調整してくれます。したがって多少大きめの画像を選択しても
ボタンリンク内に収まるようになっています。

ボタンリンク設定画面


ボタンのデザインを決定する
ここで、出来上がりの形ある、ボタンリンクのデザインを決める!
8種類のデザイン×9つのカラーバリエーションのテンプレートから選択できるように
なっています。デフォルトのデザインカラーはネイビーになっています。

ボタンリンクのデザイン設定画面


ボタンデザインの詳細設定をしたい場合はここで指定する!

 

細かい設定をしたい場合は「詳細設定」タブを開いて、フォントの位置やサイズ、書体を
指定します。各項目を簡単に説明しておきますので参考にしてください。

ボタンリンクの詳細設定画面

詳細設定の一覧
スタイル

ボタンタグを囲うdivタグにスタイルを指定します。
(細かい調整が必要な場合はここにスタイルを指定してください)

行揃え ボタンのテキストの行揃えを指定します
テキストのシャドウ テキストの影を指定します。
フォント テキストの書体の種類を指定します。
文字サイズ

テキストの文字サイズを指定します。
注、大きめのサイズを指定した場合、スマートフォン上では一定のサイズで表示されます。

ボタンの位置

ボタンリンクの位置を指定します。
但し、ボタンリンクの横並びエリアでは強制的に中央揃えになります。

ボタンの高さ

2行以上になってしまうような文字数の多いボタンリンクにしたい場合は
ここにチェックを入れることで、高さを可変にすることが出来ます。
この設定をすることで、ディバイスを気にすることなく自由な長さで
テキストを記述できるようになりますが「アイコン画像」は縦の
中央揃えにはならないので注意してください。

.

トップへ戻る