SIRIUSでボタンでリンクを設定する3つの方法

2021年8月31日

SIRIUS(シリウス)でボタンでリンクを設定する4つの方法

吉本

こんにちは。
アフィリエイターの吉本です。

SIRIUS(シリウス)でボタンでリンクを作る方法は、3つあります。

今回はその3つの方法を全て紹介いたします。

SIRIUS(シリウス)のボタンリンク その1

SIRIUS(シリウス)でボタンでリンクを設定する4つの方法

シリウスのボタン画像からリンクを作成

シリウス ホームページ ボタン設置

シリウスのボタン画像は上のようになります。

SIRIUS(シリウス)のボタンを作成

シリウス ホームページ ボタン設置

まず、記事作成画面の上部タブにある赤い「編集」をクリックします。

すると、上の画像になります。

赤枠の「ボタン画像」をクリックします。

シリウス ホームページ ボタン設置

この画面上から

「画像フォルダ 特大」を選択。
ここにコンテンツを記載「丸型グリーン.png」を選択。
ボタンのテキスト「公式サイトはこちらをクリック」といれました。

フォントは、ゴシック体にしました。
文字の大きさは、今回は25ptにしました。
文字の色は、色が濃いので、白にしました。
位置は中央になるように設定しました。

最後に「保存」ボタンをクリック。

シリウス ホームページ ボタン設置

すると、作成したボタンを保存するためのファイルが表示されます。

このファイルでよければ、そのまま「保存」ボタンをクリックして、ボタンを作成することができます。

シリウスで作ったボタンを挿入し、リンクを張る方法

では、独自のボタンを挿入し、リンクを入れる方法をご紹介します。

まず、記事作成画面に戻り、赤枠内の「画像管理」ボタンをクリックします。

シリウス ホームページ ボタン設置

記事作成画面に戻り、赤枠内の「画像管理」ボタンをクリックします。

シリウス ホームページ ボタン設置

すると、先ほど作成したボタンが表示されますので、ボタンの画像をクリックしてください。

上の画像の設定に、

 
  • altタグの入力
  • 回り込みの設定
  • ボタンへのリンクを設定する

この3つを設定していきます。

今回は、大きなボタンで「リンクさせ」中央に設定していきます。

「中央揃え」を選択した場合、ボタンは記事の中央に表示されます。

リンクすると書きましたが、まずは「リンクしない」のままでOKです。

設定が確定したら、右側にある「OK」をクリックします。

シリウス ホームページ ボタン設置

さて、現在の状態では、ボタンを表示するタグが表示されているだけです。

ここから、このボタンへのリンクを追加します。

シリウス ホームページ ボタン設置

ボタンのタグを青く染めて、

シリウス ホームページ ボタン設置

シリウスの上のアイコンにある、「リンク」ボタンをクリックしていきます。

シリウス ホームページ ボタン設置

リンクの設定」画面です。

先ほど、ボタンタグを青色に染めていたので、テキスト(リンクになる部分)が、自動で入っています。

下の「リンク先URL」に、ボタンをクリックした時の リンク先のURLを入力してください。

 

今回はヤフーをリンクページにしました。

 

また、外部サイト(自分サイトでは無いページ)の場合、基本的にターゲットを「_blank」に設定します。

これで、赤枠の「OK」をクリックして、完了です。

シリウス ホームページ ボタン設置

リンクボタンが出来たら、記事作成画面から「プレビュー」をクリックして、どのようにできているかを確認してください。

シリウス ホームページ ボタン設置

この記事の一番上のように、ボタンが記事の中央あり、クリックすると、リンクサイトに飛ぶことができれば、OKです。

お疲れ様でした。

SIRIUS(シリウス)のボタンリンク その2

SIRIUS(シリウス)でボタンでリンクを設定する4つの方法

CSSでボタンリンクを作成

次は、画像ではなく、CSSでボタンリンクを作成する方法です。

ボタンの種類

CSSで作ると、上のようなボタンが作成できます。

ボタン画像の場合、テキストを修正したい時に画像から作り直す必要があります。

ですがCSSの場合は、テキストやボタンの色や形も、簡単に修正できるので便利です。

ボタンリンク設定をする

ボタンを置きたい部分にカーソルを合わせます。

ボタン作成手順

「ボタンリンク」をクリック。

ボタン作成手順

「ボタンリンク設定」が表示されます。

「リンクテキスト」を入れます。

試しに、公式サイトはコチラをクリック>>と入れてみると

ボタンリンク手順

プレビューに表示されます。

ボタンリンク手順

リンク先URLに、飛び先のURLを入力します。

文字の前に、アイコン画像を入れることもできます。

ボタンリンク手順

右側の参照ボタンを押して、画像を指定します。

ボタンリンク手順

試しに、このアイコンを指定してみます。

アイコン

こんな感じになります。

ボタンリンク手順

初リンクをnofollowにしたい場合は、ここにチェックを入れます。

「新しいウィンドウで開く」をチェックすると、リンク先が新しいウィンドウで表示されます。

次に、ボタンの設定をします。

リンクボタンの設定

ここでボタンのデザインや色、サイズ、形などを選ぶことができます。

  • デザイン・・・8種類
  • カラー・・・9種類
  • 形・・・角丸・四角・丸

詳細設定をする

リンクボタン設定

詳細設定で、文字のフォントなどの細かい設定ができます。

出来上がったリンクボタンがこちら。

ボタンリンク手順

ボタンのテキスト「公式サイトはコチラをクリック」といれました。

種類は、デザイン7にしました。
文字の色は、グリーンにしました。
サイズは、大にしました。
形は、四角にしてみました。

SIRIUS(シリウス)のボタンリンク その3

SIRIUS(シリウス)でボタンでリンクを設定する4つの方法

CSSで光るボタンリンクを作成

公式サイトはこちらをクリック

次は、上のような「光るボタン」を作成してみます。

CSSコードをスタイルシートに入れる

光るボタン作成

編集→スタイルシートを選びます。

光るボタン作成

スタイルシート編集画面になります。

光るボタン作成

ユーザー指定スタイルを選び、下記のコードを貼り付け、保存します。

CSSコードは下記のサイトからお借りしました。

https://dezanari.com/css-shiny-button/#toc2

次に、下記のコードをコピーします。

記事本文の中に、貼り付けします。

光るボタン作成

リンク先のURLと、表示したい文章を入れます。

プレビューで確認すると・・・

光るボタン作成

光るボタンが表示されます。

このボタンからリンクで飛べていれば、完了です。

SIRIUS(シリウス)のリンクボタン設定のまとめ

SIRIUS(シリウス)でボタンでリンクを設定する4つの方法

4つのリンクボタンの作成方法をご紹介しました。

ちなみにボタンの色の効果ですが、色の心理学で、緑のボタンは安心してクリックされると言われています。

とはいっても、実際のところはそのサイトの色にも関係してくるので、テストをして決めたほうがいいです。

もしあなたが、HTMLでサイトを作りボタンをリンクさせようって思ったら、結構大変です。

だけど、シリウスを使えば、使い方を覚えるだけで、ボタンリンクはもちろんですけど、アフィリエイトに必要なアフィリエイトリンクなんかも、簡単に出来てしまいます。

もしあなたが、アフィリエイトでホームページを作ってみようと思うなら、シリウスは必須です!

シリウス ホームページのその他のページ

SIRIUS(シリウス)ホームページは簡単にサイトを作成できるソフト!

SIRIUS(シリウス)使い方の基本『これなら分かる』初心者向けサイト作成方法

SIRIUS(シリウス)のレーダーチャートの使い方|サイトの差別化に

SIRIUS(シリウス)でプレビューが表示されない!対処法は?

SIRIUS(シリウス)で作るスマホサイトについて