リンクをボタンっぽい表示にする

イベント詳細ページから公式告知ページへ誘導するのに、ボタンタイプのリンクを貼る方法です。
サイズが大きいのでスマホでもタップしやすく、また目を引くので誘導しやすくなります。
きちんとした告知サイトを用意しているならぜひ活用しましょう。

使い方

イベント編集画面で「テキスト」エディタを使用しているときは、「ボタン風リンク」というボタンをクリックするとタグが入力されます。
ボタンの色は必ず指定してください。
でないと、背景が白いところに白いボタンが表示されるので、目視できなくなります。

<p><a href="リンク先" class="btn-サイズ btn-色名">文字列</a></p>

リンク先 … リンク先URLを「”」と「”」の間に入力してください。
btn-サイズ … ボタンのサイズを「サイズ」のところに入れてください。
btn-色名 … ボタンの色を「色名」のところに入れてください。
文字列 … ボタンの上に表示される文字です。「ここをクリック」「詳細はこちら」「もっと読む」などが一般的です。

ボタンのサイズ

ボタンのサイズは三種類あります。

<p><a href="#" class="btn btn-red">ボタンテスト</a></p>
<p><a href="#" class="btn btn-red btn-m">ボタンテスト</a></p>
<p><a href="#" class="btn btn-red btn-l">ボタンテスト</a></p>

ボタンテストサイズ指定なし
ボタンテストMサイズ
ボタンテストLサイズ(画面幅に合わせて伸縮します)

ボタンの色

<a href="#" class="btn btn-red">ボタンテスト</a>
<a href="#" class="btn btn-pink">ボタンテスト</a>
<a href="#" class="btn btn-purple">ボタンテスト</a>
<a href="#" class="btn btn-deep">ボタンテスト</a>
<a href="#" class="btn btn-indigo">ボタンテスト</a>
<a href="#" class="btn btn-blue">ボタンテスト</a>
<a href="#" class="btn btn-light-blue">ボタンテスト</a>
<a href="#" class="btn btn-cyan">ボタンテスト</a>
<a href="#" class="btn btn-teal">ボタンテスト</a>
<a href="#" class="btn btn-green">ボタンテスト</a>
<a href="#" class="btn btn-light-green">ボタンテスト</a>
<a href="#" class="btn btn-lime">ボタンテスト</a>
<a href="#" class="btn btn-yellow">ボタンテスト</a>
<a href="#" class="btn btn-amber">ボタンテスト</a>
<a href="#" class="btn btn-orange">ボタンテスト</a>
<a href="#" class="btn btn-deep-orange">ボタンテスト</a>
<a href="#" class="btn btn-brown">ボタンテスト</a>
<a href="#" class="btn btn-grey">ボタンテスト</a>

ボタンテストレッド
ボタンテストピンク
ボタンテストパープル
ボタンテストディープ
ボタンテストインディゴ
ボタンテストブルー
ボタンテストライトブルー
ボタンテストシアン
ボタンテストティール
ボタンテストグリーン
ボタンテストライトグリーン
ボタンテストライム
ボタンテストイエロー
ボタンテストアンバー
ボタンテストオレンジ
ボタンテストディープオレンジ
ボタンテストブラウン
ボタンテストグレー

シェアする

フォローする