関連記事ウィジェット使い方ガイドダウンロードホームデザイン40種類以上のボタンを用意2018/12/22SHAREツイートシェアはてブLINEPocketこの記事はSANGOカスタマイズガイドの「ボタンの挿入方法と種類一覧」を一部転載したものです。立体的なボタンAddQuicktagを使うのがおすすめSANGOオリジナルボタン一覧ここからSANGOで使えるオリジナルデザインのボタンを一覧で紹介していきます。浮き出しボタン浮き出しボタンはマテリアルデザインでよく使われるボタンです(参考:マテリアルデザインとは?)。Googleのサービスなどでよく見かけますね。以下の5色の中から選んで使うことができます。1-1.メインカラーを背景色にBUTTONカスタマイザー(ダッシュボード外観カスタマイズ)で設定した「メインカラー」がボタンの背景色となります。strong"]ボタンテキスト[/btn]1-2.アクセントカラーを背景色にBUTTON下記のショートコードを使うと、カスタマイザーで設定したアクセントカラーを背景色とした浮き出しボタンが挿入されます。strong"]ボタンテキスト[/btn]1-3.浮き出しボタン(赤)BUTTONここからの3つはSANGOのテーマであらかじめ設定されている背景色です。strong"]ボタンテキスト[/btn]CatNoseちなみにclassの中のstrongを消すとボタンテキストが太字ではなく、通常の太さになります。テキストボタンテキストボタンはシンプルなテキストだけのボタンです。テキストまわりの余白が少し広めに取られており、ホバー時(カーソルを上に重ねたとき)にはうっすらと灰色の背景色がつきます。通常のリンク色がそのまま使われます。メインカラーカスタマイザーで登録したメインカラーが使われます。アクセントカラーカスタマイザーで登録したアクセントカラーが使われます。FontAwesomeでアイコンを使うBUTTONこのボタンに限ったことではありませんが、ボタンテキストの部分にFontAwesomeのコードを記入することでアイコンを使うこともできます。ビジュアルエディタではなく、テキストエディタの方からアイコンのコードを入力する必要があることに注意しましょう。フラットなボタンここからは少し個性的なデザインのボタンとなります。どれもホバー(カーソルを上に重ねたとき)にちょっとした変化があるのでぜひチェックしてみてください。green-bc"]ボタンテキスト[/btn]AddQuicktagを使うのがおすすめどれもショートコードが長めになってしまうので、いちいちこのページからコピペしていくのは面倒かと思います。使うものはAddQuicktagに登録してすぐに呼び出せるようにしておくのが良いでしょう。関連記事のデザインを3パターン+から選べるようにCatNoseWordPressテーマ「SANGO」はサルワカの中の人が制作しました。本デモサイトに含まれるアイキャッチ画像や記事内の画像はテーマには含まれないのでご注意ください。