Ver1.8 Released!

ボックス・枠を挿入する方法と種類一覧

SANGOのボックス種類一覧

SANGOには30種類以上のボックスがあらかじめ用意されています。どれもショートコードを使って挿入ができるため、HTMLとCSSの知識は必要ありません。ここでは記事内にボックスを挿入する方法をまとめておきます。

NEWver1.3のアップデートによりビジュアルエディタの[スタイル]から一部のボックスを挿入できるようになりました。詳しい使い方はこの記事の後半で解説しています。

メモ(補足説明の使い方)

MEMO
このように補足メモを記事内に簡単に挿入することができます。

↑このボックスを挿入したい場合、投稿画面のエディタ内の好きな位置に、以下のショートコードを記載します。title="MEMO"の部分は好きな文字に変えることができます(例:title="補足")。

[memo title="MEMO"]ここに文章[/memo]

注意書きの使い方

注意
このように注意書きをすることもできます。

注意書きのボックスを挿入したい位置には以下のショートコードを記載します。title="注意"の部分は好きな文字列に変えることができます。

[alert title="注意"]ここに文章[/alert]

その他のボックスの使い方

上の2つ以外にも30個以上のボックスが用意されています。一覧で紹介していくので、気に入ったものがあればどんどん使ってみてください。なお、紹介するボックスのショートコードは次のような形になります。

[box class="ボックス名"]ここに文章[/box]

box1

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box1"]ここに文章[/box]

box2

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box2"]ここに文章[/box]

box3

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box3"]ここに文章[/box]

box4

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box4"]ここに文章[/box]

box5

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box5"]ここに文章[/box]

box6

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box6"]ここに文章[/box]

box7

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box7"]ここに文章[/box]

box8

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box8"]ここに文章[/box]

box9

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box9"]ここに文章[/box]

box10

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box10"]ここに文章[/box]

box11

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box11"]ここに文章[/box]

box12

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box12"]ここに文章[/box]

box13

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box13"]ここに文章[/box]

box14

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box14"]ここに文章[/box]

box15

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box15"]ここに文章[/box]

box16

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box16"]ここに文章[/box]

box17

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box17"]ここに文章[/box]

box18

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box18"]ここに文章[/box]

box19

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box19"]ここに文章[/box]

box20

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box20"]ここに文章[/box]

box21

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box21"]ここに文章[/box]

box22

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box22"]ここに文章[/box]

box23

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box23"]ここに文章[/box]

box24

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box24"]ここに文章[/box]

box25

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box25"]ここに文章[/box]

box26

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box26" title="タイトル"]文章[/box]
注意
  • box26以降は、タイトルの入力が必要となるボックスであるため、投稿編集画面の「スタイル」から挿入することはできません。こちらに記載のあるショートコードを用いて挿入くださいませ。
  • box26〜box29は、タイトルが改行されるとデザインが崩れてしまいます。短いタイトルをつけられる時にのみ使用しましょう。

box27

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box27" title="タイトル"]文章[/box]

box28

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box28" title="タイトル"]文章[/box]

box29

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box29" title="タイトル"]文章[/box]

box30

ここにタイトル

SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。

[box class="box30" title="タイトル"]文章[/box]

box31

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box31" title="タイトル"]文章[/box]

box32

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box32" title="タイトル"]文章[/box]

box33

ここにタイトル
SANGOなら…
あなたのブログに個性を出すための様々な表現を簡単にすることができます。Webデザインの知識も必要ありません。
[box class="box33" title="タイトル"]文章[/box]

箇条書きと組み合わせるとこんな表現も

ボックスと合わせて箇条書きを使用することで、以下のような表現をすることもできます。

SANGOへようこそ!
  1. SANGOとは…
  2. 大胆で使いやすいWordPressテーマです。
  3. さぁ、早速始めましょう

これはボックスのショートコードの中に、円形の番号付きの箇条書きを入れることで実現しています。

[box class="box32" title="SANGOへようこそ!"]
[list class="ol-circle li-accentbdr acc-bc-before"]
   <ol>
     <li>SANGOとは…</li>
     <li>大胆で使いやすいWordPressテーマです。</li>
     <li>さぁ、早速始めましょう</li>
   </ol>
 [/list]
[/box]

このようにSANGOを使いこなせば、様々な表現をすることができます。とはいえ、いきなり複雑なショートコードを書くのも大変かと思います。使い方に慣れてきてから色々と手を出すのが良いでしょう。なお、箇条書きのショートコードはこちらの記事で紹介しています。

SANGOの箇条書き種類一覧記事に様々なスタイルの箇条書きを挿入する

NEWビジュアルエディタのドロップダウンからボックスを挿入する方法

ver1.3のアップデートより、一部のボックスを[スタイル]のドロップダウンから挿入することもできるようになりました。

使い方は簡単。ボックスを挿入したい位置で[スタイル]⇒[ボックス]を開き、使いたいボックス種類を選ぶだけ(先頭の番号は、さきほどのbox◯の数字と対応しています)。

ボックスをスタイルから挿入

ボックスを挿入すると、ビジュアルエディタ上で再現されます。この中にテキストや箇条書きを入れることができます。

注意1
「補足説明(memo)」「注意書き(alert)」「box26〜box32」のタイトル付きのボックスはスタイルから挿入することはできません。ショートコードを使って頂くようお願いします。
注意2
箇条書きはボックス挿入後に作成するようにしましょう(作成済みの箇条書きを後からボックスで囲むことはできません)。

71 COMMENTS

こはる 2019/04/17

SANGOを使わせていただいています。

BOX26のタイトル前のアイコンを消す方法を教えてもらいたいです。

よろしくお願いします。

回答を見る
じょん 2019/04/12

色の変え方などは過去のコメントを見ればわかったのですが、同じデザインで通常の色と別の色とを併用して使いたいです。
何か方法はありませんでしょうか?
教えていただけますと幸いです。

回答を見る
saku 2019/03/24

はじめまして、質問させていただきます。
26以降のタイトルがあるボックスに関してなのですが、普通だとボックスの内容がdivで囲まれていると思います。

しかしなぜか現状自分のサイトに関しては囲まれていません。
これは自動で囲まれるものなのでしょうか?それとも手動でdivを記述するのでしょうか。
現状大きな崩れなどはないのですが、for men様のカスタマイズの記事を試してみたところ、電球つきのボックスが崩れてしまいました。(参照記事:https://for-men.jp/box29-custom/)

こちらの環境はSANGOとPRIPU tearsを使っており、一応バージョンも最新のものを使っております。
もし直し方などありましたらご教示いただければと思います。

回答を見る
ひろ 2019/03/04

WPテーマJINみたいに、ボックスを編集画面から使えるようにしていただきたいです。
ボックスを暗記するのが大変で…。他テーマも使っているので、単語登録だとごちゃごちゃになるしこちらも暗記が大変になってしまいます。技術的に難しいかと思いますが、一意見としてご参照ください。

回答を見る
ミカン 2019/02/09

Boxの中の文章が改行できないのですが、タグを入れると改行できますか?

回答を見る
セン 2019/01/19

いつもお世話になります。
SANGOテーマで運営中の1サイトはショートコードで以下の4点を特に愛用させていただいております。
1.SANGO補足説明(MEMO)
2.SANGO注意書き(注意)
3.ラベル(メインカラー)
4.ラベル(アクセントカラー)

一方、引っ越しが難しい別の1サイト(他テーマ)では、サルワカさんのホームページのボックスや装飾にのっているHTMLやCSSは、活用させていただいているのですが、上記4点も使えれば嬉しいのですが、やはり難しいでしょうか?
引っ越しできれば一番いいのですが、工数的に難しく、イレギュラーな形のご質問とご相談で恐縮ですが、可能であれば方法を知りたく、よろしくお願いいたします。

回答を見る
やまもと 2018/12/22

v1.73にアップデートしました。

私のiphoneで確認すると「box30」のアイコンが表示されません(✕マークになってます)。

回答を見る
もじこ 2018/11/06

こんにちは。お世話になります。
box31の色を変更するcssをご教示ください。
どうぞよろしくお願いいたします。

回答を見る
セン 2018/10/21

いつもお世話になっております。
1.box8とbox22の左の縦線を少し細くしたいのですが、CSSコードを教えていただけないでしょうか?

2.box22のデザインはそのまま残して、
box22をベースに左の青線を少し濃いグレーに変更した仕様を新たにラインナップ追加したいのですが可能でしょうか?
左縦線の太さや背景色も調整できると助かります。
宜しくお願い致します。

回答を見る
後藤真吾 2018/10/08

BOX26以降が出てこなくなったのですが、原因はございますでしょうか?

回答を見る
トモエ 2018/09/28

SANGO使わせていただき、大変気に入っております。ありがとうございます。
box内の一行あけはbrタグを使うということですが、テキストエディタからタグを入れても反映しません。
を入れても、pタグもうまくいきませんでした。なお、本文ではbrで正常に改行します。
どこか設定を間違っていますでしょうか。

回答を見る
ayano 2018/09/05

お世話になります。box26の色変更方法(旗の色含め)教えていただきたいです。
また、BOXの色変更の仕方のまとめページなど(メインカラーを使う方法など)今後作成していただけると大変助かります…。よろしくお願いします。

回答を見る
sangoオタク 2018/08/21

リンクカードで他のページの途中に飛ばしたいのですが、何か方法はありませんでしょうか?

回答を見る
ぽっぷ 2018/07/04

SANGOを使わせていただいております。
ボックスにhタグを付ける方法があれば教えて頂けませんでしょうか?

回答を見る
まっち 2018/06/15

恐れ入ります!
box5の二重枠線の色を変更するCSSを教えていただけますでしょうか。

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

回答を見る
sango愛用者 2018/06/05

SANGOを使わせていただいてます。
boxの21グラデーションの色を変更したいのですが、そのCSSを教えて頂けるでしょうか。
よろしくお願いします。

回答を見る
goga 2018/05/11

もう一度、「反映されないときの対処法まとめ」を読み込み考えたところ、原因が分かりました。ですが、一部どうすればいいのか分からない箇所があります。
お忙しいところ恐縮ですが、教えていただければ幸いです。

blockquoteでそのまま子テーマCSSに書き込んだだけでは、親テーマの方のblockquoteが一部しゃしゃり出てきてデザインが崩れる箇所があるようでした。
そこで、blockquote#aとか#bというようにCSSに書き込み、記事投稿のhtmlでは

というように指定して、何とかデザインが反映されるようになりました。

しかし、それでもデザインによっては外枠のCSSがしゃしゃり出てきてしまって、おかしくなりまして、検証でよく見たところ、

blockquote {
position: relative;
padding: 10px 12px;
box-sizing: border-box;
font-style: italic;
color: #464646;
border-left: solid 50px #3ca5d4;
background: #e0f5ff;
}

このブロックのborder部分が原因だと分かりました。
border: solid 3px #72ccf4; というようにborder全体の指定がされているデザインはぴったり表示されるようになったのですが、上のようにborder-left: solid 50px #3ca5d4;となっているデザインは、borderの残りの部分に親テーマのborderが出てきてしまうようでした。

親テーマのborderが出てこないように、上記のCSSを反映させるには何を追記すればよいのでしょうか?

回答を見る
sango愛用者 2018/04/11

sangoを使用してテーマを作らせていただいてます。
注意書きのコードをメモ帳に貼り付けて、そこからコピペしているのですが、記事に貼り付けると注意の文字の後に<span>と表示されてしまいます。
バグなのでしょうか?解決をよろしくお願いします。

回答を見る
MOCHIMARU 2018/04/05

いつもお世話になっております。素敵なデザインと手厚いサポートに惚れ、私もSANGO導入させていただきました!ありがとうございます。
質問ですが、BOX28の色を変更したいのですが、どのようなコードをCSSに書き込めばよいでしょうか。

回答を見る
AKIHIRO 2018/02/25

いつもお世話になります。お陰様で、かなりサイトを構築することができました。

細かい質問なのですが、「ボックス内で一行空けての改行」はできるのでしょうか。エディタでは一行空けていても、実際の表示では詰められてしまいます。何か良い方法はないでしょうか。

回答を見る
みちひろ 2018/02/17

サンゴ購入しました。素人で全然わからないのですが、box24の色変更の方法を教えて頂けると助かります。
お手すきの際に宜しくお願いいたします。

回答を見る
らいと 2018/02/17

いつも丁寧な説明をありがとうございます。
box29の色やアイコンを変えたいのですが、何かしら方法はありますでしょうか。
どうぞよろしくお願いします。

回答を見る
Yoshio 2017/12/20

SANGO購入させていただきました。デフォルトの状態でもとても細かい部分まで綺麗にデザインされており大変気に入っております。
この記事にコメントするのが正しいのかどうかわからないのですが、ボックス装飾関係でお伺いしたいことがあります。
SANGOカスタマイズガイドの「よくある質問」ページのようなアコーディオンメニューを設置したいと考えているのですが、このような装飾は今後実装される予定はありますでしょうか?
恐らくサルワカの
https://saruwakakun.com/html-css/reference/accordion こちらのカスタマイズをすればSANGOでも使用できるように思うのですが、上記ページのCSS・HTMLをそのままSANGOに追加してみても上手く動作しませんでした。
今後アップデートで追加されるようでしたら大人しく待機しておこうと思うのですが(笑)、SANGOに自力で追加カスタマイズする場合何か注意する点などありましたらお教え頂きたいと思っております。
お手数おかけしますが、よろしくお願い致します。

回答を見る

コメントを残す

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