!ホームSANGOのカスタマイズ装飾・ショートコードの使い方ボタンの挿入方法と種類一覧2019年9月8日SANGOではたくさんの種類のボタンを用意しています。どれも使うのにHTMLやCSSの知識は不要、ビジュアルエディタのスタイル設定やショーコードにより簡単に記事内に挿入ができます。立体的なボタンAddQuicktagを使うのがおすすめGutenbergエディタを使う場合こちらの記事をご覧ください。おすすめクラシックエディターを使っている場合、基本的にはショートコードではなく、以下の手順でボタンを作成することをおすすめします。手順1:リンクを作成するまずはいつも通りにリンクを挿入しましょう(テキストを選択して鎖マークをクリック)。これはWordPressのビジュアルエディタのデフォルト機能ですね。手順2:リンクテキストを選択する次に作成したリンクテキストをドラッグして選択状態にしましょう。手順3:ボタンのスタイルを選ぶこの状態で、ボタンのスタイルを選びます。[スタイル]⇒[ボタン]にカーソルを当てると、ボタンの種類がずらっと表示されます。この中から使いたいものを選びましょう。完成!ビジュアルエディタ上でもボタンのデザインは反映されます。注意メインカラーやアクセントカラーについては、それぞれ「水色」と「オレンジ」で固定されています。ご理解頂けると幸いです。スタイル反映されない場合には、アップデート前のCSSが残っている可能性があります。一度ブラウザのキャッシュを削除して頂くようお願いします。ショートコードでボタンを挿入する場合これから紹介するボタンを挿入したい場合、以下の形のショートコードを記事本文内の好きな位置に書き込みます。class="ボタンの種類"]ボタンのテキスト[/btn]ボタンの種類は、のちほど一覧で紹介します。応用:新しいタブで開くようにするにはもし、クリック/タップしたときに、別のタブでページを開くようにするには、以下のように始めのショートコード内にtarget="_blank"と入力します(前後には半角スペースを空けましょう)。target="_blank"]ボタンのテキスト[/btn]応用:nofollowにするにはリンクをrel="nofollow"にしたい場合は以下のように書きます。rel="nofollow"]ボタンのテキスト[/btn]「何のことかよく分からない」という方は、広告へのリンクを貼るときにのみ、この設定にしておきましょう。BUTTON複数のボタンを横に並べたい場合には、始めのショートコードの中に半角スペースを空けてyokoとだけ入力します。横に並べたいボタンそれぞれのショートコードにyokoを入れるようにしましょう。yoko]ボタン[/btn]MEMO横に並べると画面に収まりきらない場合には、折り返されてボタンが下へと並ぶようになります。BUTTONボタンを「真ん中に寄せて配置したい」という場合には、ボタンのショートコードを[center]〜[/center]ではさみます。横に並べたボタンが複数ある場合には、複数のショートコード全体をはさみます。上で紹介した方法では、リンクタグに対して直接クラス名を追加することで装飾をしています。改変禁止のアフィリエイトリンクに対してボタンを使いたいときは、下の記事を参考にしてみてください。【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOオリジナルボタン一覧ここからSANGOで使えるオリジナルデザインのボタンを一覧で紹介していきます。浮き出しボタン浮き出しボタンはマテリアルデザインでよく使われるボタンです(参考:マテリアルデザインとは?)。Googleのサービスなどでよく見かけますね。以下の5色の中から選んで使うことができます。1-1.メインカラーを背景色にBUTTONカスタマイザー(ダッシュボード外観カスタマイズ)で設定した「メインカラー」がボタンの背景色となります。strong"]ボタンテキスト[/btn]1-2.アクセントカラーを背景色にBUTTON下記のショートコードを使うと、カスタマイザーで設定したアクセントカラーを背景色とした浮き出しボタンが挿入されます。strong"]ボタンテキスト[/btn]1-3.浮き出しボタン(赤)BUTTONここからの3つはSANGOのテーマであらかじめ設定されている背景色です。strong"]ボタンテキスト[/btn]サルワカくんちなみにclassの中のstrongを消すとボタンテキストが太字ではなく、通常の太さになります。テキストボタンテキストボタンはシンプルなテキストだけのボタンです。テキストまわりの余白が少し広めに取られており、ホバー時(カーソルを上に重ねたとき)にはうっすらと灰色の背景色がつきます。通常のリンク色がそのまま使われます。メインカラーカスタマイザーで登録したメインカラーが使われます。アクセントカラーカスタマイザーで登録したアクセントカラーが使われます。FontAwesomeでアイコンを使うBUTTONこのボタンに限ったことではありませんが、ボタンテキストの部分にFontAwesomeのコードを記入することでアイコンを使うこともできます。ビジュアルエディタではなく、テキストエディタの方からアイコンのコードを入力する必要があることに注意しましょう。ボタンテキスト[/btn]バージョンや設定により使用可能なFontAwesomeのアイコンが異なるのでご注意ください。フラットなボタンここからは少し個性的なデザインのボタンとなります。どれもホバー(カーソルを上に重ねたとき)にちょっとした変化があるのでぜひチェックしてみてください。green-bc"]ボタンテキスト[/btn]AddQuicktagを使うのがおすすめどれもショートコードが長めになってしまうので、いちいちこのページからコピペしていくのは面倒かと思います。使うものはAddQuicktagに登録してすぐに呼び出せるようにしておくのが良いでしょう。2020/02/23ダウンロードボタンのデザインを変更したいお陰様で初心者でも楽しく制作でき、心から感謝しております。ダウンロードボタンをsangoボタンデザインにしたいです。ダウンロードボタン非表示で希望のボタンデザインに変更するもリンクボタンになり、ダウンロードボタン表示でダウンロードできますが、黒いボタンが出現してしまう状態で躓いています。ダウンロード機能を残しボタンデザインを変更する方法はありますでしょうか。2020/02/09[timeline]内にボタン[btn]のフォントサイズについてはじめまして。最近、SANGOに出会いwpの楽しさを知りました。タイムライン[timeline]の[tl]内(以降、タイムライン)にボタン[btn](以降、ボタン)を設置しました。この時、タイムライン内に設置した、ボタンのフォントサイズをタイムラインのフォントサイズ(ボタンのサイズ?)を同じサイズにしたいです。2020/01/13フッターメニューにボタンを設置したいSANGOを有難く使わせていただいています。このサイトのように、フッターのお問合せボタンをボタン表示にしたいのですが、やり方がわかりません。他のコメント欄でも投稿したのですが、どこに投稿したかがわからなくなってしまって、こちらに書き込んでいます。初歩的な質問で申し訳ありません。2019/10/30浮き出しボタンの背景色変更お世話になっております。いつもSANGOを使用させて頂いております。浮き出しボタンについて教えて頂きたいのですが、浮き出しボタンはメインカラーとアクセントカラーの背景色は標準で準備がされておりますが、「薄めの下地色」やその他の色を浮き出しボタンの背景色にしたいと考えていますが、カスタマイズの方法を教えて頂ければと思います。2019/07/09スタイルのボタンがグレーで使用できないはじめまして。スタイルからプルダウンでボタンを選択するとグレーで選択できなくなってしまいました。今まではできていました。プラグインを一度全て無効にしたのですが、解決できませんでいた。2019/05/19ボタンのカスタマイズがスマホで反映されないお世話になります。回答ありがとうございました。投稿ページと同じデフォルトサイズに変更したいです。2019/03/09ボタンを中央揃えにしたいです。段落のブロックタイプでボタンを着たのですが、中央寄せを押してもボタンが中央揃えになりませんでした。2018/08/28ボタンを立て並べしたいのですが、どうやっても余白ができてしまって困っています。ここに余白が出来てしまう。2018/08/12シンプルな枠ボタン(flat2)の色の変え方はじめまして。サイトのリンクボタンを設定したところ、下線ができてしまいます。2018/06/11SANGOを使わせていただいております。いつもお世話になっております。ボタンの直前(ボタンの左側)にfontawesomeのアイコンを置きたいのですが、アイコンのHTMLのあとにボタンのショートコードを続けると一段ずれ、さらにスペースがあいてしまいます。対処法がありましたらご教授お願いできませんでしょうか。2018/06/01ボタンを挿入する際にスタイルがなくなってしまいました。今まではありましたが、教えていただけませんでしょうか。2018/05/28いつもお世話になっております。2018/05/09貼り付けを失敗しておりました。