Ver1.5 Released !

ボタンの挿入方法と種類一覧

ボタンの挿入方法とデザイン一覧

SANGOではたくさんの種類のボタンを用意しています。どれも使うのにHTMLやCSSの知識は不要、ビジュアルエディタのスタイル設定やショーコードにより簡単に記事内に挿入ができます。

ver1.3〜 スタイルから挿入する場合

ver1.3のアップデートにより、ビジュアルエディタのスタイルから簡単に挿入することができるようになりました。もちろん、ショーコードもこれまで通りに使うことができます。

手順1:リンクを作成する

まずはいつも通りにリンクを挿入しましょう(テキストを選択して鎖マークをクリック)。これはWordPressのビジュアルエディタのデフォルト機能ですね。

手順2:リンクテキストを選択する

次に作成したリンクテキストをドラッグして選択状態にしましょう。

手順3:ボタンのスタイルを選ぶ

この状態で、ボタンのスタイルを選びます。[スタイル]⇒[ボタン]にカーソルを当てると、ボタンの種類がずらっと表示されます。

ボタンのスタイルを選ぶ

この中から使いたいものを選びましょう。

完成!

ビジュアルエディタ上でもボタンのデザインは反映されます。

注意

メインカラーやアクセントカラーについては、それぞれ「水色」と「オレンジ」で固定されています。ご理解頂けると幸いです。

スタイル反映されない場合には、アップデート前のCSSが残っている可能性があります。一度ブラウザのキャッシュを削除して頂くようお願いします。


ショートコードでボタンを挿入する場合

これから紹介するボタンを挿入したい場合、以下の形のショートコードを記事本文内の好きな位置に書き込みます。

ショートコードの基本形
[btn href="ボタンのURL" class="ボタンの種類"]ボタンのテキスト[/btn]
ボタンの種類は、のちほど一覧で紹介します。

応用:新しいタブで開くようにするには

もし、クリック/タップしたときに、別のタブでページを開くようにするには、以下のように始めのショートコード内にtarget="_blank"と入力します(前後には半角スペースを空けましょう)。

別タブで開く
[btn href="ボタンのURL" class="ボタンの種類" target="_blank"]ボタンのテキスト[/btn]

応用:nofollowにするには

リンクをrel="nofollow"にしたい場合は以下のように書きます。

nofollowにする
[btn href="ボタンのURL" class="ボタンの種類" target="_blank" rel="nofollow"]ボタンのテキスト[/btn]
「何のことかよく分からない」という方は、広告へのリンクを貼るときにのみ、この設定にしておきましょう。

応用:複数のボタンを横に並べるには

BUTTON BUTTON

複数のボタンを横に並べたい場合には、始めのショートコードの中に半角スペースを空けてyokoとだけ入力します。横に並べたいボタンそれぞれのショートコードにyokoを入れるようにしましょう。

横に並べる
[btn href="~" class="~" yoko]ボタン[/btn][btn href="~" class="~" yoko]ボタン[/btn]
MEMO
横に並べると画面に収まりきらない場合には、折り返されてボタンが下へと並ぶようになります。

応用:ボタンを中央寄せするには

ボタンを「真ん中に寄せて配置したい」という場合には、ボタンのショートコードを[center]〜[/center]ではさみます。横に並べたボタンが複数ある場合には、複数のショートコード全体をはさみます。

中央寄せ
[center][btn href="~" class="~" yoko]ボタン[/btn][btn href="~" class="~" yoko]ボタン[/btn][/center]

応用:アフィリエイトリンクを改変せずにボタンを使う方法

上で紹介した方法では、リンクタグに対して直接クラス名を追加することで装飾をしています。もし、改変禁止のアフィリエイトリンクに対してボタンを使いたいときは、下の記事を参考にしてみてください。

SANGOでアフィリエイトボタンを使う【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法

SANGOオリジナルボタン一覧

ここからSANGOで使えるオリジナルデザインのボタンを一覧で紹介していきます。

1. 浮き出しボタン

浮き出しボタンはマテリアルデザインでよく使われるボタンです(参考:マテリアルデザインとは?)。Googleのサービスなどでよく見かけますね。以下の5色の中から選んで使うことができます。

1-1.メインカラーを背景色に

BUTTON

カスタマイザー(ダッシュボード外観カスタマイズ)で設定した「メインカラー」がボタンの背景色となります。
[btn href="リンク先のURL" class="raised main-bc strong"]ボタンテキスト[/btn]

1-2.アクセントカラーを背景色に

BUTTON

下記のショートコードを使うと、カスタマイザーで設定したアクセントカラーを背景色とした浮き出しボタンが挿入されます。

[btn href="リンク先のURL" class="raised accent-bc strong"]ボタンテキスト[/btn]

1-3.浮き出しボタン(赤)

BUTTON

ここからの3つはSANGOのテーマであらかじめ設定されている背景色です。
[btn href="リンク先のURL" class="raised red-bc strong"]ボタンテキスト[/btn]

1-4.浮き出しボタン(青)

BUTTON

[btn href="リンク先のURL" class="raised blue-bc strong"]ボタンテキスト[/btn]

1-5.浮き出しボタン(緑)

BUTTON

[btn href="リンク先のURL" class="raised green-bc strong"]ボタンテキスト[/btn]

サルワカくん

ちなみにclassの中のstrongを消すとボタンテキストが太字ではなく、通常の太さになります。

2.リップルエフェクト付浮き出しボタン

リップルエフェクト例

リップルエフェクトとは、タップしたときに波紋が広がるようなエフェクトのことです。こちらもマテリアルデザインでよく使われます。SANGOでは、Ripplerと呼ばれるjQueryプラグインをあらかじめ導入したおり、簡単にリップルエフェクトをボタンに加えることができます。 リップルエフェクトを適用するのは簡単で、クラス名(class)に"rippler rippler-default"と加えるだけです。

MEMO
エフェクトのかかり方の種類は切り替えることができます。詳しくは、Ripplerのデモページをチェックしてみてください。
TIPS
リップルエフェクトを使わない、という場合には、少しでも軽くするために(外観カスタマイズ詳細設定)からリップルエフェクトをオフにすることをおすすめします。

2-1. サンプルとショートコード

下の5つのボタンには全てリップルエフェクトが適用されています。ぜひクリックorタップしてみてください。

BUTTON BUTTON BUTTON BUTTON BUTTON

このボタンのコードはそれぞれ以下のようになります。長いのでコピペして使うのがおすすめです。WordPressプラグイン「AddQuickTag」に登録しておいても良いでしょう。

↓メインカラー
[btn href="リンク先のURL" class="raised main-bc strong rippler rippler-default"]ボタンテキスト[/btn]

↓アクセントカラー
[btn href="リンク先のURL" class="raised accent-bc strong rippler rippler-default"]ボタンテキスト[/btn]

↓赤
[btn href="リンク先のURL" class="raised red-bc strong rippler rippler-default"]ボタンテキスト[/btn]

↓青
[btn href="リンク先のURL" class="raised blue-bc strong rippler rippler-default"]ボタンテキスト[/btn]

↓緑
[btn href="リンク先のURL" class="raised green-bc strong rippler rippler-default"]ボタンテキスト[/btn]

3. テキストボタン

テキストボタンはシンプルなテキストだけのボタンです。ただし、テキストまわりの余白が少し広めに取られており、ホバー時(カーソルを上に重ねたとき)にはうっすらと灰色の背景色がつきます。

3-1.リンク色

通常のリンク色がそのまま使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong"]ボタンテキスト[/btn]

3-2. メインカラー

カスタマイザーで登録したメインカラーが使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong main-c"]ボタンテキスト[/btn]

3-3. アクセントカラー

カスタマイザーで登録したアクセントカラーが使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong  accent-c"]ボタンテキスト[/btn]

参考. FontAwesomeでアイコンを使う

BUTTON

このボタンに限ったことではありませんが、ボタンテキストの部分にFontAwesomeのコードを記入することでアイコンを使うこともできます。ただし、ビジュアルエディタではなく、テキストエディタの方からアイコンのコードを入力する必要があることに注意しましょう。
[btn href="リンク先のURL" class="btntext strong accent-c"]<i class="fa fa-cloud-download"></i> ボタンテキスト[/btn]

4. リップルエフェクト付テキストボタン

BUTTON BUTTON BUTTON

リップルエフェクト付きのテキストボタンにするショートコードは以下のようになります。

↓通常のリンク色
[btn href="リンク先のURL" class="btntext strong rippler rippler-inverse"]ボタンテキスト[/btn]

↓メインカラー
[btn href="リンク先のURL" class="btntext strong main-c rippler rippler-inverse"]ボタンテキスト[/btn]

↓アクセントカラー
[btn href="リンク先のURL" class="btntext strong accent-c rippler rippler-inverse"]ボタンテキスト[/btn]

5. フラットなボタン

ここからは少し個性的なデザインのボタンとなります。どれもホバー(カーソルを上に重ねたとき)にちょっとした変化があるのでぜひチェックしてみてください。

5-1.塗りつぶし

BUTTON

[btn href="リンク先のURL" class="flat1"]ボタンテキスト[/btn]

5-2.シンプルな枠ボタン

BUTTON

[btn href="リンク先のURL" class="flat2"]ボタンテキスト[/btn]

5-3.二重線囲み

BUTTON

[btn href="リンク先のURL" class="flat3"]ボタンテキスト[/btn]

5-4.破線⇒ホバーでドットに

BUTTON

[btn href="リンク先のURL" class="flat4"]ボタンテキスト[/btn]

5-5.ホバーで塗りつぶし

BUTTON

[btn href="リンク先のURL" class="flat5"]ボタンテキスト[/btn]

5-6.両端線ボタン

BUTTON

[btn href="リンク先のURL" class="flat6"]ボタンテキスト[/btn]

5-7.下線ボタン

BUTTON

[btn href="リンク先のURL" class="flat7"]ボタンテキスト[/btn]

5-8.右側が丸いボタン

BUTTON

[btn href="リンク先のURL" class="flat8"]ボタンテキスト[/btn]

5-9.塗りつぶしボタン

BUTTON

[btn href="リンク先のURL" class="flat9"]ボタンテキスト[/btn]

5-10.上がまるいボタン

BUTTON

[btn href="リンク先のURL" class="flat10"]ボタンテキスト[/btn]

5-11.ストライプ&両端線

BUTTON

[btn href="リンク先のURL" class="flat11"]ボタンテキスト[/btn]

6. グラデーションボタン

6-1.青と水色のグラデーション

BUTTON

[btn href="リンク先のURL" class="grad1"]ボタンテキスト[/btn]

6-2.赤と黄のグラデーション

BUTTON

[btn href="リンク先のURL" class="grad2"]ボタンテキスト[/btn]

6-3.丸みをつけた場合

BUTTON

[btn href="リンク先のURL" class="grad3"]ボタンテキスト[/btn]

6-4.角の丸みなし

BUTTON

[btn href="リンク先のURL" class="grad4"]ボタンテキスト[/btn]

7. 立体的なボタン

7-1.厚みのあるボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc"]ボタンテキスト[/btn]

7-2.影をつけたタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow"]ボタンテキスト[/btn]

7-3.文字をエンボスにしたタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow emboss"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow emboss"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow emboss"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow emboss"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow emboss"]ボタンテキスト[/btn]

7-4.文字が浮き出るタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow text3d"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow text3d"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow text3d"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow text3d"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow text3d"]ボタンテキスト[/btn]

7-5.カクカクとしたボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic2 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic2 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 green-bc"]ボタンテキスト[/btn]

7-5.少しポップなボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic3 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic3 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 green-bc"]ボタンテキスト[/btn]

34 Comments

sayaka

ボタンの大きさは変えることできますでしょうか・・?
(初歩的な質問だったらすみません、、

返信する
アリス

~1-2.アクセントカラーを背景色に~「raised accent-bc strong」のボタンを使用しているのですが、文字数によってボタンの横幅が変わるため、固定したいと思っています。どのようにすればよいでしょうか。よろしくお願いいたします。

返信する
渋谷

お世話になります。
ボタンデザインに
押せないボタン、グレーアウトしたボタンの追加をお願いできますと嬉しいです。

返信する
サルワカくん
.raised.gray-bc {
    box-shadow: none;
    color: gray;
    background: #EFEFEF;
}

というCSSを追加して、btnのショートコードのクラス名をclass="raised gray-bc strong"とすると
グレイのボタンが使えるかと思います!

返信する
ST

はじめまして。
いつも参考にしております。

すみません、なぜかスタイルを押すと

card
select.is-compact
compact-submit.compact-submit

と出てしまいボタンなどを押せません

最初は出ていたような気がするのですが、何かをしてしまったからなのか分からずで困っています。

分かることがあれば教えていただけないでしょうか?

何卒宜しくお願い致します。

返信する
サルワカくん

はじめまして。正直、全く分からないですね・・・。
・プラグインを一度全て停止してみて頂けますか?
・どこに
card
select.is-compact
compact-submit.compact-submit
と出るのでしょうか。
スタイルをクリックするとエディタ上にこの文字列が挿入されるのでしょうか。

返信する
ST

ご返信ありがとうございます。

スタイルクリックすると、普通はボタンが選べると思うのですが、それが出ずにこちらの文字列が出ます。。

せっかくボタンを簡単に使いこなしたかったので困ってます。

プラグイン後ほど試してみます。

返信する
サルワカくん

ご報告ありがとうございます。
差し支えなければ、何というプラグインか教えて頂けますか?

返信する
ST

遅くなりました。

TinyMCE Advanced

こちらのプラグインです。
ご確認宜しくお願い致します。

サルワカくん

TinyMCE Advancedは私も使っていますが、問題が生じたことがはないので、何か設定がおかしくなってしまったのかもしれませんね。
ご報告ありがとうございました。

タイソン

お世話になっております。

DEMOサイトのトップページのヘッダーのように、画像の上にボタンを配置することはできませんでしょうか?

可能であれば、そのボタン配置場所の決定方法も併せて教示いただければと思います。

よろしくお願いいたします。

返信する
いか焼き

おせわになっております。
チョット悩んでおります。
下記のようにscriptをボタンに反映したいのですが、上手くいきません。
教えていただけませんでしょうか?

function gate(){
// ▼ユーザの入力を求める
var UserInput = prompt(“パスワードを入力して下さい:”,””);
// ▼入力内容をチェック
if( /\W+/g.test(UserInput) ) {
// ▼半角英数字以外の文字が存在したらエラー
alert(“半角英数字のみを入力して下さい。”);
}
// ▼キャンセルをチェック
else if( UserInput != null ) {
// ▼入力内容からファイル名を生成して移動
location.href = “http://foryou358.tvais.online/pdf39/” + UserInput + “.zip”;
}
}

[btn href="javascript:gate()" class="raised accent-bc strong rippler rippler-default"]パスワードを入力して秘密のページへアクセスする[/btn]

返信する
いか焼き

貼り付けを失敗しておりました。再送させてください。
ボタンにscriptを適用したい場合を教えていただけませんでしょうか?

どうぞよろしくお願いいたします。

function gate(){
// ▼ユーザの入力を求める
var UserInput = prompt(“パスワードを入力して下さい:”,””);
// ▼入力内容をチェック
if( /\W+/g.test(UserInput) ) {
// ▼半角英数字以外の文字が存在したらエラー
alert(“半角英数字のみを入力して下さい。”);
}
// ▼キャンセルをチェック
else if( UserInput != null ) {
// ▼入力内容からファイル名を生成して移動
location.href = “http://foryou358.tvais.online/pdf39/” + UserInput + “.zip”;
}
}

[btn href="javascript:gate()" class="raised accent-bc strong rippler rippler-default"]パスワードを入力して秘密のページへアクセスする[/btn]

返信する
サルワカくん

たしかhrefで指定したURLはエスケープするように設定していたため「テキストエディタ」の方にボタンのHTMLタグを直接貼り付けると良いのではないかと思います。

<a href="javascript:gate()" class="btn raised accent-bc strong rippler rippler-default">パスワードを入力して秘密のページへアクセスする</a>

とかですかね・・・。それで無理であれば、特定のクラス名のボタンクリックを検知するJSを書くのが良いのではないでしょうか。
(すみませんが、そのあたりはちょっとサポート外ですね・・・)

返信する
たいやき

いつもお世話になっております。

5-3.二重線囲み
[btn href="リンク先のURL" class="flat3"]ボタンテキスト[/btn]
の線の色の変更の仕方を教えていただけませんでしょうか?

よろしくお願い致します。

返信する
たいやき

度々すみません。
5-3.二重線囲みの色を変更するために、
子テーマのCSSに

.flat3 {
display: inline-block;
padding: .4em 1em;
border: double 4px #67c5ff;
border-radius: 3px;
color: #67c5ff;
}

を加えて、 #67c5ffを変更してみましたが、色が変わりません。
ホバー時の色は変更しない予定なので、これで大丈夫かな?と思ったのですが…
お手隙の際にご教示いただければと思います。
よろしくお願い致します。

返信する
サルワカくん

以下のCSSでどうでしょうか。

#inner-content .flat3 {
  border-color: #67c5ff;/*線色*/
  color: #67c5ff;?/*文字色*/
}
返信する
うさたん

ボタンを挿入する際にスタイルがなくなってしまいました。
今まではありましたが、教えていただけませんでしょうか。

返信する
めぐ

SANGOを使わせていただいております。
いつもお世話になっております。
ボタンの直前(ボタンの左側)にfontawesomeのアイコンを置きたいのですが、アイコンのHTMLのあとにボタンのショートコードを続けると一段ずれ、さらにスペースがあいてしまいます。
もし対処法がありましたらご教授お願いできませんでしょうか。よろしくお願いいたします。

返信する
サルワカくん

以下のようにbtnタグ内に「yoko」という文字列を入れると、イメージ通りになるのではないかと思います。

<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>[btn href="リンク先のURL" class="raised main-bc strong" yoko]ボタンテキスト[/btn]
返信する
サルワカくん

.entry-content .square_btn {~} というようにクラス名の前に.entry-contentとつけると消えるのではないかと思います。

返信する
sangoオタク

お忙しいところすいません
無事解決できました!ありがとうございます。

返信する
しん

はじめまして。
5-2.シンプルな枠ボタン(flat2)の色の変え方を教えていただけませんでしょうか?
よろしくお願いいたします。

返信する
サルワカくん

子テーマのstyle.cssに以下のCSSを追加することで変更できるかと思います。

.flat2 {
    border-color: #色コード;/*線色*/
    color: #色コード;/*文字色*/
}
/*ホバー時*/
.flat2:hover {
    background: #色コード;/*背景色*/
    color: white;/*文字色*/
}
返信する
しん

ご返答ありがとうございます。
理想のボタンを作ることができました!
本当にありがとうございました!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です