Ver1.5 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以降は、タイトルの入力が必要となるボックスであるため、投稿編集画面の「スタイル」から挿入することはできません。こちらに記載のあるショートコードを用いて挿入くださいませ。

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
箇条書きはボックス挿入後に作成するようにしましょう(作成済みの箇条書きを後からボックスで囲むことはできません)。

46 Comments

Yoshio

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

返信する
サルワカくん

アップデートでのアコーディオン挿入用のショートコード実装は検討していますが、
もうしばらく時間を頂くことになりそうです。
もしかすると、<input type="checkbox" id="label4" class="cssacc" /><div class="accshow">というように、inputタグとその直後のdivタグの間に改行・空白を入れないようにすれば動くかもしれません。
WordPressでは、自動でbrタグなどが挿入されることがあり、それが原因でアコーディオンでうまく動かない場合があるようです。
一度ご確認頂けますでしょうか。

返信する
Yoshio

早速のご返信ありがとうございます!
アップデートも検討中とのことで、ありがたい&楽しみにしておりますm(_ _)m

お教えいただいたように全ての改行とスペースを削除したところ、そのままコードをコピペしたにあった余計なスペースと、クリックしても全く変化がなかった部分は解消されました(最初にお伝えしていませんでしたが、矢印ありの方でカスタマイズしています)。

しかし今度はクリックしても矢印アイコンの動きは問題ないのですが、隠している要素が表示されませんでした…

クリックしても矢印の向きが変わるだけで、隠れている部分が表示されないという感じです。

こちらはローカル環境でWordPressのバーションは最新(4.9.1)、プラグインもプリインストール以外まっさらという状態です。

プラグインを使用してこういったアコーディオンメニューやタブメニューなどを導入出来ないこともないのですが、デザインをサイトに合わせようとすると中々難しく…

今回お教え頂いた以外で何か心当たりございましたら、お手すきの時にまたお応えいただければと思います。

返信する
Yoshio

何度もコメント申し訳ございません。今いじっていたら原因がわかりました…

WordPressが自動で挿入するPタグのせいでした。
functions.phpにPタグを入れないというコードを入れたところ、綺麗に表示されました!

お手数おかけして申し訳ございませんでした、これからもアップデートや機能追加楽しみにしております!

返信する
サルワカくん

良かったです!
やはり自動挿入が何かと問題になるのですね…。
今後ともよろしくお願いいたします。

サルワカくん

なるほど。可能でしたら、どこかの公開ページに該当するアコーディオンを貼ってみていただけないでしょうか。
実際にページを見ないと原因の特定が難しいため・・・

返信する
らいと

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

返信する
サルワカくん

以下のCSSを子テーマのstyle.cssに追加することで、色を変えることができます。

.box29 {
    border-color: #74c1f8;
}
.box29 .box-title {
    background-color: #74c1f8;
}

色コード(#74c1f8)を自由に変えて頂ければと思います。

返信する
みちひろ

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

返信する
サルワカくん

以下のCSSをstyle.cssに追加してくださいませ。

#main .box24 {
  background-color:  #EFEFEF;
}
#main .box24:after {
  border-top-color: #EFEFEF;
}

※ #EFEFEFを好きな色コードに変更してください。

返信する
みちひろ

ありがとうございます!
ボックスの色変更できました。
何度も申し訳ないんですが、文字の色変更もご教授お願い致します。

返信する
みちひろ

box24の文字色を変更しようと上記のページを拝見したんですが、どの部分にコードを入れればよいのか分かりませんでした。
宜しくお願いします。

返信する
みちひろ

できました!ありがとうございました。

AKIHIRO

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

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

返信する
サルワカくん

WordPressの仕様でビジュアルエディタだと詰められてしまうことがあるので、
テキストエディタを開いて、改行したい位置に<br>を挿入するのが確実です。

返信する
AKIHIRO

シンプルにの挿入で良いのですね。わかりました。ご指導ありがとうございます。

返信する
MOCHIMARU

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

返信する
サルワカくん

ありがとうございます。

.box28 .box-title {
  background-color: #色コード;
}
.box28 {
  border-color: #色コード;
}

を子テーマのstyle.cssに追加すると変更できます。追加後はブラウザのキャッシュを削除してからご確認ください。

返信する
MOCHIMARU

ありがとうございます!無事に変更できました。
今後も愛用させていただきます…!

返信する
sango愛用者

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

返信する
サルワカくん

あ、たぶんカスタマイズガイド上の装飾情報までコピペされてしまっていますね。
この記事内からコピペしたときに、装飾情報はコピーされないようにしたので、再度コピペして頂けますか。
もしくは、ビジュアルではなく「テキスト」のエディタを開いて、ショートコードの前後のspanタグを消して頂ければと思います。

返信する
sango愛用者

問題が解決できました。ありがとうございます!
買ってよかったテーマだと改めて思いました。
素早く、わかりやすい対応ありがとうございました。

返信する
goga

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

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を反映させるには何を追記すればよいのでしょうか?

返信する
サルワカくん

CSSの優先度の問題です。
CSSセレクタのblockquote.entry-content blockquoteに書き換えることで適用の優先順位が上がり、解決します。
見出しなども同様です。.entry-content h2などと書くことで優先度が上がります。

返信する
sango愛用者

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

返信する
サルワカくん
.box21{
  background: linear-gradient(to left,#色コード1,#色コード2);
}

でいけると思います。

返信する
まっち

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

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

返信する
ぽっぷ

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

返信する
サルワカくん

すみません、どういう意味でしょうか。
ボックスに見出しを入れる方法ということですか?

返信する
ぽっぷ

説明が不十分ですみません。。
はい。ボックスに見出しを入れたいと思っています。

返信する
サルワカくん

いえ、問題ありません。
デフォルトでボックス内には見出しを挿入することができると思いますが、うまくいきませんか?

返信する
ぽっぷ

[box class="box31" title="<h2>クラス一覧</h2>"]という形にしたいのですが、可能でしょうか?

ボックス内ではなく、ボックスのタイトルにhタグを付けたいと思っております。

サルワカくん

あーなるほど。ボックスのタイトルをh2タグにしたいということですかね。
多分それ用のショートコードを新しく作る必要がありそうです。
以下のコードを子テーマのfunctions.phpに追加したうえで、[box2 title="ここにタイトル"]とすれば、タイトルが見出しタグになります。

//タイトルが見出しタグのボックスを挿入
add_shortcode('box2','sng_insert_box2');
function sng_insert_box2($atts , $content = null) {
	if(isset($atts) && $content) {
		$class = (isset($atts['class'])) ? esc_attr($atts['class']) : null;
		$title = (isset($atts['title'])) ? esc_attr($atts['title']) : null;
		$content = do_shortcode( shortcode_unautop( $content ) );
		$output = '';
		if(!$title && $class) {//タイトルが無いとき
			$output = <<<EOF
			<div class="sng-box {$class}">{$content}</div>
EOF;
		} elseif($title && $class) {//タイトルがあるとき
			$output = <<<EOF
			<div class="sng-box {$class}"><h2 class="box-title">{$title}</h2>{$content}</div>
EOF;
		}
		return $output;
	}//end if atts && content
}
//ENDタイトルが見出しタグのボックスを挿入
sangoオタク

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

返信する
ayano

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

返信する
サルワカくん

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

.entry-content .box26 {
    border-color: #色コード;
}
.entry-content .box26 .box-title {
  color: #色コード;
}

たしかに仰るとおりですね。時間ができたときにまとめようと思います!

返信する
トモエ

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

返信する
サルワカくん

例えば、以下のように書くとbrタグの部分に1行開くかと思うのですが、うまくいきませんか?

[box class="box25"]
<br><p>aaaa</p>
<br>
<p>ここに文章</p>
<p>aaaa</p>
[/box]
返信する
サルワカくん

この記事にも実は書いてあるのですが
「box26以降は、タイトルの入力が必要となるボックスであるため、投稿編集画面の「スタイル」から挿入することはできません。記載されているショートコードを用いて挿入くださいませ。」
という感じになります。分かりづらくて恐縮です。

返信する

コメントを残す

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