サイト作成ソフトシリウス｜ボタンリンク完全動画解説

シリウスCSSボタンリンク解説動画

シリウスバージョン1.5から上位版の新機能として追加されたCSSボタンリンク作成について解説します。このCSSボタンリンクが追加される以前のリンクボタンは画像表示でした。しかし今回のボタンリンクは画像ではなくCSSで作成されます。CSSでの表示は機能的で当サイトのリンクはほとんどこのCSSボタンリンクに変更しました。

画像のボタンリンクではテキストやデザイン、色などを変更する場合に画像を元から作り直さなければならなかったのですが、今回のCSSボタンリンクではテキストの変更はもちろん、その他カスタマイズが一瞬で変更可能になっています。

ボタンリンクの使い方

ボタンの設定

ファイル

「ファイル」をクリックし「名前を付けて保存」で現在のボタンリンク設定が拡張子.sbtnで保存されます。特に複数のボタンリンク設定を保存する場合はフォルダを作成して解りやすいファイル名で保存しておく事をお勧めします。

保存した.sbtnファイルを選択し「開く」をクリックするとボタンリンク設定の内容が復元されます。[詳細設定]でスタイルを変更してボタンリンクを作成した場合は[デフォルト設定]ではなく「ファイル」で保存しておいた方が安全です。

デフォルト設定

現在操作しているボタンリンク設定を「デフォルトの設定」として記憶させることができます。設定内容を変更した場合でも上記画像の矢印の先の「デフォルト設定」をクリックするとデフォルトの設定に戻すことができます。

プレビュー

現在のボタンリンク設定でのブラウザの表示が確認できます。リンクのテキストの文字が多くなった場合、スマートフォンで文字が途切れる可能性がありますので、「シリウス 内蔵プレビュー」で表示を確認してください。

また近年グーグルの指針で携帯端末での最適表示がSEOに大きく係わっているので、作業が終了した後は実際にアップロードしてボタンリンクが正常に表示されるか？リンクが正常に機能するか？を実際に確認してください。

リンクテキスト

ボタンリンクに表示させたいテキストを記述します。ボタンリンクは画像リンクとは違い、CSSで表示させているのでリンクテキストは当然通常のテキストとしてクローラーに認識されます。

このためリンクテキストを決める際にはリンク先の記事内容を想像させる適切なキーワードを使う必要があります。この事でユーザビリティも良くなり、内部SEO対策としても有効です。

内部リンクはサイトの価値を判断するクローラーがホームページの中をたどる唯一の道筋なので、画像でリンクを扱う場合にも画像の他にテキストリンクを添えて記述するようにします。

リンク先URL

同じページ内でページの上部などから、下の部分の任意の場所にリンクで飛ばす場合は下記のようなソースで対応します。この場合ソースの中のリンク元とリンク先のテキスト配列を同じにする必要があります。

下記の場合「A」から「A」に移動するということになります。

アイコン画像

アイコン画像はボタンリンクの横に配置するイメージ画像です。シリウスに内蔵されている画像、または外部からシリウスに取り入れて利用します。アイコン画像は微調整をするために画像の横幅[width]を指定しておきます。

また上記のサンプル画像の「白抜きの矢印アイコン」はシリウスの本体フォルダの中の[iceon]に入っています。また、画像フォルダの中にフェイスブックマークやライン他が[icon_〇〇〇.png]の画像名で用意されています。

ボタンのデザインの種類

カラー

サイズ

シリウスのテンプレートのメインコンテンツの横幅は600〜700px程度です。テンプレートの横幅設定をされている方はメインコンテンツの横幅をご存知かとは思います。ボタンリンクの最大の横幅は600pxなので、この場合でメインコンテンツの横幅いっぱいのボタンリンクになります。300pxでメインコンテンツの横幅の約半分という事を目安にしてください。

ボタンのデザイン

no follow

no followはリンク（a要素 a href）に指定する値のひとつです。no followにチェックを入れた場合はリンク先のURLにリンク先に評価を渡す事はなく、クローラーはこのリンクを辿ってリンク先を巡回する事はありません。

• あなたがリンク先のサイトを悪質であると認識している場合。
• 有料リンクを販売しているサイトや広告に対するリンク。
• 閲覧者に有益なコンテンツではないと考えられるサイトに対するリンク。

アフィリエイトリンクは広告であり、この事をグーグルに伝えるため各ASPでもアフィリエイトリンクにはsponsoredの属性を記述する事を推奨しています。このコマンドはボタンリンクの機能では付属していないので自力で記述します。

新しいウインドウで開く

リンク先のホームページをブラウザ上でそのまま現在のページから切り替えて表示させるか、または別窓で開かせるか選択します。別窓で開かせる場合にはチェックを入れます。

• チェックを入れない
  リンクを記述しているホームページ内のページへのリンク
• チェックを入れる
  例えリンク先が自分が作成したホームページであっても、リンクを記述しているホームページ外部の別サイトにリンクさせる場合

外部サイト

ここでの外部サイトという意味は、管理画面でご自身がシリウスで作成している他のホームページのことを言います。外部サイトをクリックすると管理画面上で作成している他のサイトが表示され選択できるようになります。

内部ページ

現在作成しているホームページの他のページにリンクさせる場合にクリックします。クリックすると作成中のホームページの他のページを選択することができます。

デフォルトの設定

デフォルトの設定で「はい」をクリックすると[デフォルト設定]で登録しているボタンリンクのデザインを瞬時に呼び出すことができます。この場合現在の設定は破棄されます。

前回の設定

ボタンリンク機能で前回最後に作成したボタンリンクをそのままの状態で使いたい時にクリックします。この場合、最後に作成したボタンリンクがシリウスで管理している他のサイトの場合では反映されません。現在作成しているホームページ内での適用となります。

詳細設定

スタイル

スタイルの記述

スタイルと言う技術は主にブラウザでの表示のされ方のデザインを自由に変更させるためのコマンドだとお考えください。ホームページ上でのデザインとは簡単な例を挙げるとテキストを太文字にしたり、色を変えたりすることです。

例えばスタイルの記述では、heightという指定で1行に対する行の高さが指定できます。またテキストの行に対するセンター合わせや左詰め右詰めなども「デザイン」として取り扱い、スタイルで指定することができます。

ホームページのデザインはスタイルに依存していると言えます。

ボタンリンク機能では[詳細設定]のスタイル欄に、上記のような記述をすることでボタンリンクをカスタマイズをすることができます。一例を記述しますが、このようなことを理解することはホームページ作成で役に立ちます。

スタイル記述のルール

太文字にするためのスタイルの記述は下記のようになりますが、詳細設定のスタイルは要素であるfont-weight:900;の部分だけを記述します。style="〇〇〇;"は自動で付加されます。

2っの要素を指定する場合は、詳細設定のスタイルに記述する際、半角スペースを入れます。

上記のライナーの例ではA/Bの部分に色指定・パーセントの数値を変更してお試しください。他の表示も線色や太さ、又はライト[right]、レフト[left]などを変更して表示を確認して下さい。

ボタンリンク作成上の注意点

参考までに表示の例をいくつか並べましたが、ボタンリンクの詳細設定でスタイルの指示を組み合わせると言う記述の方法が理解できれば、無限に色々なパターンで表示させることができます。

注意点としては一つのホームページの中で色々な種類のリンクボタンを表示させるとデザインにまとまりがなくなるので、目的ごとに3っぐらいのパターンにしておけば良いかと思います。

• ホームページ内リンク
• ブログなど自社サイトである外部リンク
• 他社である外部サイトへのリンク
• 参考URLへのリンク
• アフィリエイトリンク

リンクの種類によってデザインを変えることはリンクの目的を明確にしていると言える事からユーザビリティに優れます。

その他の詳細設定

行揃え

ボタンリンクの中のテキストの位置を変更することができますので、画像を取り込んだ場合など、ある程度位置調整が可能になっています。この時テキストの前に全角スペースを入れると位置の微調節ができます。
※ 半角スペースとテキストの後のスペースは反映されません。

「左揃え」でテキストの前にスペースを入れた例。

テキストシャドウ

フォント

文字サイズ

ボタンリンクの詳細設定の文字サイズのプルダウンで示される文字の大きさ以外は反映されませんので、HTMLに出力させてから文字サイズ設定の選択肢にないフォントサイズに任意で変更することできません。（例-40px等）

サイズwd200

サイズwd300

サイズwd400

サイズwd400

サイズ特大

サイズwd600

ボタンの位置

ボタン本体を「横方向でどこに表示させる」かを選択できます。この機能はメインコンテンツだけではなくサイドバーでボタンリンクを表示させる場合にも反映されますのでお試しください。

サイズwd200

サイズwd300

サイズwd200

ボタンの高さ

「ボタンの高さ」の設定はシリウスページの解説でも詳しく書かれていないので、使い方が分からない人も多いかとは思います。ボタンの高さで可変にチェックを入れると、リンクテキストの字数が多くて「ボタンリンクの幅」を超えた場合でも折り返して改行で表示させることができます。

ボタンリンクのデフォルトの行数は1行です。

ボタンリンクの最大幅600pxにした場合で文字のポイントを小さくすると、かなりの数のテキストが入ると思いますが、スマートフォンで閲覧すると大変見づらくなります。このような場合ボタン高さを可変にしておくと文字の大きさを小さくせずに、すべてのリンクテキストを表示させることができるわけです。

しかしリンクテキストについては字数を多くするより、リンク先のペーキーワードを的確に使って簡潔に一目でわかるようにした方が良いです。ボタンのサイズと文字のポイントの調整で基本的に1行で納めるようにしましょう。また、必ず携帯端末で最適表示されているか確認してください。

サイズ-デフォルト中

サイズ-500

ボタンリンクを横並びにする

ボタンリンクはデフォルで中央で示されます。 詳細設定でその位置を左右に変更することができますが、2っ以上のボタンリンクを横並びにする場合では、 一旦ボタンリンクをサイト作成画面に生成してから右クリックの操作で作業を行います。まずボタンリンクを2っサイト作成画面に生成し、下記画像のように青色反転させます。

次にサイト作成画面上で右クリックし「ボタンリンクを横並びにする」を選択。

サイト作成画面では次のように変換されボタンリンクが横並びになります。

このボタンリンクを横並びにする作業での注意点として、サイト作成ソフトシリウスで2カラムのテンプレートをご利用の場合は、メインコンテンツの幅が600px程度なので、ボタンリンクを2っ並べる場合にはひとつのボタンリンクの横幅は300px以下を選択する必要があります。

同様にボタンリンクを3っ並べる場合もご自身のメインコンテンツの幅を把握した上でボタンリンクの大きさを調整するようにしてください。またボタンリンクを横並びにする場合、リンク生成後アップロードして文字が途中で切れていないかを携帯端末で確認するようにして下さい。

2026/02/08 11:25:56