!ホームSANGOのカスタマイズ装飾・ショートコードの使い方ボックス・枠を挿入する方法と種類一覧2018年12月21日SANGOには30種類以上のボックスがあらかじめ用意されています。どれもショートコードを使って挿入ができるため、HTMLとCSSの知識は必要ありません。ここでは記事内にボックスを挿入する方法をまとめておきます。NEWver1.3のアップデートによりビジュアルエディタの[スタイル]から一部のボックスを挿入できるようになりました。詳しい使い方はこの記事の後半で解説しています。メモ(補足説明の使い方)MEMOこのように補足メモを記事内に簡単に挿入することができます。↑このボックスを挿入したい場合、投稿画面のエディタ内の好きな位置に、以下のショートコードを記載します。title="MEMO"の部分は好きな文字に変えることができます(例:title="補足")。注意このように注意書きをすることもできます。注意書きのボックスを挿入したい位置には以下のショートコードを記載します。title="注意"の部分は好きな文字列に変えることができます。上の2つ以外にも30個以上のボックスが用意されています。一覧で紹介していくので、気に入ったものがあればどんどん使ってみてください。紹介するボックスのショートコードは次のような形になります。class="ボックス名"]ここに文章[/box]box1SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box1"]ここに文章[/box]box2SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box2"]ここに文章[/box]box3SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box3"]ここに文章[/box]box4SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box4"]ここに文章[/box]box5SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box5"]ここに文章[/box]box6SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box6"]ここに文章[/box]box7SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box7"]ここに文章[/box]box8SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box8"]ここに文章[/box]box9SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box9"]ここに文章[/box]box10SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box10"]ここに文章[/box]box11SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box11"]ここに文章[/box]box12SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box12"]ここに文章[/box]box13SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box13"]ここに文章[/box]box14SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box14"]ここに文章[/box]box15SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box15"]ここに文章[/box]box16SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box16"]ここに文章[/box]box17SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box17"]ここに文章[/box]box18SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box18"]ここに文章[/box]box19SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box19"]ここに文章[/box]box20SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box20"]ここに文章[/box]box21SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box21"]ここに文章[/box]box22SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box22"]ここに文章[/box]box23SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box23"]ここに文章[/box]box24SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box24"]ここに文章[/box]box25SANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。class="box25"]ここに文章[/box]box26ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]注意box26以降は、タイトルの入力が必要となるボックスであるため、投稿編集画面の「スタイル」から挿入することはできません。こちらに記載のあるショートコードを用いて挿入くださいませ。box26〜box29は、タイトルが改行されるとデザインが崩れてしまいます。短いタイトルをつけられる時にのみ使用しましょう。box27ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box28ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box29ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box30ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box31ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box32ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]box33ここにタイトルSANGOなら...あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。title="タイトル"]文章[/box]箇条書きと組み合わせるとこんな表現もボックスと合わせて箇条書きを使用することで、以下のような表現をすることもできます。SANGOへようこそ!SANGOとは...大胆で使いやすいWordPressテーマです。さぁ、早速始めましょうこれはボックスのショートコードの中に、円形の番号付きの箇条書きを入れることで実現しています。<li>大胆で使いやすいWordPressテーマです。[/list][/box]このようにSANGOを使いこなせば、様々な表現をすることができます。いえ、いきなり複雑なショートコードを書くのも大変かと思います。使い方に慣れてきてから色々と手を出すのが良いでしょう。箇条書きのショートコードはこちらの記事で紹介しています。記事に様々なスタイルの箇条書きを挿入するNEWビジュアルエディタのドロップダウンからボックスを挿入する方法ver1.3のアップデートより、一部のボックスを[スタイル]のドロップダウンから挿入することもできるようになりました。ボックスを挿入したい位置で[スタイル]⇒[ボックス]を開き、使いたいボックス種類を選ぶだけ(先頭の番号は、さきほどのbox◯の数字と対応しています)。ボックスを挿入すると、ビジュアルエディタ上で再現されます。この中にテキストや箇条書きを入れることができます。注意1「補足説明(memo)」「注意書き(alert)」「box26〜box32」のタイトル付きのボックスはスタイルから挿入することはできません。ショートコードを使って頂くようお願いします。注意2箇条書きはボックス挿入後に作成するようにしましょう(作成済みの箇条書きを後からボックスで囲むことはできません)。AddQuicktagを使うのがおすすめどれもショートコードが長めになってしまうので、いちいちこのページからコピペしていくのは面倒かと思います。使うものはAddQuicktagに登録し、すぐに呼び出せるようにしておくのがおすすめです。2020/01/27box23のカスタマイズをしたいお世話になっております。「box23」の色を変更して、ほかのボックスと同じように横幅を広げたいです。お忙しいところ恐れ入りますが、やり方を教えていただけましたら幸いです。2019/12/01色変更のCSSが適用されないいつもお世話になっています。記入したのですが、色が変わりません。どこが悪いのでしょうか...。忙しい中すみませんがご指導よろしくお願いします。2019/07/28h3の初期適応デザインを消したいお世話になっております。h3タグのところが修正したい箇所です。文字と枠の距離が近くなってしまいます。2019/05/20box29の電球アイコンを付けたいきれいなSANGO作っていただいてありがとうございます。CSSを触ったのですが色は変わったのですが電球のアイコンが表示できなくなりました。2019/05/06ボックスのタイトルのフォントサイズや太さを変えたいお忙しいところ失礼します。投稿ページと同じデフォルトサイズに変更したいです。太字からデフォルトに戻す方法もあればよろしくお願いします。2019/04/17BOX26のアイコンを消す方法SANGOを使わせていただいています。BOX26のタイトル前のアイコンを消す方法を教えてもらいたいです。2019/04/12BOX28を現状の色と、別の色とで使い分けたい色の変え方などは過去のコメントを見ればわかったのですが、同じデザインで通常の色と別の色とを併用して使いたいです。教えていただけますと幸いです。2019/03/24ボックスの内容がdivタグで囲まれないはじめまして、質問させていただきます。26以降のタイトルがあるボックスに関してなのですが、普通だとボックスの内容がdivで囲まれていると思います。現状自分のサイトに関しては囲まれていません。これは自動で囲まれるものなのでしょうか?それとも手動でdivを記述するのでしょうか。2019/03/04JINみたいにボックスを編集画面からWPテーマJINみたいに、ボックスを編集画面から使えるようにしていただきたいです。ボックスを暗記するのが大変で...。他テーマも使っているので、単語登録だとごちゃごちゃになるしこちらも暗記が大変になってしまいます。技術的に難しいかと思いますが、一意見としてご参照ください。2019/01/19いつもお世話になります。SANGOテーマで運営中の1サイトはショートコードで以下の4点を特に愛用させていただいております。2018/12/22v1.73にアップデートしました。私のiphoneで確認すると「box30」のアイコンが表示されません(✕マークになってます)。2018/11/06BOX30〜33の色を変更する方法こんにちは。box31の色を変更するcssをご教示ください。2018/10/21box22とbox8の線をカスタマイズしたいいつもお世話になっております。左縦線の太さや背景色も調整できると助かります。2018/09/28box内でbrタグを使うSANGO使わせていただき、大変気に入っております。ありがとうございます。box内の一行あけはbrタグを使うということですが、テキストエディタからタグを入れても反映しません。入れても、pタグもうまくいきませんでした。本文ではbrで正常に改行します。どこか設定を間違っていますでしょうか。2018/09/05box26の色を変更したいお世話になります。box26の色変更方法(旗の色含め)教えていただきたいです。BOXの色変更の仕方のまとめページなど(メインカラーを使う方法など)今後作成していただけると大変助かります...。2018/07/04ボックスのタイトルを見出しタグにしたいSANGOを使わせていただいております。box5の二重枠線の色を変更するCSSを教えていただけますでしょうか。2018/06/05box21のグラデーションの色を変えたいSANGOを使わせていただいてます。boxの21グラデーションの色を変更したいのですが、そのCSSを教えて頂けるでしょうか。2018/05/11blockquoteに対するCSSが効かないもう一度、「反映されないときの対処法まとめ」を読み込み考えたところ、原因が分かりました。一部どうすればいいのか分からない箇所があります。お忙しいところ恐縮ですが、教えていただければ幸いです。blockquoteでそのまま子テーマCSSに書き込んだだけでは、親テーマの方のblockquoteが一部しゃしゃり出てきてデザインが崩れる箇所があるようでした。2018/04/11sangoを使用してテーマを作らせていただいてます。注意書きのコードをメモ帳に貼り付けて、そこからコピペしているのですが、記事に貼り付けると注意の文字の後に<span>と表示されてしまいます。バグなのでしょうか?解決をよろしくお願いします。2018/04/05BOX28の色を変更したいいつもお世話になっております。素敵なデザインと手厚いサポートに惚れ、私もSANGO導入させていただきました!ありがとうございます。質問ですが、BOX28の色を変更したいのですが、どのようなコードをCSSに書き込めばよいでしょうか。2018/02/25ボックス内でbrタグで改行するいつもお世話になります。お陰様で、かなりサイトを構築することができました。細かい質問なのですが、「ボックス内で一行空けての改行」はできるのでしょうか。エディタでは一行空けていても、実際の表示では詰められてしまいます。何か良い方法はないでしょうか。2018/02/17box24の色を変更したいサンゴ購入しました。素人で全然わからないのですが、box24の色変更の方法を教えて頂けると助かります。お手すきの際に宜しくお願いいたします。2018/02/17いつも丁寧な説明をありがとうございます。box29の色やアイコンを変えたいのですが、何かしら方法はありますでしょうか。2017/12/20SANGO購入させていただきました。デフォルトの状態でもとても細かい部分まで綺麗にデザインされており大変気に入っております。この記事にコメントするのが正しいのかどうかわからないのですが、ボックス装飾関係でお伺いしたいことがあります。コメント投稿ガイドラインを読んでから投稿してください。メールアドレスは公開されませんが、名前は公開されます。