SANGOで自分好みの自作ボックスを使いたい！
そんな方のために、SANGOの既存のボックスをもとに自作のボックスを作る方法を解説していきます。完全にオリジナルではなく、少し修正を加えるだけで良いのでとてもラク。
今回はBox1を少しいじってオリジナルのものを作ってみました。
Beofre
After
あんまり変わってないですが…。しかし今回の方法を応用すれば好きなデザインにできます。
では、手順を解説していきます。
目次
既存のボックスから自作ボックスを作成する
手順1: ショートコードを挿入
記事投稿画面でブロックの追加からショートコードを選択し、以下のコードを書いて通常通りBox1を挿入します。
[box class="box1"]ここに文章[/box]手順2: クラスを追加
クラスに”cstm1”を追加します。（cstm：カスタムの略）
[box class="box1 cstm1”]ここに文章[/box]手順3: 記事を保存し、プレビューで確認
記事を下書き保存し、一度プレビューで確認してみると…
ここに文章
こうなっています。枠線も文字も太いデフォルトの状態です。
手順4: CSSを記述
子テーマのstyle.cssに以下のCSSを記述します。
style.css
.box1.cstm1 {
font-weight: normal;
border: solid 1px #000;
}デザインの部分は自分好みに変えてみて下さい。
手順5: 保存してキャッシュを削除
CSSを保存し、一度さきほどの記事に戻ってプレビューを見てみてください。
おそらくまだデザインは反映されていないかと思います。その場合、キャッシュが消去されていない可能性大です。
キャッシュ消去の方法はサルワカさんの以下の記事が参考になります。
CSSが無事反映！
キャッシュを消去すると無事反映されます。
ここに文章
細くなりましたね！こういう細かいデザイン変えるの好きなんです…。
とにかくお疲れ様でした！
まとめ
この方法を利用すると、SANGOデフォルトのボックスのデザインはそのままに、オリジナルのボックスをいくつも作ることができます。
cstm1の部分をcstm2やcstm3に変え、同じ手順を繰り返すという流れですね。
毎回ショートコードを入力するのは面倒なので、これをAddQuickTagに登録しておくと便利です！