ホームページ作成ソフトメニュー

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

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

シリウス使い方ボタンリンク

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

 
チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

チャンネル登録 Please click

ユーチューブチャンネル登録

 

ボタンリンクの使い方

ボタンの設定

シリウス使い方ボタンリンクボタンの設定

 

 

 

ファイル
 

シリウス使い方ボタンリンク

 

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

 

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

 

 

デフォルト設定
 

シリウス使い方ボタンリンク

 

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

 

 

プレビュー

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

 

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

 

 

リンクテキスト

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

 

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

 

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

 

 

リンク先URL
 

シリウス使い方ボタンリンク

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

 

 

アイコン画像
 

シリウス使い方ボタンリンク

シリウス使い方ボタンリンク

 

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

 

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

 

 

種類
 

シリウス使い方ボタンリンク

 

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

 

 

 

カラー
 

シリウス使い方ボタンリンク

 

 

 

サイズ
 

シリウス使い方ボタンリンク

 

シリウス使い方ボタンリンク

 

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

 

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

 

 

 

シリウス使い方ボタンリンク

 

シリウス使い方ボタンリンク

 

3種類の中から選択します。

  • ボタン四角
  • ボタン角丸
  • ボタン丸

 

 

no follow

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

 

チェックを入れた場合の出力

 

<a href="http://example.jp/" rel="nofollow">

 

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

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

 

rel="sponsored"について

 

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

 

no follow属性を記述したボタンリンクの例

 

<div class="btn05 cyan btn-rounded"><a href="<% pageDepth %>sirius-commentary/button-link.html" rel="sponsored">ホームページ</a></div>

 

 

新しいウインドウで開く

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

 

target="_blank"

 
  • チェックを入れない

    リンクを記述しているホームページ内のページへのリンク

  • チェックを入れる

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

 

 

外部サイト

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

 

 

内部ページ

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

 

 

デフォルトの設定

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

 

シリウス使い方ボタンリンク

 

 

前回の設定

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

 

 

詳細設定

シリウス使い方ボタンリンク詳細設定

 

 

スタイル

スタイル

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

 

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

 

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

 

スタイル記述のルール

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

 

font-weight:900; シリウス使い方ボタンリンク style="font-weight:900;"

 

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

 

青文字の要素と赤文字の要素の間に半角スペース

 

font-weight:900; border-bottom: dotted 3px orange;

 

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

詳細設定記述

 

background: linear-gradient(transparent 85%, #0404B4 85%);

HTML出力

 

<div class="btn08 fnt20 align-left" style="background: linear-gradient(transparent 85%, #08298A 85%);"><a href="URL">ホームページ作成ソフト</a></div>

 

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

詳細設定記述

 

background: linear-gradient(#A9E2F3 50%, #2ECCFA 50%);

HTML出力

 

<div class="btn05 btn-rounded align-left" style="background: linear-gradient(#A9E2F3 50%, #2ECCFA 50%);"><a href="URL">ホームページ</a></div>

 

その他の例

点 線

border-bottom: dotted 3px orange;

 

 

二重線

border-bottom: double 6px #87CEFA;

 

 

左側に縦の線

border-left: 7px solid #000;

 

 

左側に縦の線の二重線

border-left: 6px double #000;

 

 

左側に縦の点線

border-left: 4px dotted #000;

 

 

上下に点線

border-top: 2px dotted #000; border-bottom: 2px dotted #000;

 

 

ライナー

background: linear-gradient(A 50%, B 50%);

 

 

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

 

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

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

 

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

 

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

 

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

 

上記の例でカーソルをボタンリンクの上にオーバーした時、文字が動いたり色が変わる現象はリンクテキストをカスタマイズしている事が影響しているものもあります。このためコピペで作業された方は一部動作が異なる事があります。

 

 

その他の詳細設定


行揃え

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

 

 

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

 

 

テキストシャドウ

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

 

シリウス使い方ボタンリンク

 

フォント

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

 

 

 

 

文字サイズ

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

 

サイズwd200

 

サイズwd300

 

サイズwd400

 

サイズwd400

 

サイズ特大

 

サイズwd600

 

ボタンの位置

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

 

サイズwd200

サイズwd300

サイズwd200

 

ボタンの高さ

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

 

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

 

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

 

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

 

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

 

サイズデフォルト中

 

サイズ特大