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

超便利機能！シリウスボタンリンク完全動画解説

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

 

シリウスバージョン1.5から上位版の新機能として追加されたCSSボタンリンク作成について解説します。このCSSボタンリンクが追加される以前のリンクボタンは画像表示でした。

 

しかし今回のボタンリンクは画像ではなくCSSで作成されます。CSSでの表示は機能的で当サイトのリンクはほとんどこのCSSボタンリンクに変更しました。

 

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

 

必見！詳細設定のスタイルの使い方

ホームページ作成初心者の方でスタイルの使い方がいまいちよく解らないという方が多く、当サイトへのご質問メールでもこのボタンリンク機能内の詳細設定でのスタイルの使い方についてよくお問い合わせがありますので記事にしました。

 

11-CSSボタンリンク機能の使い方　[この動画は15分で見れます]

 

 

 

ボタンリンクの使い方

ボタンの設定

 

 

 

 

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

 

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

 

 

 

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

 

 

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

 

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

 

 

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

 

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

 

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

 

 

• 外部サイト・・シリウスで管理している 自分が作成した他のホームページ。
• 内部ページ・・現在作成しているホームページの他のページ。
• 全く別の外部サイトにリンクさせる場合は絶対URLを記述します。

 

同ページの任意の場所にリンクさせるソース

 

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

 

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

 

 

 

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

 

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

 

 

 

ボタンのデザインを8種類の中から選択します。デザイン4とデザイン5はボタンリンクの上にカーソルを持っていくと色が変化します。

 

 

 

 

 

 

 

 

シリウスのテンプレートのメインコンテンツの横幅は600〜700px程度です。テンプレートの横幅設定をされている方はメインコンテンツの横幅をご存知かとは思います。

 

ボタンリンクの最大の横幅は600pxなので、これを利用した場合でメインコンテンツの横幅いっぱいのボタンリンクになるということです。300pxでメインコンテンツの横幅の約半分、ボタンリンクを横に3っ並べる場合は200pxという事を目安にされたら良いと思います。

 

 

 

 

 

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

 

 

no followにチェックを入れた方が良い例

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

 

rel="sponsored"について

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

 

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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

 

 

詳細設定

 

 

スタイル

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

 

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

 

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

 

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

 

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

 

• デザイン8
• ライナー
• 青色のアンダーライン
• 左寄せ

 

• デザイン5
• ライナー
• ブルー系中間割り2色
• 左寄せ

 

 

 

 

 

 

 

 

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

 

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

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

 

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

 

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

 

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

 

 

 

その他の詳細設定

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

 

 

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

 

文字に影を付ける事ができます。

 

 

デフォルトを含め7種類から選択できます。

 

 

 

 

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

 

サイズwd200

サイズwd300

サイズwd400

サイズwd400

サイズ特大

サイズwd600

 

ボタン本体の位置を貼り付けしようとしている部分の「どこに位置に表示させる」かを選択できます。この機能はメインコンテンツだけではなくサイドバーでボタンリンクを表示させる場合にも、もちろん反映されますのでお試しください。

 

サイズwd200

サイズwd300

サイズwd200

 

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

 

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

 

ボタンリンクの最大幅600pxにした場合で文字のポイントを小さくすると、かなりの数のテキストが入ると思いますが、スマートフォンで閲覧すると大変見づらくなります。

 

このような場合ボタン高さを可変にしておくと文字の大きさを小さくせずに、すべてのリンクテキストを表示させることができるわけです。

 

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

 

サイズデフォルト中

 

サイズ特大

 

 

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

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

 

まずボタンリンクを2っサイト作成画面に生成し、下記画像のように青色反転させます。

 

 

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

 

 

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

 

 

 

 

 

 

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

 

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