ボタンリンクを作成する

SIRIUS Ver1.500から追加された「ボタンリンク機能」は、
CSSのみで作成されたボタンリンクを作成することができる機能です。
この機能を使うことでいちいち画像を作成しなくても、
通常のテキストリンクをボタン風のリンクにすることができます。

ボタンリンクを作成する

このページの目次

なお、本機能はSIRIUS上位版専用の機能となっております。
通常版をご利用の場合、「ボタンリンク」機能は利用することができませんのであらからじめご了承ください。

文字装飾画面の「ボタンリンク」ボタンをクリックする

文字装飾画面の上段にある「ボタンリンク」ボタンをクリックします。

ボタンリンクを作成する

テキストと、リンク先のURLを指定する

下記のようなボタンリンクの設定画面が表示されますので、ここから設定を行います。最初に必須項目である「テキスト」と「リンク先のURL」を指定してください。

ボタンリンクを作成する

サイト内のページへリンクをしたい場合、画面右側にある「内部ページ」ボタンをクリックすることで、テキストとリンク先を自動設定することができます。

必要に応じて、アイコン画像を指定する

ボタンリンクにアイコン画像を指定したい場合、
「アイコン画像」の項目の右側にある「参照」ボタンをクリックして
表示させるアイコン画像を選択します。

ボタンリンクを作成する

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

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

ボタンのデザインを指定する

次に、ボタンリンクのデザインを決定します。
デフォルトではネイビー調のボタンが指定されていますが、
8種類のデザイン×9つのカラーバリエーションの中からデザインを選ぶことができます。
この項目の中から、作成したいボタンリンクのデザインを選択してください。

ボタンリンクを作成する

なお、「デザイン8」を選択した場合のみ、背景をシルバー調に変更することができます。「デザイン8」を選ぶと、画面右側にチェックボックスが表示されますので、こちらにチェックを入れることで、シルバー調の背景で表示させることが可能です。

詳細設定を指定する

ボタンリンクの位置の調整やフォントサイズ等を変更したい場合、詳細設定タブを開きます。ここで細かな調整を行うことができますので、各項目の解説をご確認ください。

ボタンリンクを作成する

スタイル	ボタンタグを囲うdivタグにスタイルを指定します。細かな調整を行いたい場合は、ここでスタイルを指定してください。
行揃え	ボタンのテキストの行揃えを指定します。
テキストシャドウ	テキストの影を指定します。
フォント	テキストのフォントを指定します。
文字サイズ	テキストの文字サイズを指定します。大きめの文字サイズを指定した場合、スマートフォン上では一定のサイズで表示されます。
ボタンの位置	ボタンリンクの位置を指定します。ただし、ボタンリンクの横並びエリアでは強制的に中央揃えになります。
ボタンの高さ	2行以上になってしまうような文字量の多いボタンリンクにしたい場合、こちらのチェックを入れることで、高さを可変にすることができます。この設定を行うことで、デバイスを気にすることなく自由な長さでテキストを記述できるようになりますが、「アイコン画像」は縦の中央揃えにはならなくなりますのでご注意ください。